前端Jquery中的Ajax

XMLHttpRequest

Ajax是Asyn chronous Javascript And XML的简写，其中文意思是：异步 JavaScript 和 XML。它是前端和后端进行数据交换的另一种通道，可以异步更新网页内容，在不重新加载整个网页的情况下，对网页的某部分进行更新。

我们平时所说的Ajax，以及各个库或者框架支持的封装的Ajax方法，大多是利用的XMLHTTPRequest对象进行封装的，使用它可以进行HTTP通信。该对象有两个等级，目前使用的是XMLHttpRequest Level 2，是对该对象有两个等级，目前使用的是XMLHttpRequest Level 1改进后的产品。

let xhr = new XMLHttpRequest();
console.dir(xhr);

通过打印该对象的实例方法，我们可以看到该对象有很多成员，具体各个成员是干啥的，可以参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest，内容有点多，不过我们平时用的时候，并不需要全部关注，我们比较关注的有这几个：

// 初始化一个请求
xhr.open();
// 发送请求
xhr.send();
// 设置header值
xhr.setRequestHeader()
// 请求的五种状态readyState
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
xhr.readyState
// 响应的内容，其值的类型根据xhr.responseType的值决定
// 其它的还有：
// responseText	获得字符串形式的响应数据。
// responseXML	获得 XML 形式的响应数据
xhr.response
// 设置期望服务器响应的数据格式
xhr.responseType
// 响应状态码，如 200 (表示一个成功的请求)
xhr.status
// 响应状态信息，包含一个状态码和消息文本
xhr.statusText
// 上传过程，可以在其上添加一个事件监听来跟踪上传过程
xhr.upload
// 当一个资源的加载已中止时触发
xhr.onabort
// 当一个资源加载失败时会触发
xhr.onerror
// 当一个HTTP请求正确加载出内容后返回时触发
xhr.onload
// 请求超时的时候调用
xhr.ontimeout
// 当 readyState 属性值改变时会调用它
xhr.onreadystatechange
// 设置超时时间
xhr.timeout

其实上面列出来的几个也无需全部记住，下面写个例子：

let xxx = document.getElementById('xxx');
xxx.onclick = function(){
  // 创建一个xhr对象
  let xhr = new XMLHttpRequest();
  // 监听readyState属性值的变化
  xhr.onreadystatechange = function(){
    // 请求响应完毕
    if(xhr.readyState === 4){
      if(xhr.status == 200){
        // console.log(xhr.responseText);
        console.log(xhr.response);
      }else{
        console.log(xhr.status);
      }
    }
   }
  }
  // 创建请求
  xhr.open('GET', '/yyy');
  // xhr.responseType = 'json';
  // 发送请求
  xhr.send()

Jquery中的Ajax

请参考文档：

http://jquery.cuishifeng.cn/jQuery.Ajax.html

http://jquery.cuishifeng.cn/jQuery.get.html

http://jquery.cuishifeng.cn/jQuery.post.html