一份简易版的原生Ajax？

一、什么是原生的Ajax？

简单来说就是 通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面的技术。

二、Ajax的优缺点？

ajax的优点：

1、最大的一点是页面无刷新，用户的体验非常好。
　　 2、使用异步方式与服务器通信，具有更加迅速的响应能力。。
　　 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
　　 4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
　　 5、ajax可使因特网应用程序更小、更快，更友好。

ajax的缺点：

1、ajax不支持浏览器back按钮。
　　 2、安全问题 AJAX暴露了与服务器交互的细节。
　　 3、对搜索引擎的支持比较弱。
　　 4、破坏了程序的异常机制。
　　 5、不容易调试。

三、Ajax发送请求时的流程：

１.　创建 new XMLHttpRequest　　　要想兼容 IE5 6 new ActiveXObject

	let xhr;
      if (window.XMLHttpRequest) {
        xhr =new XMLHttpRequest();
      } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
      }
      console.log(xhr);

2. 创建玩两个对象后有两个方法 open(method,url,async) 发送设置　和　send() 发送请求

    // method---请求方式		post get put delete 
    // url--- 请求发送的地址
    // async--- 是否是异步请求	  true 异步 false同步		
    xhr.open('get',url,true)
    
    //发送post请求体数据用,get 不用填写
    xhr.send();

3. readyState状态: 通过XMLHttpRequest对象发送HTTP请求的各阶段状态码( 0-4 )

4. status状态: 服务器响应的状态码 ( 200ok , 404 )

 3 } readyState状态:
  			1、客户端初始化为0

			2、与服务器建立连接，状态值为1

			3、服务器接受请求，状态值为2

			4、服务器处理中，状态值为3

			5、处理完成 返回结果，状态值为4

4 } status状态码:
            200-300之间      请求成功

            300-400之间		重定向

            400-500之间        请求错误!404未找到

            500-600之间		服务器错误!数据库出问题!联系开发者

５.onreadystatechange 事件: 挂载到XMLHttpRequest对象上的事件

xhr.onreadystatechange = state_change;
function state_change (){
	if (xhr.readyState == 4 && xhr.status == 200) {
		//操作返回的数据
		console.log(JSON.parse(xhr.responseText));
	}
}

四 请求示例:

1.post 请求

// send()方法参数中的格式: a=1&b=2&c=3
// post请求时一定要在open()方法后加上 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') 设置请求头信息
// 目的时将请求体中的数据转换为键值对,这样后端接收到a=1&b=2&c=3这样的数据才知道这是一个post方式传来的数据

五 原生Ajax封装

var $ = (function(){
      let xhr = window.XMLHttpRequest ?
                new XMLHttpRequest() :
                new ActiveXObject('microsoft.XMLHTTP');
      // 如果是ie5以下的版本浏览器  报错
      if (!xhr) {
        throw new Error('你的浏览器不支持异步发起HTTP请求')
      }
      function _doAjax(option){
        var option = option || {},
            type =  (option.type || 'GET').toUpperCase(),
            async = option.async || true,
            url = option.url,
            data = option.data || null,
            error = option.error || function(){},
            success = option.success || function(){},
            complete = option.complete || function(){};
        if (!url) {
          throw new Error('您没有填写URL')
        }
        xhr.open(type,url,async);
        type === 'POST' && xhr.setRequestHeader('Content-type','application/x-www-urlencoded');
        xhr.send(type === 'GET' ? null : fromatDatas(option.data))
        xhr.onreadystatechange = function(){
          if (xhr.readyState === 4 && xhr.status === 200) {
            success(JSON.parse(xhr.responseText));
          }
          if (xhr.status === 404) {
            error(JSON.parse(xhr.responseText));
          }
          complete();
        }
      }
      function fromatDatas(obj){
        let str = '';
        for (const key in obj) {
          str += key + '=' + obj[key] + '&';
        }
        console.log(str);
        return str
      }
      return {
        ajax: function(opt){
          _doAjax(opt)
        },
        post: function(url,data,success){
          console.log('post');
          _doAjax({
            type: 'POST',
            url: url,
            data: data,
            success: callback
          })
        },
        get: function(type,url,success){
          console.log('get');
          _doAjax({
            type: 'GET',
            url: url,
            success: callback,
          })
        },
      }
    })()
    
    //调用
    var lin = {
        pageSize: 10,
        start: "2020-06-01 11:11:11",
        end: "2020-06-20 11:11:11",
        localWxNo: "liuyunts2010",
        customerWxNo: "wxid_xd9in7c86mdo21"
    }
    function change(){
      $.ajax({
        type:'POST',
        url:'http://www.360myhl.com:8090/baseDevice/getWeMessageByPage',
        data:lin,
        success:function(data){
          console.log(data);
        }
      });
    }

本文地址：https://blog.csdn.net/weixin_44600183/article/details/107351399