Ctrl+Enter直接
XMLHTTP对象参考－
Dec
8
尽管AJAX是个相对新生的术语，但其背后的技术却并不新颖。随着XMLHttpRequest对象在大多数浏览器中的实现，以及GMail和Google Maps的出现激发了软件开发者重新考虑如何构建网页的灵感。我们从基础开始认识AJAX，一种颠覆性的技术，其改变了Web应用程序的开发和应用方式，使得交互性页面和网站处于目前网络潮流的最前沿。
当请求被发送到浏览器后，其所具有的改变网页内容的功能已经存在许多年了-使用javascript脚本改变iframe's src属性是技术之一。
XMLHttpRequest对象
XMLHttpRequest对象使AJAX的出现成为可能，它产生异步请求，并决定如何处理结果。在大多数浏览器中，我们使用如下代码来创建对象：
Array
不幸的是，上文中所提到的“大多数浏览器”并不包括IE,因此对于微软的浏览器，我们需要采用一种特殊的方法创建对象。值得注意的是，根据MSXML解析器的不同版本，需要分别编写两种代码。
Array
因此，结合上述两个代码片段，我们得到了以下适合所有主流浏览器创建XMLHttpRequest对象的代码：
Array
创建时间选择
既然我们已经知道如何创建XMLHttpRequest，那么还需要考虑何时来创建。在XMLHttpRequest对象创建的示例中，尽管我们事先没有发送任何请求，但仍可以创建成功，也就是说，我们可以在需要的时候创建对象。
当你需要创建XMLHttpRequest对象时，面对的一个问题是没有信息显示客户能否创建该对象。假设一个用户访问你的网站并且无法创建XMLHttpRequest对象，如果能从第一时间就知道AJAX没有被选择，你就可以更早地提供给他们。
对于一个开始与你的Web应用程序进行互动的用户，当他们被告知只有点击提交按钮才能使用该程序时，这决不是一件好事，让他们填写表单也是完全在浪费时间。
然而如果在页面打开阶段就能试图创建XMLHttpRequest，在用户开始互动之前就提供选择，比如转入非AJAX页面。
设置请求
眼下，有一个页面在加载后就需要创建XMLHttpRequest对象，我们现在有意做出请求。
为此，我们必须向打开方式传递至少两个参数，其中大部分参数的含义都可以直接理解。
xmlhttp.open(Method, Url [, Async] [, User] [, Password])
参数Method定义了请求方法；可选择的有"POST", "GET" 或 "HEAD"。首先，我们只准备使用GET。
Url是要请求页面的url字符串。我们无法访问和向旧页面做出请求，有一个阻止我们访问与所创建请求页面不在同一范围内的其他页面的壁垒。
Async也是AJAX建立的基础。尽管前者在API中是一个备选参数，但在这里该参数是强制性选项，必须设置为true，如果设为false，该项将保持直到获得响应。该参数的默认值是True，所以你可以选择不设置，但是考虑到可读性以及可维护性，强烈推荐设置该值。
用户名和密码用于验证身份时选择
一旦我们设置Async为true,我们需要定义一种命令方式，用于回应请求状态改变-可以通过设置XMLHttpRequest对象中的onreadystatechange属性完成。
xmlhttp.onreadystatechange = myReturnMethod;
xmlhttp.send(null);
最后需要做的是把请求发送出去，先说最简单的，我们只发送不含任何附加数据的请求：
在一个简单的示例中综合了上述所有内容：
xmlhttp.open("GET", "/some_dir/myfile.html", true);
xmlhttp.onreadystatechange = myReturnMethod;
xmlhttp.send(null);
上述三行代码就是我们进入AJAX世界所需要的全部内容，没有包含任何复杂的概念或曲折的逻辑。
对象状态
上文中提到过，我们需要定义一种命令方式，用于回应请求状态改变，这可以通过设置onreadystatechange属性完成，请注意我所说的是“状态改变”，并不是“完成”-因为这两者之间是完全不同的。结合我们刚才所学的知识，最好通过例子来说明。写入如下代码：
<script>
var xmlhttp = false;
try {
xmlhttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlhttp = false;
}
}
}
function goAJAX() {
alert("InitialReadyState is:"+xmlhttp.readyState);
xmlhttp.onreadystatechange = myReturnMethod;
xmlhttp.open("GET", "another_file.html", true);
xmlhttp.send(null);
}
function myReturnMethod() {
alert("NewReadyState is:"+xmlhttp.readyState);
}
</script>
<button onclick="javascript:goAJAX()">Let's try it!</button>
内文分页： [1] [2]
当请求被发送到浏览器后，其所具有的改变网页内容的功能已经存在许多年了-使用javascript脚本改变iframe's src属性是技术之一。
XMLHttpRequest对象
XMLHttpRequest对象使AJAX的出现成为可能，它产生异步请求，并决定如何处理结果。在大多数浏览器中，我们使用如下代码来创建对象：
Array
不幸的是，上文中所提到的“大多数浏览器”并不包括IE,因此对于微软的浏览器，我们需要采用一种特殊的方法创建对象。值得注意的是，根据MSXML解析器的不同版本，需要分别编写两种代码。
Array
因此，结合上述两个代码片段，我们得到了以下适合所有主流浏览器创建XMLHttpRequest对象的代码：
Array
创建时间选择
既然我们已经知道如何创建XMLHttpRequest，那么还需要考虑何时来创建。在XMLHttpRequest对象创建的示例中，尽管我们事先没有发送任何请求，但仍可以创建成功，也就是说，我们可以在需要的时候创建对象。
当你需要创建XMLHttpRequest对象时，面对的一个问题是没有信息显示客户能否创建该对象。假设一个用户访问你的网站并且无法创建XMLHttpRequest对象，如果能从第一时间就知道AJAX没有被选择，你就可以更早地提供给他们。
对于一个开始与你的Web应用程序进行互动的用户，当他们被告知只有点击提交按钮才能使用该程序时，这决不是一件好事，让他们填写表单也是完全在浪费时间。
然而如果在页面打开阶段就能试图创建XMLHttpRequest，在用户开始互动之前就提供选择，比如转入非AJAX页面。
设置请求
眼下，有一个页面在加载后就需要创建XMLHttpRequest对象，我们现在有意做出请求。
为此，我们必须向打开方式传递至少两个参数，其中大部分参数的含义都可以直接理解。
xmlhttp.open(Method, Url [, Async] [, User] [, Password])
参数Method定义了请求方法；可选择的有"POST", "GET" 或 "HEAD"。首先，我们只准备使用GET。
Url是要请求页面的url字符串。我们无法访问和向旧页面做出请求，有一个阻止我们访问与所创建请求页面不在同一范围内的其他页面的壁垒。
Async也是AJAX建立的基础。尽管前者在API中是一个备选参数，但在这里该参数是强制性选项，必须设置为true，如果设为false，该项将保持直到获得响应。该参数的默认值是True，所以你可以选择不设置，但是考虑到可读性以及可维护性，强烈推荐设置该值。
用户名和密码用于验证身份时选择
一旦我们设置Async为true,我们需要定义一种命令方式，用于回应请求状态改变-可以通过设置XMLHttpRequest对象中的onreadystatechange属性完成。
xmlhttp.onreadystatechange = myReturnMethod;
xmlhttp.send(null);
最后需要做的是把请求发送出去，先说最简单的，我们只发送不含任何附加数据的请求：
在一个简单的示例中综合了上述所有内容：
xmlhttp.open("GET", "/some_dir/myfile.html", true);
xmlhttp.onreadystatechange = myReturnMethod;
xmlhttp.send(null);
上述三行代码就是我们进入AJAX世界所需要的全部内容，没有包含任何复杂的概念或曲折的逻辑。
对象状态
上文中提到过，我们需要定义一种命令方式，用于回应请求状态改变，这可以通过设置onreadystatechange属性完成，请注意我所说的是“状态改变”，并不是“完成”-因为这两者之间是完全不同的。结合我们刚才所学的知识，最好通过例子来说明。写入如下代码：
<script>
var xmlhttp = false;
try {
xmlhttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlhttp = false;
}
}
}
function goAJAX() {
alert("InitialReadyState is:"+xmlhttp.readyState);
xmlhttp.onreadystatechange = myReturnMethod;
xmlhttp.open("GET", "another_file.html", true);
xmlhttp.send(null);
}
function myReturnMethod() {
alert("NewReadyState is:"+xmlhttp.readyState);
}
</script>
<button onclick="javascript:goAJAX()">Let's try it!</button>
内文分页： [1] [2]
出处：网络
转载时必须以链接形式注明出处及本声明！
