引言
Asynchronous JavaScript and XML(异步JavaScript与XML),Ajax不是一种新的技术,她是一种解决方案或者说是一个概念。是由Jesse James Garrett率先提出的。
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。也促成了 Web 2.0 的诞生。
发展
传统的Web应用使用http form表单进行提交,一旦提交,浏览器就会刷新整个页面。也就是Web运作原理:一次HTTP请求对应一个页面。
如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。
XMLHttpRequest
为了能够使用JavaScript向服务器发出 HTTP 请求,我们需要一个提供这个功能的类的实例。这就是XMLHttpRequest的由来。
XMLHttpRequest开始只是IE 5提供的一个接口,使得Javascript可以进行HTTP(S)通信。后来各大浏览器纷纷效仿也提供了这个接口,再后来W3C对它进行了标准化,提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。
我们通常会将Ajax等同于XMLHttpRequest,但是其实他们应该是两个不同的概念,ruoyiqing总结为:
我们使用XMLHttpRequest对象来发送一个Ajax请求。
Level1
老版本下如何发送一个Ajax请求
- 实例化一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
- 向请求页面发送HTTP请求
xhr.open('GET', 'https://img-blog.csdn.net/20170213150458509?');
xhr.send();
- 监控对象状态,指定回调函数
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 && xhr.status == 200 ) {
console.log( xhr.responseText );
} else {
console.log( xhr.statusText );
}
};
Level2
Level1主要有以下几个缺点:
受同源策略的限制,不能发送跨域请求;
不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;
在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成;
Level2新增了:
可以发送跨域请求,在服务端允许的情况下;
支持发送和接收二进制数据;
新增formData对象,支持发送表单数据;
发送和获取数据时,可以获取进度信息;
可以设置请求的超时时间;
小结
总的来说,现在主流的js库都封装了Ajax,我们写一个Ajax请求变得越来越简单,如jQuery。仅仅是简单的使用这没问题,如果想深入了解Ajax,了解XMLHttpRequest,还是要去看W3C的标准。
Ajax让Web应用程序变得更加完善,更加美好,使Web App成为了可能。
Ajax是一种解决方案,更是一种编程的艺术。