浅析ajax

前端之家收集整理的这篇文章主要介绍了浅析ajax前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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",true);
xhr.setRequestHeader("myHeader","myValue");
xhr.send(null);

猜你在找的Ajax相关文章