浅析Ajax语法_H5之家 - 中国HTML5教程资源分享第一站

Ajax是目前很普遍的一门技术，也是很值得探讨和研究的一门技术。本文将针对Ajax的发展过程并结合其在不同库" target="_blank">框架中的使用方式来和大家分享下Ajax的那些新老语法。

　Ajax简介

　　Ajax全称为“Asynchronous Javascript And XML”，即“异步JavaScript和XML”的意思。通过Ajax我们可以向服务器发送请求，在不阻塞页面的情况下进行数据交互，也可以理解为异步数据传输。在Ajax的帮助下我们的网页只需局部刷新即可更新数据的显示，减少了不必要的数据量，大大提高了用户体验，缩短了用户等待的时间，使得web应用程序更小、更快，更友好。

　　当然以上都是司空见惯的内容了，作为一名合格的开发人员基本都再熟悉不过了，这里只为那些刚入门的新手做一个简单的介绍。更多的关于Ajax的简介请移步PHP中文网进行了解：

　原生Ajax

　　基本上所有现代的浏览器都支持原生Ajax的功能，下面就来详细介绍下利用原生JS我们怎样来发起和处理Ajax请求。

　　1.获取XMLHttpRequest对象var xhr = new XMLHttpRequest(); // 获取浏览器内置的XMLHttpRequest对象

　　如果你的项目应用不考虑低版本IE，那么可以直接用上面的方法，所有现代浏览器 (Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。如果需要兼容老版本IE（IE5、IE6），那么可以使用 ActiveX 对象：

var xhr; if (window.XMLHttpRequest) { xhr=new XMLHttpRequest(); } else if (window.ActiveXObject) { // 兼容老版本浏览器 xhr=new ActiveXObject("Microsoft.XMLHTTP"); }　　2.参数配置

　　有了XMLHttpRequest对象，我们还需要配置一些请求的参数信息来完成数据交互，利用open方法即可：

　　open方法为我们创建了一个新的http请求，其中第一个参数为请求方式，一般为'GET'或'POST'；第二个参数为请求url；第三个参数为是否异步，默认为true。

　　3.发送请求

　　配置完了基本参数信息，我们直接调用send方法发送请求，代码如下：

　　这里需要注意的是如果使用GET方法传递参数，我们可以直接将参数放在url后面，比如'/test/?name=luozh&size=12';如果使用POST方法，那么我们的参数需要写在send方法里，如：

xhr.open('POST', '/test/', true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将请求头设置为表单方式提交 xhr.send('name=luozh&size=12');

　　最终会以Form Data的形式传递：

　　如果不设置请求头，原生Ajax会默认使用Content-Type是'text/plain;charset=UTF-8'的方式发送数据,如果按照上面的参数书写形式，我们最终传输的形式这样的：

　　显然这并不是服务器期望的数据格式，我们可以这样写：

xhr.open('POST', '/test/', true); xhr.send(JSON.stringify({name: 'luozh', size: 12}));

　　最终传输的格式如下：

　　这样我们可以直接传递JSON字符串给后台处理，当然后台也许进行相应配置。

　　4.监测状态

　　发送完Ajax请求之后，我们需要针对服务器返回的状态进行监测并进行相应的处理，这里我们需要使用onreadystatechange方法，代码如下：

var xhr; if (window.XMLHttpRequest) { xhr=new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr=new ActiveXObject("Microsoft.XMLHTTP"); } if (xhr) { xhr.open('GET', '/test/', true); // 以GET请求的方式向'/test/'路径发送异步请求 xhr.send(); xhr.onreadystatechange = function () { // 利用onreadystatechange监测状态 if (xhr.readyState === 4) { // readyState为4表示请求响应完成 if (xhr.status === 200) { // status为200表示请求成功 console.log('执行成功'); } else { console.log('执行出错'); } } } }

　　上面我们利用onreadystatechange监测状态，并在内部利用readyState获取当前的状态。readyState一共有5个阶段，当其为4时表示响应内容解析完成，可以在客户端调用了。当readyState为4时，我们又通过status来获取状态码，状态码为200时执行成功代码，否则执行出错代码。

　　当然我们可以用onload来代替onreadystatechange等于4的情况，因为onload只在状态为4的时候才被调用，代码如下：

xhr.onload = function () { // 调用onload if (xhr.status === 200) { // status为200表示请求成功 console.log('执行成功'); } else { console.log('执行出错'); } }

　　然而需要注意的是，IE对onload这个属性的支持并不友好。

　　除了onload还有

　　等事件，有兴趣的同学可以亲自去实践它们的用处。

　　以上便是原生Ajax请求数据的常见代码。

　其他库框架中的Ajax　　1.jQuery中的Ajax

　　jQuery作为一个使用人数最多的库，其Ajax很好的封装了原生Ajax的代码，在兼容性和易用性方面都做了很大的提高，让Ajax的调用变得非常简单。下面便是一段简单的jQuery的Ajax代码：

$.ajax({ method: 'GET', // 1.9.0本版前用'type' url: "/test/", dataType: 'json' }) .done(function() { console.log('执行成功'); }) .fail(function() { console.log('执行出错'); })

　　与原生Ajax不同的是，jQuery中默认的Content-type是'application/x-www-form-urlencoded; charset=UTF-8', 想了解更多的jQuery Ajax的信息可以移步官方文档：

　　2.Vue.js中的Ajax