ajax

Ajax应用程序所用的基本技术：

HTML用于建立Web表单并确定应用程序其他部分使用的字段。

JavaScript代码是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。

DHTML或DynamicHTML，用于动态更新表单。我们将使用div、span或其他动态HTML元素来标记HTML。

文档对象模型DOM用于处理HTML结构和服务器返回的XML。

创建新的XMLHttpRequest对象，它负责处理所有服务器通信的对象。

<scriptlanguage="javascript"type="text/javascript'>

varxmlHttp=newXMLHttpRequest();

</script>

Ajax基本上就是把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据发送给一些JavaScript代码而不是直接发送给服务器。相反，JavaScript代码捕获表单数据并向服务器发送请求。请求是异步发送的,不用等待服务器的响应。然后服务器将数据返回JavaScript代码，后者决定如何处理这些数据。

得到XMLHttpRequest的句柄后，其他的JavaScript代码就非常简单了。事实上，我们将使用JavaScript代码完成非常基本的任务：

获取表单数据：JavaScript代码很容易从HTML表单中抽取数据并发送到服务器。

修改表单上的数据：更新表单很简单，从设置字段值到迅速替换图像。

解析HTML和XML：使用JavaScript代码操纵DOM，处理HTML表单服务器返回的XML数据的结构。

在Mirosoft浏览器上创建XMLHttpRequest对象

varxmlHttp=false;

try{

xmlHttp=newActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

xmlHtt=newActiveXObject("Microsoft.XMLHTTP");

}catch(e2){

xmlHttp=false;

}

}

处理Mozilla和Microsoft浏览器

varxmlHttp=newXMLHttpRequest();

支持多种浏览器的方式创建XMLHttpRequest对象

/*CreateanewXMLHttpRequestobjecttotalktotheWEBserver*/

varxmlHttp=false;

/*@cc_on@*/

/@if(@_jscript_version>=5)

try{

xmlHttp=newActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

}catch(e2){

xmlHttp=false;

}

}

@end@*/

if(!xmlHttp&&typeofXMLHttpRequest!='undefined'){

xmlHttp=newXMLHttpRequest();

}

发送请求：

1.从Web表单中获取所需要的数据

2.建立要连接的URL

3.打开到服务器的连接

4.设置服务器在完成后要运行的函数

5.发送请求

functioncallServer(){

varcity=document.getElementById("city").value;

varstate=document.getElementById("state").value;

if(city==null||city=="")returnnull;

if(state==null||state=="")returnnull;

varurl="/scripts/getZipCode.php?city="+escape(city)+"&state="+escape(state);

//Openaconnectiontotheserver

xmlHttp.open("GET",url.true);

//Setupafunctionfortheservertorunwhenit'sdone

xmlHttp.onreadystatechange=updatePage;

//Sendtherequest

xmlHttp.send(null);

}

处理响应：

什么也不要做，直到xmlHttp.readyState属性的值等于4

服务器将把响应填充到xmlHttp.responseText属性中

functionupdatePage(){

if(xmlHttp.readyState==4){

varresponse=xmlHttp.responseText;

document.getElementById("zipCode").value=response;

}

}

XMLHttpRequest简介

open()：建立到服务器的新情求

send()：向服务器发送请求

abort()：推出当前请求

readyState：提供当前HTML的就绪状态

reponseText：服务器返回的请求响应文本