ajax配置要求,AJAX浅谈
ajax的含义
ajax是异步JavaScript和xml(asynchronous JavaScript and xml)：
利用XMLHttpRequest发请求
服务器返回XML格式的字符串，但后面一般使用JSON
JS解析XML，并更新局部页面
代码：
let httpRequest = new XMLHttpRequest() //声明一个xmlhttprequest对象
httpRequest.open('GET', '/xxx') // 配置request
httpRequest.setRequestHeader('Content-Type', 'x-www-form-urlencoded') // 设置请求头第二部分
httpRequest.onreadystatechange = ( => { //随便放在哪个位置，监听状态的变化
if(httpRequest.readyState === 4) {
console.log("请求响应完毕")
console.log(httpRequest.status)
console.log(httpRequest.statusText)
if(httpRequest.status >= 200 && httpRequest.status < 300>) {
console.log("请求成功")
console.log(httpRequest.getAllResponseHeaders())
console.log(httpRequest.responseText)
let string = httpRequest.responseText //取得响应体
let object = window.JSON.parse(string) //把符合JSON语法的字符串转换为JS对象
//JSON.parse是浏览器提供的
} else if(httpRequest.status >= 400) {
console.log('说明请求失败')
}
}
})
httpRequest.send("设置request第四部分") //GET请求不会设置第四部分
用AJAX设置请求头
第一部分GET /XXX HTTP/1.1 : httpRequest.open("get", "/XXX")
第一部分HOST: jack.com:8002 : httpRequest.open('get', "http://jack.com:8002/")
第二部分Content-Type : application/x-www-url-encoded : httpRequest.setRequestHeader("Content-Type", "application/x-www-url-encoded")
第四部分a = 1&b = 2 : httpRequest.send('a = 1&b = 2')
用AJAX获取响应头
第一部分HTTP/1.1 200 OK : httpReuqest.status & httpRequest.statusText
第二部分Content-Type : application/x-www-url-encoded : httpRequest.getResponseHeader("Content-Type")
所有的第二部分 : httpRequest.getAllResponseHeaders()
第四部分 : httpRequest.responseText
现在一般不使用XML,而使用JSON，JSON是道格拉斯写的一本轻量型的文本语言
自己封装jQuery的ajax函数
//传入一个对象，该对象具有url,method等方法和回调函数。
window.jQuery.ajax = function({url, method, body, successFn, failFn, headers}) {
let request = new XMLHttpRequest()
request.open(method, url)
for(let key in headers) {
let value = headers[key]
request.setRequestHeader(key, value)
}
request.onreadystatechange = () => {
if(request.readystate === 4) {
if(request.status >= 200 && request.status < 300) {
successFn.call(undefined, request.responseText)
} else if(request.status >= 400) {
failFn.call(undefined, request)
}
}
}
request.send(body)
}
用promise规范重新封装该函数：
window.jQuery.ajax = function({url, method, body, headers}) {
return new Promise(function(resolve, reject) {
let request = new XMLHttpRequest()
request.open(method, url)
for(let key in headers) {
let value = headers[key]
request.setRequestHeader(key, value)
}
request.onreadystatechange = () => {
if(request.readystate === 4) {
if(request.status >= 200 && request.status < 300) {
resolve.call(undefined, request.responseText)
} else if(request.status >= 400) {
reject.call(undefined, request)
}
}
}
request.send(body)
})
}
window.jQuery.ajax({
url: '/baidu.com',
method: 'GET',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
}
}).then(
(responseText) => {
console.log(responseText)
},
(request) => {
console.log(request)
}
)
什么是同源策略？
协议+域名+端口一摸一样
cors跨域 (Cross-Origin Resource Sharing)
就是告诉后端哪个域名可以访问，后端node中写入
response.setHeader('Access-Control-Allow-Origin', '你请求的网站所在')
一般现在跨域用cors跨域比较多
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！