XMLHttpRequest对象

Ajax技术的核心是XMLHttpRequest对象，简称XHR。
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest对象
IE5是第一款引入XHR对象的浏览器，在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此在IE中可能遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp3.0、MSXML2.XMLHttp6.0。

@H_301_16@function creatXHR() {
    @H_301_16@if(@H_301_16@typeof arguments.callee.activeXString != 'string'){
        @H_301_16@var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp3.0','MSXML2.XMLHttp'];
        @H_301_16@for(@H_301_16@var i=0; i < versions.length; i++){
            @H_301_16@try{
                @H_301_16@new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                @H_301_16@break;
            }@H_301_16@catch (ex){
                console.log(ex);
            }
        }
    }
}

尽可能根据IE中可用的MSXML库的情况使用最新版本的XHR对象。
IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象，创建XHR对象的方式如下:

@H_301_16@var xhr = @H_301_16@new XMLHttpRequest();

如果不考虑IE低版本的话，这样创建即可，如果想要兼容IE早期版本，那么可以在createXHR函数中加入对原生XHR对象的支持，如下：

@H_301_16@function creatXHR() {
    @H_301_16@if(@H_301_16@typeof XMLHttpRequest != 'undefined'){
        @H_301_16@return @H_301_16@new XMLHttpRequest();
    }@H_301_16@else @H_301_16@if(@H_301_16@typeof ActiveXObject != 'undefined'){
        @H_301_16@if(@H_301_16@typeof arguments.callee.activeXString != 'string') {
            @H_301_16@var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp'];
            @H_301_16@for (@H_301_16@var i = 0; i < versions.length; i++) {
                @H_301_16@try {
                    @H_301_16@new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    @H_301_16@break;
                } @H_301_16@catch (ex) {
                    console.log(ex);
                }
            }
        }
        @H_301_16@return @H_301_16@new ActiveXObject(arguments.callee.activeXString);
    }@H_301_16@else{
        @H_301_16@throw @H_301_16@new Error('No XHR Object available');
    }

}

XHR的用法
使用XHR对象，要调用的第一个方法是open();open()接受3个参数，(1)要发送的请求类型(get、post等);(2)请求的URL;(3)表示是否异步发送请求的布尔值(true表示异步,false表示同步)。

@H_301_16@var xhr = creatXHR();
xhr.open('get','data.PHP',@H_301_16@false);

请求的URL可以是相对路径，也可以是绝对路径。调用open()方法并不会真正发送请求，而是启动一个请求以备发送。
要发送请求，需要调用send()方法。send()接收一个参数，即作为主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null。

@H_301_16@var xhr = creatXHR();
xhr.open('get',@H_301_16@false);
xhr.send(@H_301_16@null);

接受到服务器的响应后，响应的数据会自动填充XHR对象的属性：
responseText:作为响应主体被返回的文本
responseXML:如果响应的内容类型是”text/xml”或者”application/xml”，这个属性中保存着响应数据的XML DOM文档
status:响应的HTTP状态
**statusText:**HTTP状态的说明
在接收到响应之后，第一步是检查status属性，以确定响应成功返回，一般将HTTP状态代码200作为成功的标致，此时，responseText属性的内容已经就绪。状态代码304表示请求的资源没有被改变，可以直接使用浏览器的缓存。

@H_301_16@var xhr = creatXHR();
xhr.open('get',@H_301_16@false);
xhr.send(@H_301_16@null);
@H_301_16@if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
//success
}@H_301_16@else{
//Failed
}

发送同步请求时，这样处理是没有问题的，但是如果是异步请求，我们就需要去检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。
0:未初始化，尚未调用open()方法
1:启动，已经调用open()方法，但是尚未调用send()方法
2:发送，已经调用send()方法，但尚未接收到响应
3:接收，已经接收到部分响应数据
4:完成，已经接收到全部响应数据，而且可以在客户端使用了。
只有readyState属性的值从一个值变为另一个值，就会触发一次readystatechange事件

@H_301_16@var xhr = creatXHR();
xhr.onreadystatechange = @H_301_16@function () {
    @H_301_16@if(xhr.readyState == 4){
        @H_301_16@if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            //deal with xhr.responseText
        }@H_301_16@else{
            console.log("Failed");
        }
    }
};

HTTP头部信息
每个HTTP请求和响应都会带有相应的头部信息，默认情况下，在发送XHR请求的同时，还会发送下列头部信息。
Accept:浏览器能够处理的内容类型。
Accept-Charset:浏览器能够显示的字符集。
Accept-Encoding:浏览器能够处理的压缩编码。
Accept-Language:浏览器当前设置的语言。
Connection:浏览器与服务器之间连接的类型。
Cookie:当前页面设置的任何Cookie。
Host:发出请求的页面所在的域。
Referer:发出请求的页面的URL。
User-Agent:浏览器的用户代理字符串。
XHR对象提高了操作这两种头部(请求头部和响应头部)信息的方法：
setRequestHeader()设置自定义的请求头部信息。接受两个参数：(1)头部字段的名称;(2)头部字段的值。
getResponseHeader()传入头部字段名称，获取响应的响应头部信息。
getAllResponseHeaders()取得一个包含所有头部信息的长字符串。

GET请求
get请求，可以将查询字符串参数追加到URL末尾，以便将信息发送给服务器。对XHR而言，传入open()的URL末尾的查询字符串必须经过正确的编码才行。查询字符串的每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾。

@H_301_16@function addURIParam(url,name,value) {
    url += (url.indexOf('?') == -1) ? '?' : '&';
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
    @H_301_16@return url;
}

addURIParam用于向URL的末尾添加查询字符串参数。
POST请求 post请求通常用于向服务器发送应该被保存的数据，POST请求应该把数据作为请求的主体提交。在open()方法的第一个参数位置传入”post”，在send中传入数据。默认情况下，服务器对POST请求和提交web表单的请求不会一视同仁，不过我们可以使用XHR模仿表单提交。首先将Content-Type头部信息设置为application/x-www-form-urlencoded.其次是以适当的格式创建一个字符串。

原文链接：https://www.f2er.com/ajax/162075.html

猜你在找的Ajax相关文章