<摘>笔记：学习AJAX_01_创建一个简单的XMLHttpRequest

（原作者：Brett McLaughlin   摘自：http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/）

 

 

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

function createXMLHttpRequest(){ /* Create a new XMLHttpRequest object to talk to the Web server */ var xmlHttp = false; /*@cc_on @*/ /*@if (@_jscript_version &gt;= 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(); } if(!request) alert("Error initializing XMLHttpRequest!"); }

1. 创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件，它表示还没有创建 XMLHttpRequest 对象。
2. 增加 try/catch 块：
   1. 尝试创建 XMLHttpRequest 对象。
   2. 如果失败（catch (failed)）则保证 request 的值仍然为 false。
3. 检查 request 是否仍为 false（如果一切正常就不会是 false）。
4. 如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题 创建XMLHttpRequest对象最好不要封装在方法里等待调用, 而更好的处理方法是用静态代码(即不在方法体中, 在浏览器打开的时候就能开始执行)写, 以便给用户更好的体验.

 

 

2.发出一个AJAX请求

 

 

 

 

 

function callServer() { // 从网页表单里获取"city"和"state"的值 var city = document.getElementById("city").value; var state = document.getElementById("state").value; // 两个值都不为空时才继续下去 if ((city == null) || (city == "")) return; if ((state == null) || (state == "")) return; // 创建要提交的"url" var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state); // 打开对服务器的连接 xmlHttp.open("GET", url, true); // 当服务器有状态返回时去执行"updatePage"方法 xmlHttp.onreadystatechange = updatePage; // 发送一个空的请求(本例的请求已包含在"url"中) xmlHttp.send(null); }

 

3.处理服务器响应

function updatePage() { if (xmlHttp.readyState == 4) { if(xmlHttp.status == 200){ var response = xmlHttp.responseText; document.getElementById("zipCode").value = response; } } }

 

4.启动一个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" onBlur="callServer();" /> </p> <p> Zip Code: <input type="text" name="zipCode" id="city" size="5" /> </p> </form>