前端校招准备--Ajax原理及其实现

binaryTree 发布于2019-08-23 13:45 / 934人阅读

摘要：实现局部刷新的原理是通过对象来向服务器发送异步请求，通过操作相应的来更新页面。在以及都内建了对象，但是和是使用对象。参考文章同源策略及其规避方法详解技术原理

前言

我们在请求数据的时候，往往会使用到ajax，而且一般都是通过引入jQuery库，再使用。但是，如果我们想直接使用ajax怎么办呢，这个时候就可以自己写一个ajax，刚一听可能会觉得很难，但是看完我的文章后你肯定就会觉得原来这么简单~

正文 Ajax介绍

想象一个场景，你在淘宝上看中一件物品，想加入购物车，但是呢，你点击添加购物车后，整个页面刷新了，你之前看的物品记录也没有了，这样是不是很烦（这是因为没有使用ajax更新数据时，会请求整个页面的数据，重新渲染）。

碰到这种情况，ajax就出场了，有了它，我们可以在点击添加商品后，只更新购物车中的物品数量就可以了，根本就不需要更新整个页面，用官方一点的话来说，就是可以控制网页的局部刷新。

ajax实现局部刷新的原理是通过XmlHttpRequest对象来向服务器发送异步请求，通过js操作相应的DOM来更新页面。

Ajax实现过程

ajax实现异步请求的过程可以分为以下几个步骤：

创建XmlHttpRequest对象

初始化参数

发送信息

接收信息

从上面的介绍可以看出，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技术原理

云服务器 GPU云服务器人工智能原理及其应用 web前端工程师校招 ajax工作原理 web前端 ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99487.html

"双非"应届生校招如何获得大厂青睐?（内附前端大厂面经+技术岗超全求职攻略）

摘要：拿到秋招的同学，如确定入职需与用人单位签署三方协议，以保证双方的利益不受损失。当然每个岗位所要求的侧重点不同，但却百变不离其宗。方法论要想达成某个目标都有其特定的方法论，学习技术也不例外，掌握适当的学习方法才能事半功倍。写在前面的话笔者从17年的2月份开始准备春招，其中遇到不少坑，也意识到自己走过的弯路。故写了这篇文章总结一番，本文适合主动学习的，对自己要学的课程不明确的，对面试有...

jeffrey_up 2019-08-30 14:23 评论0 收藏0
"双非"应届生校招如何获得大厂青睐?（内附前端大厂面经+技术岗超全求职攻略）

摘要：拿到秋招的同学，如确定入职需与用人单位签署三方协议，以保证双方的利益不受损失。当然每个岗位所要求的侧重点不同，但却百变不离其宗。方法论要想达成某个目标都有其特定的方法论，学习技术也不例外，掌握适当的学习方法才能事半功倍。写在前面的话笔者从17年的2月份开始准备春招，其中遇到不少坑，也意识到自己走过的弯路。故写了这篇文章总结一番，本文适合主动学习的，对自己要学的课程不明确的，对面试有...

lindroid 2019-08-26 17:25 评论0 收藏0
腾讯前端求职直播课——笔试篇

摘要：主讲人黎腾年加入腾讯，技术面试官引入面试是一个让面试官认识你的过程，尽全力展现的你就好，正常发挥没通过再接再厉，失常发挥没通过实为遗憾要求要求找准定位，重视基础前端发展日新月异，打牢基础原生，才能以不变应万变如性能，安全要求用更远的视角去看主讲人：黎腾(Litten)：13年加入腾讯，技术面试官 1.引入面试是一个让面试官认识你的过程，尽全力展现100%的你就好，正常发挥没通过...

Sunxb 2019-08-20 18:02 评论0 收藏0
腾讯前端求职直播课——笔试篇

摘要：主讲人黎腾年加入腾讯，技术面试官引入面试是一个让面试官认识你的过程，尽全力展现的你就好，正常发挥没通过再接再厉，失常发挥没通过实为遗憾要求要求找准定位，重视基础前端发展日新月异，打牢基础原生，才能以不变应万变如性能，安全要求用更远的视角去看主讲人：黎腾(Litten)：13年加入腾讯，技术面试官 1.引入面试是一个让面试官认识你的过程，尽全力展现100%的你就好，正常发挥没通过...

cnTomato 2019-08-29 12:55 评论0 收藏0
腾讯前端求职直播课——笔试篇

摘要：主讲人黎腾年加入腾讯，技术面试官引入面试是一个让面试官认识你的过程，尽全力展现的你就好，正常发挥没通过再接再厉，失常发挥没通过实为遗憾要求要求找准定位，重视基础前端发展日新月异，打牢基础原生，才能以不变应万变如性能，安全要求用更远的视角去看主讲人：黎腾(Litten)：13年加入腾讯，技术面试官 1.引入面试是一个让面试官认识你的过程，尽全力展现100%的你就好，正常发挥没通过...

yintaolaowanzi 2019-08-01 17:09 评论0 收藏0