`
haiyupeter
  • 浏览: 418824 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript Ajax

阅读更多
Ajax的核心对象为XMLHttpRequest对象,XMLHttpRequest负责前台与后台异步网络请求的交互。w3c对XMLHttpReqeust进行规范,但在各个浏览中新建XMLHttpRequest对象的方式仍然不同,使用时需要作浏览器兼容性的判断。作浏览器兼容性的判断。

JavaScript的XMLHttpRequest对象

var xmlHttpRequest;
// 创建XMLHttpRequest对象,在各个浏览器上,该对象的名称及创建方法不一样
function createXMLHttpRequest() {
    if (window.XMLHttpRequest) {
        // Firefox Chrome IE7+ 等浏览器支持 XMLHttpRequest 对象
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            // IE6等
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            // IE5等更老版本的浏览器
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
};
if( typeof window.HY == 'undefined') {
    HY = {};
}
HY.ajax = {
    callback : function() {
        if(xmlHttpRequest.readyState == 4) {
            if(xmlHttpRequest.status == 200) {
                var args = "";
                for(var i = 0; i < arguments.lenght; i++) {
                    args += arguments[i] + "\n";
                }
                alert(args);
            }
        }
    },
    // 发送Ajax请求
    submit : function() {
        if(xmlHttpRequest == null || typeof xmlHttpRequest == 'undefined') {
            xmlHttpRequest = createXMLHttpRequest();
        }
        xmlHttpRequest.open("GET", "getData", true);
        xmlHttpRequest.onreadystatechange = this.callback;
        xmlHttpRequest.send(null); 
    }
};

调用方式:
function submit() {
    HY.ajax.submit();
}

XMLHttpReqeust重要属性:
readyState
Http请求的状态,包含0-4共5个值,readyState的改变会触发onreadystatechange回调方法执行。
引用
0 init, XMLHttpRequest对象被创建或者XMLHttpRequest对象已被 abort() 方法重置
1 open,但是未send发送请求
2 send,向服务器发送请求,但未收到回应
3 receiving,响应请求头已经接收完成,响应开始接收,但未完成
4 loaded,响应体完成接收

responseText
XMLHttpRequest响应体接收完成,status状态为200后,responseText为响应体的文本(不包含响应头)

responseXML
XMLHttpRequest响应体接收完成,status状态为400后,若响应体的格式为XML,则responseXML返回的是XML相关的Dom对象,拥有对DOM操作的API

status
HTTP的状态码,200表示成功,404表示页面不存在,500表面服务器异常

statusText
HTTP状态描述文本:OK表示200,Not Found表示400,与status对应

XMLHttpRequest常用方法:open, onreadystatechange, send方法
open(method, url, async)
method 以GET或者以POST方式发送Ajax请求
url 请求链接。大部分情况下,浏览器要求url与当前页面必需是同一个域名,同端口号,才能发起Ajax请求。
async 是否以异步方式发起请求。若async为false,则send()方法响应完成后才能发起后续的send流程。

参考w3school中的open方法的说明
引用

这个方法初始化请求参数以供 send() 方法稍后使用。它把 readyState 设置为 1,删除之前指定的所有请求头部,以及之前接收的所有响应头部,并且把 responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。当 readyState 为 0 的时候(当 XMLHttpRequest 对象刚创建或者 abort() 方法调用后)以及当 readyState 为 4 时(已经接收响应时),调用这个方法是安全的。当针对任何其他状态调用的时候,open() 方法的行为是为指定的。
除了保存供 send() 方法使用的请求参数,以及重置 XMLHttpRequest 对象以便复用,open() 方法没有其他的行为。要特别注意,当这个方法调用的时候,实现通常不会打开一个到 Web 服务器的网络连接。


send(body)
body可以为一个字符串或者是Document对象,该参数可以为null。
send方法在readyState不等于1时(由open()方法设置),则抛出异常。否则,它发送一个HTTP请求,该请求由以下几部分组成:

引用
之前调用 open() 时指定的 HTTP 方法、URL 以及认证资格(如果有的话)。
之前调用 setRequestHeader() 时指定的请求头部(如果有的话)。
传递给这个方法的 body 参数。

send()发出请求后,将readyState设置为2。如果open()方法设置的async参数为false,这个方法会阻塞并不会返回,直接readyState为4并且服务器的响应被完全接收。如果async参数为true,或者这个参数被忽略,则send()立即返回。
引用
如果服务器响应带有一个 HTTP 重定向,send() 方法或后台线程自动遵从重定向。当所有的 HTTP 响应头部已经接收,send() 或后台线程把 readyState 设置为 3 并触发 onreadystatechange 事件句柄。如果响应较长,send() 或后台线程可能在状态 3 中触发 onreadystatechange 事件句柄:这可以作为一个下载进度指示器。最后,当响应完成,send() 或后台线程把 readyState 设置为 4,并最后一次触发事件句柄。


abort()
abort方法将XMLHttpRequest对奖的readyState置为0,清空所有请求行为,一般可用于超时处理。
setRequestHeader()
setRequestHeader() 方法指定了一个 HTTP 请求的头部,它应该包含在通过后续 send() 调用而发布的请求中。这个方法只有当 readyState 为 1 的时候才能调用,例如,在调用了 open() 之后,但在调用 send() 之前。
如果带有指定名称的头部已经被指定了,这个头部的新值就是:之前指定的值,加上逗号、空白以及这个调用指定的值。
如果 open() 调用指定了认证资格,XMLHttpRequest 自动发送一个适当的 Authorization 请求头部。但是,你可以使用 setRequestHeader() 来添加这个头部。类似地,如果 Web 服务器已经保存了和传递给 open() 的 URL 相关联的 cookie,适当的 Cookie 或 Cookie2 头部也自动地包含到请求中。可以通过调用 setRequestHeader() 来把这些 cookie 添加到头部。XMLHttpRequest 也可以为 User-Agent 头部提供一个默认值。如果它这么做,你为该头部指定的任何值都会添加到这个默认值后面。
有些请求头部由 XMLHttpRequest 自动设置而不是由这个方法设置,以符合 HTTP 协议。这包括如下和代理相关的头部:
Host
Connection
Keep-Alive
Accept-charset
Accept-Encoding
If-Modified-Since
If-None-Match
If-Range
Range
getAllResponseHeaders()
当readyState 小于 3时,此方法返回null,否则返回服务器发送的所有的HTTP响应的头部。头部作为单个字符串返回,一行一个头部。每行用换行符 "\r\n" 隔开
getResponseHeader(header_name)
返回指定的HTTP响应头部的值
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics