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跨域比较多