浅谈Ajax

 

1、关于AJAX的名字

   ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

 

2、AJAX工作原理   
   Ajax的原理就是:通过javascript的方式，将前台数据通过xmlhttp对象传递到后台，后台在接收到请求后，将需要的结果，再传回到前台，这样就可以实现不需要页面的回发，页是数据实现来回传递，从页实现无刷新。 
    Ajax的原理简单来说，实际上就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

    我们可以看出，XMLHttpRequest对象完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。

 

3、AJAX所包含的技术

    大家都知道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","ch-9.xml","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属性变化时的事件处理程序。