跟“无为”学习Ajax技术第三天

第三天：使用 JavaScript 和 Ajax 发出异步请求
传统模式分析：多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象，就可以使用不必让用户等待服务器响应的请求/响应模型了。
XMLHttpRequest对象实际上是一个跨越所有Ajax应用程序的公共线程。掌握的程度决定您运用Ajax的力度。下面详细说说XMLHttpRequest。
XMLHttpRequest的属性方法：
open();建立服务器的新请求 Send();向服务器发送请求 abort();退出当前请求 ReadyState:提供当前Html的就绪状态 ResponseText：
服务器返回的请求响应文本。
首先需要创建一个变量然后赋值一个XMLHttpRequest对象实例。用new关键字。代码如下：
<script language="javascripe" type="text/javascript">
var request=false;
try{ //用try...catch...结构能够提供错误处理能力，是一种较好的编程方式。
request = new XMLHttpRequest();
}catch(failed){
request=false;
}
if(!request)
alert("Error initializing XMLHttpRequest!");
</script>
注意:JavaScript不需要指定变量类型，呵呵。虽然代码简单，但是还是详细解释下，尤其是对新手，似乎有点辞不达意。
一定要理解这些步骤：
（1）创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件，它表示还没有创建 XMLHttpRequest 对象。
（2）增加 try/catch 块：尝试创建 XMLHttpRequest 对象。如果失败（catch (failed)）则保证 request 的值仍然为 false。
（3）检查 request 是否仍为 false（如果一切正常就不会是 false）。
（4）如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。
问题是：微软浏览器的不停更新对XMLHttpRequest支持程度也不一样，所以要增加对微软浏览器的支持才行，毕竟别人占很大一部分市场。
代码如下：
<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>
注释参照上面，只是增加了catch (trymicrosoft)语句。
从上面例子可以看出：这些代码都是嵌套在script中，有人称之为"静态JavaScript"我的理解是：就是说代码是在页面显示给用户之前的某个时候运行。
当然如果对面向对象的方式比较了解，或者说考虑到程序的可重用性，我们可以将XMLHttpRequest创建的代码移植到一个方法中。代码如下：
<script language="javascript" type="text/javascript">
var request;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
}
</script>
还需要使用 XMLHttpRequest 的创建方法：
<script language="javascript" type="text/javascript">
var request;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
}
function getCustomerInfo() {
createRequest();
// Do something with the request variable
}
</script>
静态方法跟动态方法只是推迟了错误处理程序，个人建议采用静态方法。至于原因，先"迈个冠子"以后你会发现的^_^ .