我们都知道， ajax目前已经是一门很普遍的技术了，本文主要介绍了原生js中的ajax的实现原理以及xmlhttprequest及promise的概念和流程。
ajax是目前很普遍的一门技术，也是很值得探讨和研究的一门技术。本文将针对ajax的发展过程并结合其在不同库框架中的使用方式来和大家分享下ajax的那些新老语法。
ajax简介
ajax全称为“asynchronous javascript and xml”， 即“异步javascript和xml”的意思。通过ajax我们可以向服务器发送请，在不阻塞页面的情况下进行数据交互，也可以理解为异步数据传输。在ajax的帮助下我们的网页只需局部刷新即可更新数据的显示，减少了不必要的数据量，大大提高了用户体验，缩短了用户等待的时间，使得web应用程序更小、更快，更友好。
当然以上都是司空见惯的内容了，作为一名合格的开发人员基本都再熟悉不过了，这里只为那些刚入门的新手做一个简单的介绍。
原生ajax
基本上所有现代的浏览器都支持原生ajax的功能，下面就来详细介绍下利用原生js我们怎样来发起和处理ajax请求。
获取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");
}
参数配置
有了xmlhttprequest对象，我们还需要配置一些请求的参数信息来完成数据交互，利用open方法即可：
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/'路径发送异步请求
}
open方法为我们创建了一个新的http请求，其中第一个参数为请求方式，一般为'get'或'post'；第二个参数为请求url；第三个参数为是否异步，默认为true。
发送请求
配置完了基本参数信息，我们直接调用send方法发送请求，代码如下：
var xhr;
if (window.xmlhttprequest) {
xhr=new xmlhttprequest();
} else if (window.activexobject) {
xhr=new activexobject("microsoft.xmlhttp");
}
if (xhr) {
xhr.open('get', '/test/', true);
xhr.send(); // 调用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字符串给后台处理，当然后台也许进行相应配置。
监测状态
发送完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还有:
1.onloadstart
2.onprogress
3.onabort
4.ontimeout
5.onerror
6.onloadend
等事件，有兴趣的同学可以亲自去实践它们的用处。
以上便是原生ajax请求数据的常见代码。
其他库框架中的ajax
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的信息可以移步官方文档：http://api.jquery.com/jquery.ajax/
vue.js中的ajax
vue.js作为目前热门的前端框架，其实其本身并不包含ajax功能，而是通过插件的形式额外需要在项目中引用，其官方推荐ajax插件为vue-resource，下面便是vue-resource的请求代码：
vue.http.get('/test/').then((response) => {
console.log('执行成功');
}, (response) => {
console.log('执行出错');
});
3.angular.js中的ajax
这里angular.js中的ajax主要指angular的1.×版本，因为angular2目前还不建议在生产环境中使用。
var myapp = angular.module('myapp',[]);
var myctrl = myapp.controller('myctrl',['$scope','$http',function($scope, $http){
$http({
method: 'get',
url: '/test/',
headers: {'content-type': 'application/x-www-form-urlencoded; charset=utf-8'}
}).success(function (data) {
console.log('执行成功');
}).error(function () {
console.log('执行出错');
});
}]);
在angular中，我们需要在控制器上注册一个$http的事件，然后才能在内部执行ajax。angular的ajax默认的content-type是'application/json;charset=utf-8'，所以如果想用表单的方式提交还需设置下headers属性。
4.react中的ajax
在react中我比较推荐使用fetch来请求数据，当然其不仅适用于react，在任何一种框架如上面的vue、angular中都可以使用，因为其已经被目前主流浏览器所支持，至于其主要功能和用法，我在下面会做下讲解。
fetch api
fetch api 是基于 promise 设计，由于promise的浏览器兼容性问题及fetch api本身的兼容问题，一些浏览器暂时不支持fetch api，浏览器兼容图如下：
当然我们可以通过使用一些插件来解决兼容性问题，比如：fetch-polyfill、es6-promise、fetch-ie8等。
使用fetch我们可以非常便捷的编写ajax请求，我们用原生的xmlhttprequst对象和fetch来比较一下：
xmlhttprequst api
// xmlhttprequst api
var xhr = new xmlhttprequest();
xhr.open('get', '/test/', true);
xhr.onload = function() {
console.log('执行成功');
};
xhr.onerror = function() {
console.log('执行出错');
};
xhr.send();
fetch api
fetch('/test/').then(function(response) {
return response.json();
}).then(function(data) {
console.log('执行成功');
}).catch(function(e) {
console.log('执行出错');
});
可以看出使用fetch后我们的代码更加简洁和语义化，链式调用的方式也使其更加流畅和清晰。随着浏览器内核的不断完善，今后的xmlhttprequest会逐渐被fetch替代。关于fetch的详细介绍可以移步：https://segmentfault.com/a/1190000003810652
跨域ajax
介绍了各种各样的ajax api，我们不能避免的一个重要问题就是跨域，这里重点讲解下ajax跨域的处理方式。
处理ajax跨域问题主要有以下4种方式：
1.利用iframe
2.利用jsonp
3.利用代理
4.利用html5提供的xmlhttprequest level2
第1和第2种方式大家应该都非常熟悉，都属于前端的活，这里就不做介绍了，这里主要介绍第3和第4种方式。
利用代理的方式可以这样理解：
通过在同域名下的web服务器端创建一个代理：
北京服务器(域名:www.beijing.com)
上海服务器(域名：www.shanghai.com)
比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/services.php)的服务，然后再把访问结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。
利用xmlhttprequest level2的方式需要后台将请求头进行相应配置：
// php语法
header('access-control-allow-origin: *');
header('access-control-allow-methods: get,post');
以上的*号可以替换成允许访问的域名，*表示所有域名都可以访问。
由此可见，第3和第4种方式主要是后台的活，前端只需调用就可以。
总结
无论ajax的语法多么多变，无论库和框架如何封装ajax，其只是一种实现异步数据交互的工具，我们只需理解原生js中ajax的实现原理，了解xmlhttprequest及promise的概念和流程，便可以轻松的在数据异步交互的时代游刃有余。
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
css的文本字体颜色如何设置
css里的font文字怎么设置
css3中的transform 渐变属性怎么使用
以上就是ajax的常用语法是什么的详细内容。