摘要:实现局部刷新的原理是通过对象来向服务器发送异步请求,通过操作相应的来更新页面。在以及都内建了对象,但是和是使用对象。参考文章同源策略及其规避方法详解技术原理
前言
我们在请求数据的时候,往往会使用到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技术原理
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99487.html
摘要:拿到秋招的同学,如确定入职需与用人单位签署三方协议,以保证双方的利益不受损失。当然每个岗位所要求的侧重点不同,但却百变不离其宗。方法论要想达成某个目标都有其特定的方法论,学习技术也不例外,掌握适当的学习方法才能事半功倍。 写在前面的话 笔者从17年的2月份开始准备春招,其中遇到不少坑,也意识到自己走过的弯路。故写了这篇文章总结一番,本文适合主动学习的,对自己要学的课程不明确的,对面试有...
摘要:拿到秋招的同学,如确定入职需与用人单位签署三方协议,以保证双方的利益不受损失。当然每个岗位所要求的侧重点不同,但却百变不离其宗。方法论要想达成某个目标都有其特定的方法论,学习技术也不例外,掌握适当的学习方法才能事半功倍。 写在前面的话 笔者从17年的2月份开始准备春招,其中遇到不少坑,也意识到自己走过的弯路。故写了这篇文章总结一番,本文适合主动学习的,对自己要学的课程不明确的,对面试有...
摘要:主讲人黎腾年加入腾讯,技术面试官引入面试是一个让面试官认识你的过程,尽全力展现的你就好,正常发挥没通过再接再厉,失常发挥没通过实为遗憾要求要求找准定位,重视基础前端发展日新月异,打牢基础原生,才能以不变应万变如性能,安全要求用更远的视角去看 主讲人:黎腾(Litten):13年加入腾讯, 技术面试官 1.引入 面试是一个让面试官认识你的过程,尽全力展现100%的你就好,正常发挥没通过...
摘要:主讲人黎腾年加入腾讯,技术面试官引入面试是一个让面试官认识你的过程,尽全力展现的你就好,正常发挥没通过再接再厉,失常发挥没通过实为遗憾要求要求找准定位,重视基础前端发展日新月异,打牢基础原生,才能以不变应万变如性能,安全要求用更远的视角去看 主讲人:黎腾(Litten):13年加入腾讯, 技术面试官 1.引入 面试是一个让面试官认识你的过程,尽全力展现100%的你就好,正常发挥没通过...
摘要:主讲人黎腾年加入腾讯,技术面试官引入面试是一个让面试官认识你的过程,尽全力展现的你就好,正常发挥没通过再接再厉,失常发挥没通过实为遗憾要求要求找准定位,重视基础前端发展日新月异,打牢基础原生,才能以不变应万变如性能,安全要求用更远的视角去看 主讲人:黎腾(Litten):13年加入腾讯, 技术面试官 1.引入 面试是一个让面试官认识你的过程,尽全力展现100%的你就好,正常发挥没通过...
阅读 2676·2021-09-24 09:47
阅读 4295·2021-08-27 13:10
阅读 2956·2019-08-30 15:44
阅读 1244·2019-08-29 12:56
阅读 2576·2019-08-28 18:07
阅读 2591·2019-08-26 14:05
阅读 2506·2019-08-26 13:41
阅读 1245·2019-08-26 13:33