实现一个AJAX请求

     Ajax是Asynchronous JavaScript and XML的缩写，指的是通过Javascript的异步通信，从服务器获取XML文档从中提取数据，再更新当前页面的对应部分，而不用刷新整个网页

 

创建AJAX请求的步骤：

      1.创建一个XMLHttpRequest对象
      2.在这个对象上使用open方法创建一个HTTP请求,open方法所需要的参数是请求的方法，请求的地址，是否异步和用户的认证信息，在发起请求前，可以为这个对象添加一些信息和监听函数。一个 XMLHttpRequest对象一共有5个状态，当它的状态变化时会触发onreadystatechange事件，可以通过设置监听函数，来处理请求成功后的结果。当对象的readyState变为4时，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态status，如果状态是2xx或者304，则代表返回正常。这个时候就可以通过response中的数据来对页面进行更新了
      3.还可以通过setRequestHeader方法来为请求添加头信息
      4.当对象的属性和监听函数设置完成后，最后调用sent方法来向服务器发起请求，可以传入参数作为发送的数据体

XMLHttpRequest对象的readyState属性4个状态码

1：（启动）请求已发送，调用了open()方法；

2：（发送）请求发送完成状态，调用了send()方法；

3：（接收）开始请求服务器响应；

4：（完成）请求服务器响应结束

 

利用GET方法发送

// 1.创建对象
    let xhr = new XMLHttpRequest();
    // 2.初始化  设置请求方法和URL
    xhr.open('GET',url,true);
    // 设置请求头
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // 3.发送
    xhr.send();
    // 4.事件绑定  处理服务端返回的结果
    xhr.onreadystatechange = function(){
      // 判断（服务端返回了所有的结果）
      if(xhr.readyState == 4){
        // 判断响应码的状态码
        if(xhr.status >= 200 && xhr.status <300){
          // 处理结果
          // 1.响应行
          /* console.log(xhr.status);   //状态码
          console.log(xhr.statusText);  //状态字符串
          console.log(xhr.getAllResponseHeaders());  //所有响应头
          console.log(xhr.response);  //响应体 */

          result.innerHTML = xhr.response;
        }
      }
    }

利用POST方法请求

let xhr = new XMLHttpRequest();
    xhr.open('POST',url,true);

    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    xhr.send();

    xhr.onreadystatechange =function(){
      if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300){
          result.innerHTML = xhr.response
        }
      }
    }