浅谈Ajax

1.使用CSS和XHTML来表示。

2.使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

4、XmlHttpRequest对象

XMLHttpRequest对象的属性：

• onreadystatechange 每次状态改变所触发事件的事件处理程序。
• 　 responseText 从服务器进程返回数据的字符串形式。
• 　 responseXML 从服务器进程返回的DOM兼容的文档数据对象。
• 　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
• 　　status Text 伴随状态码的字符串信息
• 　　readyState 对象状态值

　　　　0 (未初始化)对象已建立，但是尚未初始化（尚未调用open方法）

　　　　1 (初始化)对象已建立，尚未调用send方法

　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　　3 (数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误

　　　　4 (完成)数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

XMLHttpRequest对象的方法：

• abort 取消现行的HTTP请求
• getAllResponseHeaders 取回所有的HTTP头信息
• getResponseHeaders 从响应实体中取回一个HTTP头信息
• open() 打开HTTP请求
• send() 发送一个HTTP请求给服务器并接收一个响应
• setRequestHeaders 设置用户自定义的HTTP头的名称和值

5、操作HttpRequest对象

a、创建HttpRequest对象

//非IE浏览器创建XmlHttpRequest对象
    if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }

    //IE浏览器创建XmlHttpRequest对象
    if (window.ActiveXObject) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
            try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
            }
            catch (ex) { }
        }
    }

b、打开与发送HttpRequest对象

open(method,url,async,userid,pwd)

• method表示方法，两个取值为GET和POST
• url表示发送对象的物理地址或网络地址
• async表示操作是同步执行还是异步执行，true为同步执行，false为异步执行
• userid为用户名称
• pwd为用户密码

用send()方法来发送请求：xmlHttp.send()

c、请求XML文档

xmlHttp.open("GET","ch-9.xml","false");
xmlHttp.send();
xmlObj=xmlHttp.responseText;或者xmlObj=xmlHttp.responseXML;

d、向服务器发送XML

xmlHttp.open("POST","ch-9.ASP","false");
xmlHttp.send(DomObj);

6、HttpRequest请求检测

a、检测请求状态

使用readyState属性来判断服务器是否正确响应了该请求。

例如：

document.write("连接状态："+ xmlHttp.readyState +"<br/>");
xmlHttp.open("GET","false");
document.write("连接状态："+ xmlHttp.readyState +"<br/>");
xmlHttp.send();
document.write("连接状态："+ xmlHttp.readyState +"<br/>");

b、检测服务器状态

使用status和statusText分别表示服务器响应状态代码和状态说明文本

例如：

xmlHttp.open("POST","ch-11.ASP","false");
xmlHttp.send(DomObj);
document.write("服务器状态："+ xmlHttp.status + xmlHttp.statusText +"<br/>");
xmlDom=HttpObj.responseXML;

c、onReadyStateChange属性

指定一个当readyState属性变化时的事件处理程序。