摘要:今天我来谈谈技术。我简要罗列一下几种常见的技术动态脚本注入和图片信标技术接下来我简要谈谈我对这几种技术的理解。该特性可以实现无阻塞加载脚本技术。和动态脚本注入类似,技术也有可跨域和无法发送非请求的问题。目前使用最多的技术手段就是利用技术。
今天我来谈谈Ajax技术。
Ajax是一种与服务器通信而无需重载页面的方法。数据可以从服务器获取或者发给服务器。
Ajax和异步分不开,但是本文重点部分不是异步,而是对实现Ajax的技术进行总结。
我简要罗列一下几种常见的Ajax技术:
动态脚本注入和JSON-P
图片信标(Beacons)
XMLHttpRequest(XHR)技术
接下来我简要谈谈我对这几种技术的理解。
动态脚本注入之前的文章中谈到,标签作为DOM的一部分,可以由JavaScript调用DOM操作的接口动态创建。动态创建的元素可以为其设置src属性并且插入到DOM树中。此时异步线程会并行的去加载src资源,等到资源加载完成之后,其中的字符会当做JavaScript语句执行。
该技术是一个hack技术,它利用了浏览器的特性。该特性可以实现“无阻塞加载脚本”技术。更多细节可以移步:无阻塞加载脚本的理解。
除了在页面初始化的时候可以使用动态脚本注入,Ajax技术也可以使用动态脚本注入的技术实现。动态脚本注入可以从服务器中请求数据。
首先我们需要将待请求数据的细节放在src中。因为src对应一个url,浏览器会将这个url作为GET请求发往相应的服务器,所以我们将请求数据作为查询字符串写入src。
服务器在收到请求后,会返回数据。但是这个数据必须以一段JavaScript脚本的形式返回。原因是浏览器收到响应数据后会将其当做JavaScript脚本执行。
也就是说,假设响应数据如果只是简单的xml或者json数据,对于动态脚本注入来说,没有任何意义。
因此服务器收到动态脚本注入中的GET请求时,需要返回一个约定好的表示JavaScript脚本的字符串。这段脚本还需要处理浏览器端需要的数据,比如:
dosomething([{"x": 1, "y": "haha"}]);
这段字符串返回之后就会被执行。其中dosomething就是约定好的一个回调函数名。这个回调函数已经在之前的脚本中定义好。
另外,我们还可以将回调函数名称作为查询字符串传入,这样服务器就可以动态的将回调函数作为响应数据中的一部分返回。
dosomething中的参数一个JSON数据,但是它在返回之后,会被当做JavaScript对象执行。由于这种特性,使用JSON的动态脚本注入又可以称作所谓的“JSON-P”。
该技术还有两个注意点:
动态脚本注入技术可以跨域访问,不同域中返回的脚本可能截获网站数据,导致安全问题,因此要小心使用。
动态脚本注入技术不能发送POST等非GET请求。然而,有些浏览器对GET请求有诸多限制(比如url字符数的限制),因此需要POST请求的Ajax,请考虑其他方法。
BeaconsBeacons技术很适合向服务器发送数据。
和上面的动态脚本注入类似,Beacons可以使用特定的DOM元素,利用src属性向服务器发送数据,但是不需要服务器返回数据。
我们可以使用一个Image对象,设置src之后,该请求会从服务器返回一个图片(一般是一个1*1的透明图片)。这是最常用的方法。
var url = "...."; var params = [ "..", ".." ]; var img = new Image(); img.src = url + "?" + params.join("&");
如果响应中不需要任何数据,注意需要服务器设置状态码为204 No Content。
如果需要一定的消息返回,我们可以用一种变通的手法:设置返回图片的宽度,不同的宽度代表不同的信息。这些信息可以在Image对象的onload事件中监听。
img.onload = function(){ if (this.width === 1){ // ... } else if (this.width === 2){ // ... } // else if ... }
和动态脚本注入类似,Beacons技术也有可跨域和无法发送非GET请求的问题。
另外,也可以利用标签来做类似的操作。
XMLHttpRequest目前Ajax使用最多的技术手段就是利用XMLHttpRequest技术。
XMLHttpRequest是一个特殊的构造函数,这个构造函数不在ECMA标准内,但是各大浏览器对其均支持良好。
直接上代码:
var xhr = new XMLHttpRequest(); var url = "..."; var data; // 接受响应主体 var header; // 接受响应头 var status; // 接收状态码 var statusText; // 接收状态信息 xhr.onreadystatechange = function(){ // 监听readyState变化 if (xhr.readyState === 4){ // 该值为4,表明响应结束 data = xhr.responseText; // 获取响应主体 // or: data = xhr.responseXML; ... headers = xhr.getAllResponseHeaders(); // 获取响应头 status = xhr.status; // 获取状态码 statusText = xhr.statusText; //获取状态信息 // do something... } } xhr.open("GET", url, true); // 开启一个请求,true表示异步响应 xhr.setRequestHeader("..", ".."); // 设置请求头 xhr.send(null); // 开始发送,参数是请求主体(用于POST请求)
XMLHttpRequest支持GET和POST请求,并且可以轻松设置请求主体和部分请求头,也可以获取响应主体和响应头。虽然名称叫XMLHttpRequest,但是事实上它支持各种不同的数据格式如JSON、HTML等。
但是注意,该技术是不能跨域访问的,除非web服务器设置了允许跨域访问策略。
另一个值得注意的地方就是:readyState的值为4,表明响应结束,但是我们也可以监听其值为3的情况,该值表明响应正在进行,此时可以获取部分响应主体。
readyState的值为0、1和2分别表示open()尚未调用、open()已调用,和接收到头信息。这些用途相对较小。
更多详情,请参见MDN中关于XMLHttpRequest的解释:链接
结束文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/90835.html
摘要:一概述什么是同步,什么是异步同步现象客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态异步现象客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死的运行原理页面发起请求,会将请求发送 一、Ajax概述1.什么是同步,什么是异步同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态异步现象:客户...
摘要:我在面试前针对基础也花了不少的时间,期间也将自己写过的博文粗略地刷了一遍,同时也在网上找了不少比较好的资料部分是没看完的。看面试题也是校验自己是否真正理解了这个知识点,也很有可能会有新的收获。 一、前言 只有光头才能变强 回顾前面: 广州三本找Java实习经历 上一篇写了自己面试的经历和一些在面试的时候遇到的题目(笔试题和面试题)。 我在面试前针对Java基础也花了不少的时间,期间也将...
摘要:前端最基础的就是。一个朋友的问题,监测下载进度。这节主要是讲如何使用,以及前端下载的核心操作。下载文件,并显示进度条。下载文件,并显示进度条下载文件上面已经实现了,那我们先说说如何显示进度条。实现代码如下,我们操作成读流,然后统计长度。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(H...
摘要:前端最基础的就是。一个朋友的问题,监测下载进度。这节主要是讲如何使用,以及前端下载的核心操作。下载文件,并显示进度条。下载文件,并显示进度条下载文件上面已经实现了,那我们先说说如何显示进度条。实现代码如下,我们操作成读流,然后统计长度。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(H...
阅读 2849·2021-11-15 18:02
阅读 3772·2021-10-14 09:43
阅读 3706·2021-09-08 10:41
阅读 2469·2019-08-30 15:53
阅读 1785·2019-08-30 14:14
阅读 1921·2019-08-29 16:12
阅读 3118·2019-08-29 14:03
阅读 1252·2019-08-29 13:46