几种Aja技术

今天我来谈谈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,请考虑其他方法。

Beacons

Beacons技术很适合向服务器发送数据。

和上面的动态脚本注入类似,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的解释: 链接

结束

关键字:JavaScript, ajax, 异步, 脚本

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部