一个js可以写两个ajax吗,用原生JS写一个AJAX

1.什么是AJAX

AJAX(Asynchronous Javascript And XML)：异步的JS和XML。

2.AJAX三部曲

使用XMLHttpRequest发请求

服务器返回XML格式的字符串

JS解析XML，并更新布局页面

3.面试必问： 请用原生JS写一个AJAX

let request = new XMLHttpRequest() //创建一个XMLHttpRequest对象

request.open(method , url)

request.onreadystatechange = function(){ //监听状态变化

if(request.readyState === 4){ //如果对象已经加载完成

if(request.status >=200 && request.status <300){ //加载成功

console.log(request.responseText)

console.log('success')

}else if(request.status >= 400){ //加载失败

console.log(request)

console.log('fail')

}

}

}

request.send(body) //body是请求返回给响应的内容

通常在面试中只需要写上面一部分。

下面是ajax设置请求和获取响应的所有方式：

let request = new XMLHttpRequest()

request.open(method, url) //设置请求第一部分

XMLHttpRequest.setRequestHeader("frank"："18") //设置请求头

request.send(body) //设置请求第四部分，method是GET时，不显示body的内容

request.onreadystatechange = function(){

if(request.readyState === 4){

if(request.status >=200 && request.status < 300){

let headers = request.getAllResponseHeaders()//获取所有的响应头

let s = request.getResponseHeader('Content-Type') //获取响应头Content-Type的内容

let text = request.responseText //获取响应的第四部分

let object = window.JSON.parse(text)

}

}

}

请求：

设置请求的第一部分：XMLHttpRequest.open( method, url )

设置请求的第二部分：XMLHttpRequest.setRequestHeader( name, value )设置HTTP请求头，在open和send之间使用。

设置请求的第四部分: XMLHttpRequest.send( body )，默认Get第四部分不显示，设置了也没有用。

响应：

获取响应的第一部分：

request.status //200

request.statusText //ok

获取响应的第二部分 – 响应头：

request.getAllResponseHeaders() //获取所有的响应头，返回一个字符串

request.getResponseHeader('Content-Type') //获取响应头Content-Type的内容

获取响应的第四部分：

request.responseText //获取响应的第四部分的内容