用原生JS写一个AJAX

1.什么是AJAX

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

2.AJAX三部曲

1. 使用XMLHttpRequest发请求
2. 服务器返回XML格式的字符串
3. 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 //获取响应的第四部分的内容