<![CDATA[Everyday NetLog]]> https://blog.zhoz.com/index.php zh-cn https://blog.zhoz.com/read.php? <![CDATA[ajax入门之 完全了解AJAX]]> <> Sat, 08 Dec 2007 10:43:29 +0000 https://blog.zhoz.com/read.php?
当请求被发送到浏览器后，其所具有的改变网页内容的功能已经存在许多年了-使用javascript脚本改变iframe's src属性是技术之一。

XMLHttpRequest对象

XMLHttpRequest对象使AJAX的出现成为可能，它产生异步请求，并决定如何处理结果。在大多数浏览器中，我们使用如下代码来创建对象：
var xmlhttp = false;

try {

xmlhttp = new XMLHttpRequest();

} catch (e) {

alert("cannot create object");

}


不幸的是，上文中所提到的“大多数浏览器”并不包括IE,因此对于微软的浏览器，我们需要采用一种特殊的方法创建对象。值得注意的是，根据MSXML解析器的不同版本，需要分别编写两种代码。
var xmlhttp = false;

try {

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

} catch (othermicrosoft) {

try {

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

} catch (failed) {

xmlhttp = false;

}


因此，结合上述两个代码片段，我们得到了以下适合所有主流浏览器创建XMLHttpRequest对象的代码：
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;

}

}

}

创建时间选择

既然我们已经知道如何创建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>

在被请求的文件中，我们可以填补任何我们想要的内容，只要可以建立，我们就不打算使用其中的内容。

点提交按钮前，我们还应该注意，对象状态警告出现多次，最终显示的对象状态值是4。不同的浏览器对此的处理方法不同，Safari精确地从0-4计数，对于firefox，1出现两次，0只在运行的第一次出现。值得庆幸的是，我们仅仅对readyState是4的情况感兴趣，但是为了完整性，我们还是看看其他数字所代表的含义。

0：未初始化-打开命令之前，对象不包含数据

1：对象正在加载数据-发送请求命令之前

2：加载完毕-请求已经被发出

3：交互-请求正在被处理，可能会得到一些数据，但不完全，所以不能安全使用

4：完成-请求已完成，最终数据可以安全使用。

这些新信息说明，只有在警告显示请求完成后，才能改变myReturnMethod。

function myReturnMethod() {

if (xmlhttp.readyState==4){

alert("NewReadyState is:"+xmlhttp.readyState);

}

}

响应状况

采用先前的代码，我们改变open method中的url参数到一个不存在的文件中：
xmlhttp.open("GET", "filethatdoesnotexist.html", true);
再次运行该代码，我们看到和先前的代码执行了相同的结果-为什么会这样？
如果这是一个正常http请求，我们预计404错误会出现-在AJAX中也具有相同的状况属性。该属性仅可读，包含HTTP请求状况代码，我们这里的文件对应的代码是404。应用于一般http请求的相同状况代码仍适用AJAX。（注意：为了正常运行，页面应该读取来自一个HTTP服务器的请求，如果从文件系统中读取，该状况代码将始终是未定义的。）

因此，我们需要增加一个if陈述，用来测试请求是否成功，如果是一个200的响应代码，将被成功返回。如果不成功，我们必须选择恰当的方式来解决错误。

function myReturnMethod() {

if (xmlhttp.readyState==4){

if (xmlhttp.status == 200) {

alert("Request successfully completed");

}

else if(xmlhttp.status == 404) {

alert("Requested file not found");

}

else {

alert("Error has occurred with status code:

"+xmlhttp.status);

}

}

}

ResponseText与responseXML

尽管我们已经可以成功地完成一个AJAX请求，但还需要对返回的数据做出处理。通过应用responseText 或responseXML属性，我们有两种处理的方式。最简单的方法是直接获取从服务器返回的数据，使用responseText属性中返回的纯文本数据。这样得到的数据可以是任何我们想要的形式；简单的文本响应，符号划界值或一整本字符串名册。在我们的返回方法中，我们将在警告中输出responseText，这将输出我们请求的整个文件内容。

在这个阶段，如果你还没有向我们发出请求的文件- another_file.html中输入任何内容，你应该做了。

function myReturnMethod() {

if (xmlhttp.readyState==4){

if (xmlhttp.status == 200) {

alert(xmlhttp.responseText);

}

else if(xmlhttp.status == 404) {

alert("Requested file not found");

}

else {

alert("Error has occurred with status code:

"+xmlhttp.status);

}

}

}
另一个可供选择的找回返回数据的方法是使用responseXML属性，其将以XML文档对象的形式返回数据，利用Javascript的DOM功能可以对其研究。为了看到这一动作的结果，我们需要返回一个恰当的XML格式文档；我们就创建一个新文件来请求(xmlresult.html), 并写入以下代码：

<?xml version="1.0" encoding="UTF-8"?>

<root>

XML Formatted Result

</root>

然后我们需要将打开命令改为：

xmlhttp.open("GET", "xmlresult.html", true);

在我们的返回方法中所作的最大改变是，我们需要在那里替换警告(xmlhttp.responseText)，代码如下：

xmldoc = xmlhttp.responseXML;

rootnode = xmldoc.getElementsByTagName('root').item(0);

alert(rootnode.firstChild.data);

瞧，我们正在利用DOM来返回数据。

通过结合我们所了解到的现有的javascript功能，该数据可被用于应付一个页面的内容。例如：

document.getElementById('resultdiv').innerHTML = xmlhttp.responseText;

何时使用AJAX

既然已经知道如何创建一个请求以及返回结果，那么还有一个问题是何时该使用AJAX呢？

对于一项新技术自然会有两方面的极端意见，一些网络开发者认为，如果没有AJAX，生活将变得更简单；另一些人则巴不得见到由AJAX构建的整个网站。通常这种情况下，真理往往介于这两种观点之间。当决定在你的网站上使用AJAX时，你也应当考虑其中带来的后果。首先，所有应用了AJAX的页面无法加入书签。随着AJAX的使用，也为你的网站引入了一种“状态”，而除了初始页面外，用户无法返回到任何其他页面。

原因是在用户的浏览器上url没有改变-如果其发生改变，AJAX就没有存在的必要了。

其次，如果想要支持每一位访问网站的用户，就需要付出双倍的工作。对于你创建使用AJAX网站的每个片段，你都必须迎合没有javascript功能用户的需要。如果为了javascript和非javascript用户具有相同的页面级别，需要做大量额外的工作，必须使用noscript标签。也就是说，AJAX通过减少浏览和交互时所需要的页面重载次数，从而提高了网站的可用性。结合javascript效果库，我们可以创建一些非常引人注目的页面交互功能，这在两年前是不可能实现的。因此，我的观点是在你的网站的非主要位置使用AJAX。例如，在某个网站，如果将AJAX结构应用到文章中将是极其错误的想法，因为你再也无法将未读完的文章加入书签。另一方面，一种文章评论或对话系统则非常适合应用AJAX。
Tags - , ]]> https://blog.zhoz.com/read.php?#blogcomment <![CDATA[[评论] ajax入门之 完全了解AJAX]]> <user@domain.com> Mon, 28 Sep 2026 00:20:37 +0000 https://blog.zhoz.com/read.php?#blogcomment