Ajax的艺术

引言

  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是一种解决方案，更是一种编程的艺术。