浅析ajax

2019年8月30日 126次阅读 来源: Evan_Chen

1.什么是Ajax

Ajax：是Asynchronous Javascript And XML的简写，即异步JavaScript和XML
用处：动态革新部份数据，无需卸载悉数页面，从而带来更好的用户体验
Ajax中心：XMLHttpRequest对象(简称XHR)

2.怎样建立XHR对象

以下是一个跨浏览器建立XHR对象的函数:

function createXHR() {  
        if (typeof XMLHttpRequest !== "undefined") {  
            return new XMLHttpRequest();
        }else if{
            if (typeof ActiveXString != "undefined") {  
                    var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp" ];  
                    for ( var i = 0, len = versions.length; i < len; i++) {  
                        try {  
                            var xhr = new ActiveXObject(versions[i]);  
                            arguments.callee.activeXString = versions[i];  
                            break;  
                        } catch (error) {  
                            // ...  
                        }  
                    }  
                }
                return new ActiveXObject(arguments.callee.activeXString);
        }else {
            throw new Error("No XHR object avaliable.");
        }
    }

XMLHttpRequest这个对象的属性：

  • responseText 作为相应主体返回的文本。

  • responseXML 假如相应的内容范例是”text/xml”或”application/xml”，这个属性将保留包含着相应数据的xml DOM文档。

  • status 相应的http状况

  • statusText http状况的申明

当XHR对象把一个HTTP要求发送到服务器的历程中会阅历几个状况，直到要求被处置惩罚，然后才吸收一个回应。readyState是XHR要求的状况属性，它本身有5个属性值：

  • 0（未初始化）还没有挪用open()要领

  • 1（启动）已挪用send()要领，正在发送要求

  • 2(发送)send()要领完成，已收到悉数相应内容

  • 3(吸收)已吸收到部份相应内容

  • 4（完成）相应内容剖析完成，能够再客户端使用了

3.完成Ajax的步骤

A.建立一个XHR对象

var xhr= createXHR();

B.设置相应HTTP要求状况变化的函数

xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){
            xxx.innerHTML = xhr.responseText;//革新了xxx中的数据
        } else {
            alert("Request was failed:"+xhr.status);
        }
    }
};

C.建立一个新的HTTP要求,并指定该HTTP要求的要领、URL及示意是不是异步发送要求的布尔值

xhr.open("get","getAjaxData.php",true);//true示意异步发送要求

D.设置自定义要求头部(可选)

xhr.setRequestHeader("myHeader","myValue");//jsonp跨域要求时会用到自定义的头部

E.发送http要求

xhr.send(null);//作为要求主体发送的数据，无数据必需传入null，post要求时经常会发送数据

完全代码以下：

var xhr= createXHR();
xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){
            xxx.innerHTML = xhr.responseText;
        } else {
            alert("Request was failed:"+xhr.status);
        }
    }
};
xhr.open("get","getAjaxData.php",true);
xhr.setRequestHeader("myHeader","myValue");
xhr.send(null);
    原文作者：Evan_Chen
    原文地址: https://segmentfault.com/a/1190000004682451
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞