加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

浅析ajax

发布时间:2020-12-16 01:41:54 所属栏目:百科 来源:网络整理
导读:1.什么是Ajax Ajax:是Asynchronous Javascript And XML的简写,即异步JavaScript和XML 用途: 动态刷新局部数据,无需卸载整个页面,从而带来更好的用户体验 Ajax核心: XMLHttpRequest对象(简称XHR) 2.如何创建XHR对象 以下是一个跨浏览器创建XHR对象的函

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);

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读