JS原生Ajax(XMLHttpRequest对象)

Ajax

用途：主要是引用于异步交互，当使用Ajax模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载(刷新)整个页面。这使得HTML页面能成更快速地对用户的操作进行反馈。

Ajax的实现流程

• XMLHttpRequest对象是实现Ajax异步交互的核心

1. 创建XMLHttpRequest对象
2. 调用XMLHttpRequest对象的open()与服务器端建立连接
3. 调用XMLHttpRequest对象的send()方法向服务器传输数据，null代表不传输任何东西
4. 利用XMLHttpRequest对象的onreadystatechange事件监听服务器端的通信状态
5. 将接收到的结果更新到HTML页面

 var xhr = createXMLHttpRequest();
     
      xhr.onreadystatechange = function () {
    
    
        /*
               XMLHttpRequest对象的readyState属性
               * 作用 - 表示服务器端的通信状态
               * 值
                   * 0 - 未初始化
                   * 1 - open()方法被调用
                   * 2 - send()方法被调用
                   * 3 - 正在响应
                   * 4 - 响应已完毕
           */
        if (xhr.readyState === 4) {
    
    
          /*
                 保证当前的异步请求一定是正确的
                 * XMLHttpRequest对象的status属性
                     * 作用 - 得到当前请求之后的响应状态码
                       * 200 - 表示请求成功
                       * 304 - 表示请求的资源未变化（转向获取本地缓存）
                       * 404 - 表示服务器端地址未找到
             */
          console.log(xhr.status);
          if (xhr.status === 200) {
    
    
            /*
                  接收服务器端响应的结果
                  * responseText属性 - 专门接收字符串类型的结果内容
                  * responseXML属性 - 专门接收XML数据格式的结果内容
              */
            console.log(xhr.responseText);
          }
          if (xhr.status === 404) {
    
    
            console.log("服务器端地址未找到");
          }
        }
      };
      xhr.open("get", "https://extheor.github.io");
      xhr.send(null);

请求方式

首先注意send的注意方法

send(data)方法
        * 参数data - 表示要向服务器端发送的请求数据
        * 请求方式
          * 如果当前的请求方式为GET的话 - send()方法中只能传递null值
            * 将请求数据添加到请求地址链接中
          *
        * 两种情况
          * 发送数据 - user=maxiaoyu&pwd=123456
            * 请求数据的格式
              1. 如果具有多个请求数据的话，之间使用"&"进行分隔
              2. 每个数据格式 -> name=value
          * 不发送数据 - send()方法中必须传递null值，而不能为空

GET

• get方法注意的事项
  • get的send只能是null
  • get的参数要写到open中的url中
• get的写法

1. xhr.open("get", "https://extheor.github.io?user=maxiaoyu&pwd=123456");
2. send(null)

POST

• post方法的注意事项
  • post要发送的数据就直接写在send的参数中，以字符串的方式传输，但是服务端接受的是字符串
    • 如果想在让服务端接受键值类型的数据，就在传递send之前设置请求头信息Content- Type：appli cati on / x-www- fofm-urlencoded
• post的写法

1. xhr.open("get", "https://extheor.github.io");
2. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
3. send('user=maxiaoyu&pwd=123456')

• 写没写请求头传输数据的呈现的格式