Dec 8

ajax入门之 完全了解AJAX 晴

, 07/12/08 18:43 , 技术开发 , 评论(0) , 引用(0) , 阅读(4121) , Via 网络 | |

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

点提交按钮前,我们还应该注意,对象状态警告出现多次,最终显示的对象状态值是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。
内文分页: [1] [2]

出处:网络
转载时必须以链接形式注明出处及本声明!

Tags: ,
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]