Ajax的实现及使用-原生对象_H5之家 - 中国HTML5教程资源分享第一站

正文

学习JavaScript就不得不提到Ajax，从2005年开始，Ajax技术就开始席卷整个Web世界。作为一个前端来说，大部分时间中都是使用的库中封装好的ajax模块(jQuery),即使已使用到滚瓜烂熟，也不一定就能说明白，Ajax到底是什么，它是怎么实现的，所以这几章作为开年来的复习篇章，将之前的阅读笔记进行整合。相关的转载皆在文章中做了说明。

XMLHttpRequest对象

将Ajax具象化，可以看出其就是无需刷新页面而可以从服务器端取得数据的一种技术，所以微软率先引入了XMLHttpRequest。在IE7+以及现代浏览器中都可以直接获取该对象。

可以看到，两者的传递信息的方式并不相同，相比较而言，使用post方式可以不限格式的提交数据，而get受限于url的格式问题。

url长度理论上没有长度限制，但因为各种浏览器所支持的url长度不同，特别是老版本的ie，限制是2083字节，而post因为走的header部分，且在form时，可以与表单数据一起提交，所以数据量取决于服务器的处理能力。至于安全问题么，只能说在现在这个时代里，客户端所发出来的东西都需要经过层层校验来确认安全性，而get和post与之没有太多的关系。

模拟form表单提交:

xhr.open("post","example.json",true);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send("key=0&key1=1}");

XMLHttpRequest 2级

FormData

作为表单而言，序列化是使用很频繁的，jQuery里也有相应的函数实现（serialize()）,而如果使用FormData：

xhr.open("post","example.json",true);

var form = document.getElementById("user-info");

xhr.send(new FormData(form));

就可以不必明确的在XHR对象上设置请求头部。

超时设定

timeout表示请求在等待响应多少毫秒之后就会终止。在给timeout设置一个数值后，如果在规定的时间内浏览器还没有收到响应，那么就会触发timeout事件，进而会调用ontimeout()回调。

overrideMimeType()

该方法用于重写XHR响应的MIME类型。在重写服务器返回的MIME类型上比较有用，可以指定返回的MIME类型进行处理，需要放在send()之前。

跨域

通常情况下，如果直接访问与包含XHR对象的页面不同域的资源时，是无法访问的，但是，有时又需要与外部域的资源进行交互，所以，CORS(Cross-Origin Resource Sharing,跨域资源共享)就可以解决这个问题。其就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是否成功。更详细的内容可以去看下大神的博客跨域资源共享 CORS 详解(阮一峰)

因为整个CORS过程其实是浏览器能够自动的对于跨域的请求附加头信息，所以，只要服务器实现了CORS接口，那么，就已经可以进行跨域。然后主要看下从客户端可以直接请求跨域的资源的方法

图像Ping

作为<img>来说，平常自然会与它频繁的打交道，而<img>可以从任何地址中获取图像信息，所以，可以通过这种方式，再加上Image对象的onload()和onerror()方法，单向的向服务器发送请求：

var img = new Image();

img.onload = img.onerror = function(){

console.debug("ok");

}

img.src = "http://url?params=1";

这样就可以发送简单的GET请求，但问题也很明显，拿不到服务器返回的响应文本，而且只能发送GET请求。

JSONP

作为使用频次非常高的一种方式，其一般的表现形式都是：

callback({"name":"test"})

由回调函数和数据组成，其中的数据就是callback()的参数，那么就可以知道，如果我们将请求当成<script>标签的url时，就可以在请求完成之后，直接运行这个回调函数了，首先来个例子，单纯的通过<script>获取数据。

function jsonp1(response){

console.debug(response);

}

var script = document.createElement("script");

script.src = "http://url?callback=jsonp1";

document.body.insertBefore(script,document.body.firstChild);

当载入页面时，因为插入之后立即执行了jsonp1(),所以就可以拿到response的值了，也就是服务器返回的数据。但是要确认jsonp请求是否失败并不容易，当归纳到zepto和jQuery时再详细的介绍这一方法。

小结

本文归纳了之前在工作和学习中一小部分的笔记，并且通过阅读书籍《JavaScript高级程序设计》,将AJAX初步介绍了下，之后的zepto和jQuery的AJAX部分才算是实际应用部分，更新只能在有空的时间了，开年确实时间宝贵啊。