欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

一份简易版的原生Ajax?

程序员文章站 2022-03-21 19:30:12
一、什么是原生的Ajax?简单来说就是 通过XmlHttpRequest对象向服务器发异步请求,从服务器获得数据,然后用 javascript 来操作DOM更新页面的技术。二、Ajax的优缺点?ajax的优点:1、最大的一点是页面无刷新,用户的体验非常好。  2、使用异步方式与服务器通信,具有更加迅速的响应能力。。  3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”...

一、什么是原生的Ajax?

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

二、Ajax的优缺点?

ajax的优点:

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

ajax的缺点:

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

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

1. 创建 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();
  1. readyState状态: 通过XMLHttpRequest对象发送HTTP请求的各阶段状态码( 0-4 )
  2. 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之间		服务器错误!数据库出问题!联系开发者
5.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

相关标签: Ajax javascript