AJAX是Asynchronous JavaScript + XML的简写,使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载整个页面，那如何用ajax实现异步请求?下面来我们就来给大家讲解一下。
(1)为浏览器创建一个 XMLHttpRequest对象
var xhr = new XMLHttpRequest();
(2)创建将请求发送到服务器的功能：
xhr.open('GET', './demo.php');(3)通过连接发生一次请求
xhr.send(string);
(4)指定 xhr 状态变化事件处理函数
5xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
if (this.readyState === 4) {
// 通过 xhr 的 responseText 获取到响应的响应体
console.log(this)readyState的四个状态
0 ：代表xhr被创建但还没有调用open方法。
1 ：open()方法已经被调用建立了连接。
2：调用了send()方法，并且已经可以获取状态行和响应头。
3: 响应体加载中， responseText 属性可能已经包含部分数据。
4: 响应体加载完成，可以直接使用 responseText 。
例：
var xhr = new XMLHttpRequest() //0状态
xhr.open('GET', 'time.php') //1状态，open方法已经调用了，建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {}) //里面包含了2，3，4三种状态，2分别为接受到了响应头但还没有接受到响应体;
正在下载响应报文;
报文下载下来处理响应体
xhr.onreadystatechange = function ()
{
if (this.readyState === 4)
{} //处理函数ajax异步与同步有哪些区别?
ajax同步和异步的差异， 先看2段代码：
代码一：
代码如下:
Synchronize = function (url, param)
{
function createXhrObject()
{
var http;
var activeX = ["MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
try
{
http = new XMLHttpRequest;
}
catch (e)
{
for (var i = 0; i < activeX.length; ++i)
{
try
{
http = new ActiveXObject(activeX[i]);
break;
}
catch (e)
{}
}
}
finally
{
return http;
}
}
var conn = createXhrObject();
conn.open("POST", url, false); //ajax同步
conn.send(param);
var strReturn = conn.responseText;
alert("1");
if (strReturn != "")
{
return Ext.decode(conn.responseText);
}
else
{
return null;
}
alert("2");
};代码二：
Ajax 同步请求方式:
代码如下:
Synchronize = function (url, param)
{
function createXhrObject()
{
var http;
var activeX = ["MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
try
{
http = new XMLHttpRequest;
}
catch (e)
{
for (var i = 0; i < activeX.length; ++i)
{
try
{
http = new ActiveXObject(activeX[i]);
break;
}
catch (e)
{}
}
}
finally
{
return http;
}
}
var conn = createXhrObject();
conn.open("POST", url, true); //ajax异步
conn.send(param);
var strReturn = conn.responseText;
alert("1");
if (strReturn != "")
{
return Ext.decode(conn.responseText);
}
else
{
return null;
}
alert("2");
};同步和异步的差异如下：
conn.open('POST',Url,true); // ajax异步
conn.open('POST',Url,false); // ajax同步
对于代码二，为异步的ajax请求，执行结果为：先执行alert(2)再执行alert(1), 异步的意思就是说一旦conn.open请求一发出，前端不去等待它的响应便执行后面的代码，所以alert(2)先执行了，然后当响应response到达以后才执行alert(1);
对于代码一，为同步的ajax请求，执行结果为：先执行alert(1)再执行alert(2), 同步的意思就是说一旦conn.open请求一发出，前端就去等待它的响应，响应完成以后，alert(1)先执行了，然后alert(2);
这就是ajax异步和同步的区别，其实两者最大的区别：同步需要等待，而异步无需等待。最后大家如果想要了解更多其他工具教程知识，敬请关注奇Q工具网。
推荐阅读：