如何用ajax实现异步请求?ajax异步与同步有哪些区别?

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工具网。

推荐阅读:

java系统架构设计遇到的问题有哪些?

java必学框架有哪些?java必学框架汇总

java如何写九九乘法表?java写九九乘法表代码实例