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>