[JavaScript知识库]Ajax的使用目的，工作原理，原生用法，以及封装

1. 使用ajax请求的原因：Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验，较少网络数据的传输量。

2. ajax工作原理：是一种特殊的http请求，使用ajax引擎来发送请求，只有确定需要从服务器获取新数据时再由ajax引擎代为浏览器发送请求，使用到XMLHttpRequest对象的实例来向服务器发送异步请求，从服务器获得数据，然后使用javaScript来利用Dom实现页面的局部更新

3. ajax的过程：

   • 创建 XMLHttpRequest 对象

   • 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

   • 设置响应 HTTP 请求状态变化的函数

   • 发送 HTTP 请求

   • 获取异步调用返回的数据

   • 使用 JavaScript 和Dom实现局部刷新

4. ajax请求发送的原生方式：

   var xhr = new XMLHttpRequest(); ? //创建ajax实例
   xhr.open(method,url,async); ? ?//链接url地址
   xhr.send(); //发送请求
   xhr.onreadystatechange = function(){ ?//数据交互事件
    ? ?if(xhr.readyState ==4){ ?//完成
    ? ? ? ?if(xhr.status ==200){
    ? ? ? ? ? ?console.log('成功： '+xhr.responseText);
    ? ? ?  }else{
    ? ? ? ? ? ?console.log('失败');
    ? ? ?  }
    ?  }
   }

5. ajax 请求的时候 get 和 post 方式的区别 :get 一般用来进行查询操作，url 地址有长度限制，请求的参数都暴露在 url 地址当中，安全性较低;?post 请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于 http 请求体中，数据不会暴漏在 url 地址中,安全性较高

6. ajax的缺点

   • ajax不支持浏览器back按钮。

   • 安全问题AJAX暴露了与服务器交互的细节。

   • 对搜索引擎的支持比较弱。

   • 破坏了程序的异常机制。

7. 发送ajax请求与发送一般http请求的区别

   ajax请求由ajax引擎发送，是一种特别的http请求；对服务器端来说没有区别；只有XHR或者fetch发出的才是ajax请求；一般的http请求会直接响应数据在视图上，而ajax请求响应的数据会返回给一个对象，由自己决定是否要使用该对象的某些属性，不会直接响应在视图上。

8. 封装ajax请求（简易版）

   function Ajax({
       url,
       method = 'GET',
       params = {},
       data = {},
   }) {
       //返回一个promise对象
       return new Promise((res, rej) => {
           //执行ajax异步请求
   
           //GET请求的url格式是键值对的格式
           const resquery = '';
           Object.keys(params).forEach((item) => {
               resquery += `${item}=${params[item]}&`;
           })
           if (resquery) {
               resquery = resquery.substring(0, resquery.length - 1)
               url += '?' + resquery;
           }
   
           const request = new XMLHttpRequest();
           request.open(method, url, true);
           if (method === 'GET') {
               request.send();
           } else if (method === 'POST') {
               request.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
               request.send(JSON.stringify(data));
           }
   
           //绑定状态检测的监听
           request.onreadystatechange = function () {
               if (request.readyState != 4) {
                   return
               } else {
                   const { status, statusText } = request;
                   if (status >= 200 && status <= 299) {
                       const response = {
                           data: JSON.parse(request.response),
                           status: status,
                           statusText,
                       }
                       res(response);
                   } else {
                       rej(new Error('request error stauts is' + status));
                   }
               }
           }
       })
   
   }