简单的Ajax 技术

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成

分使用的字段。 

JavaScript 代码是运行 Ajax 应用程序的核心代码，  DHTML 或 Dynamic HTML，用于动态更新表单。 我们将使用 div、span 和其他动态 HTML 元素来标 记 HTML。

文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器 返回的 XML。

XMLHttpRequest  对象

1.创建新的 XMLHttpRequest 对象

<script language="javascript" type="text/javascript">  var xmlHttp = new XMLHttpRequest();  </script>

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

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

解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM（请参阅   下一节  ），处理 HTML  表 单服务器返回的 XML 数据的结构。

2. 用 JavaScript 代码捕获和设置字段值

var phone = document.getElementById("phone").value;

document.getElementById("order").value  = response[0];  

document.getElementById("address").value  = response[1];

3. 在 Microsoft 浏览器上创建 XMLHttpRequest 对象  

var xmlHttp = false;  

try { 

     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  

} catch (e) {  

try { 

     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  

} catch (e2) { 

    xmlHttp = false;  

}  

}

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

var xmlHttp = false;  

/*@cc_on @*/ 

 /*@if (@_jscript_version >= 5)  

try { 

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  } catch (e) {  try { 

 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  

} catch (e2) {  

xmlHttp = false;  }  } 

 @end @*/ 

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {  

xmlHttp = new XMLHttpRequest();  

}

---

Ajax  的请求/响应

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

2.  建立要连接的 URL。 

3.  打开到服务器的连接。 

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

5.  发送请求。

function callserver（）{

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

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

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

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

    

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

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

    xmlHttp.onreadystatechange = updatePage;

    xmlHttp.send(null);

}

6.处理服务器响应:

function updatePage() { 

 if (xmlHttp.readyState == 4) { 

var response = xmlHttp.responseText; 

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

}

7. 启动一个 Ajax 过程(表单) 

<form>  

<p>City: <input type="text" name="city" id="city" size="25" onChange="callServer();" /></p> 

<p>State: <input type="text" name="state" id="state" size="25" onChange="callServer();" /></p> 

 <p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>  

</form>