前端校招预备--Ajax道理及其完成

2023年6月10日 109次阅读 来源: huhaha24

媒介

 我们在要求数据的时刻，每每会运用到ajax，而且平常都是经由历程引入jQuery库，再运用。然则，假如我们想直接运用ajax怎么办呢，这个时刻就能够本身写一个ajax，刚一听可能会以为很难，然则看完我的文章后你一定就会以为本来这么简朴~

正文

Ajax引见

 设想一个场景，你在淘宝上看中一件物品，想到场购物车，然则呢，你点击增加购物车后，悉数页面革新了，你之前看的物品纪录也没有了，如许是否是很烦（这是因为没有运用ajax更新数据时，会要求悉数页面的数据，从新衬着）。

 遇到这类状况，ajax就进场了，有了它，我们能够在点击增加商品后，只更新购物车中的物品数目就能够了，基础就不须要更新悉数页面，用官方一点的话来讲，就是能够掌握网页的部分革新。

 ajax完成部分革新的道理是经由历程XmlHttpRequest对象来向服务器发送异步要求，经由历程js操纵相应的DOM来更新页面。

Ajax完成历程

 ajax完成异步要求的历程能够分为以下几个步骤：

  1. 建立XmlHttpRequest对象
  2. 初始化参数
  3. 发送信息
  4. 吸收信息

 从上面的引见能够看出，ajax要求的中心在于XmlHttpRequest对象,所以了解了XmlHttpRequest的机制就相当于知道了ajax的实行历程。

 在Chrome,Firefox,Opera,Safari以及IE7+都内建了XmlHttpRequest对象，然则IE5和IE6是运用ActiveX对象。

 要领：

  • abort(): 作废如今的衔接，能够将XmlHttpRequest对象的状况值重置为0
  • open(): 初始化http的要求参数，然则不发送要求
  • send(): 发送http要求
  • setRequestHeader()：给一个翻开然则未发送的要求设置参数

 属性：

  • onreadystateChange: 状况转变触发的回调函数
  • reposeText: 从服务器返回数据的字符串花样
  • reposeXML: 从服务器返回兼容DOM的文档数据对象
  • status: 从服务器返回的状况码
  • statusText: 陪伴状况码返回的信息，如status=200时，statusText=’OK’

  • readyState: 对象状况值

      0示意XmlHttpRequest对象已建立或许已被abort()要领重置
  1示意对象已初始化，然则要求还未发送（挪用了open()要领，send()要领还没有挪用）
  2示意要求已发送，没有吸收到相应信息（sed()要领已被挪用）
  3示意已吸收到了一切的相应头，相应体最先吸收但未完成
  4示意相应信息已悉数吸收

题目: http状况码（status）和对象的状况值(readyState)有什么区别？

回复：http状况码是指服务器吸收到要求后返回的一个状况码，个中比较罕见的是200（要求胜利），404（要求失利），500（服务器发作毛病），更多参考这里；而对象状况值，是针对XmlHttpRequest对象的，前面已诠释了每一个状况值代表的寄义；它们俩之间的联络就是只有当要求历程悉数完成后，才能够依据服务器返回的状况码挪用差别的函数。

Ajax要求历程的代码完成

    //封装一个ajax要求
    function ajax(options){
      //建立XMLHttpRequest对象
      if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest
      }else{
        var xhr = new ActiveXObject()
      }

      //初始化参数的内容
      options = options ||{}
      options.type = (options.type ||'GET').toUpperCase()
      options.dataType = options.dataType || 'json'
      var params = options.data

      //发送要求
      if(options.type == 'GET'){
        xhr.open('GET',options.url + '?' + params,true)
        xhr.send(null)
      }else if(options.type == 'POST'){
        xhr.open('POST',options.url,true)
        xhr.send(params)
        // xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded")//划定输出为键值对的情势
      }

      //吸收要求
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
          var status = xhr.status
          if (status >= 200 && status < 300){
            options.success && options.success(xhr.responseText,xhr.responseXML)
          }else{
            options.fail &&options.fail(status)
          }
        }
      }  
    }

    ajax({
      type: 'post',
      dataType: 'json',
      data: {},
      url: 'https://www.easy-mock.com/mock/5bbd92e0004caf3b6a68db6f/example/api/countEventsLevel',
      success: function(text,xml){//要求胜利后的回调函数
        console.log(text)
      },
      fail: function(status){////要求失利后的回调函数
        console.log(status)
      }
    })

总结

 实在与ajax要求相干的知识点许多，比方它的中心XmlHttpRequest对象，跨域题目等。因为本文中的重点在于手动完成ajax要求，所以这些内容临时先不触及，不过我会在文后将参考链接送上，感兴趣的能够看看。

参考文章

同源战略及其躲避要领
XmlHttpRequest详解
ajax手艺道理

    原文作者：huhaha24
    原文地址: https://segmentfault.com/a/1190000017176090
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞