AJAX(第二部分:使用JavaScript和Ajax发出异步请求)

前端之家收集整理的这篇文章主要介绍了AJAX(第二部分:使用JavaScript和Ajax发出异步请求)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文中,您将开始接触最基本和基础性的有关Ajax的全部对象和编程方法:XMLHttpRequest对象。该对象实际上仅仅是一个跨越所有Ajax应用程序的公共线程,您可能已经预料到,只有彻底理解该对象才能充分发挥编程的潜力。事实上,有时您会发现,要正确地使用XMLHttpRequest,显然不能使用XMLHttpRequest。这到底是怎么回事呢?

Web1.0,实际上它指的就是具有完全不同的请求和响应模型的传统Web。

Web2.0,(在很大程序上)消除了这种看得见的往复交互。


XMLHttpRequest的方法属性

open():建立到服务器的新请求。

send():向服务器发送请求。

abort():退出当前请求。

readyState:提供当前HTML的就绪状态。

responseText:服务器返回的请求响应文本。


简单的 new
首先需要创建一个新变量并赋给它一个XMLHttpRequest 对象实例。这在 JavaScript 中很简单,只要对该对象名使用new 关键字即可

<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>

<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (Failed) {
request = false;
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>
1、创建一个新变量request并赋值false。后面将使用false作为判定条件,它表示还没有创建XMLHttpRequest对象。

2、增加try/catch快:尝试创建XMLHttpRequest对象。如果失败(catch(Failed))则保证request的值仍然为false。

3、检查request是否仍然为false(如果一切正常就不会是false)。

4、如果出现问题(request是false)则使用JavaScript警告通知用户出现了问题。

<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>

不放到方法函数体中的JavaScript代码称为静态JavaScript。就是说代码是在页面显示用户之前的某个时候运行。


用XMLHttpRequest发送请求

得到请求对象之后就可以进入请求/响应循环了。记住,XMLHttpRequest惟一的目的是让您发送请求和接收响应。其他一切都是JavaScript、CSS或页面中其他代码的工作:改变用户界面、切换图像、解释服务器返回的数据。准备好XMLHttpRequest之后,就可以向服务器发送请求了。

escape()方法,它用于转义不能用明文正确发送的任何字符。


打开请求

有了要连接的URL后就可以配置请求了。可以用XMLHttpRequest对象的open()方法来完成。该方法有五个参数:

request-type:发送请求的类型。典型的值是GET或POST,但也可以发送HEAD请求。

url:要连接的URL。

asynch:如果希望使用异步连接则为true,否则为false。该参数是可选的,默认为true。

username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。

password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。


异步请求不等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在Web表单中输入数据,甚至离开表单。没有旋转的皮球或者沙漏,应用程序也没有明显的冻结。服务器悄悄地响应请求,完成后告诉原来的请求者工作已经结束。结果是,应用程序感觉不那么迟钝或者缓慢,而是响应迅速、交互性强,感觉快多了。


发送请求 send()


指定回调方法

onreadystatechange属性,该属性允许指定一个回调函数。回调允许服务器反向调用Web页面中的代码

异步原因:用户在一层上操作表单,而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法


处理服务器响应


回调和Ajax

现在我们已经看到如何告诉服务器完成后应该做什么:将XMLHttpRequest对象的onreadystatechange属性设置为要运行的函数名。这样,当服务器处理完请求后就会自动调用函数。也不需要担心该函数的任何参数。


HTTP就绪状态

服务器在完成请求之后会在XMLHttpRequest的onreadystatechange属性中查找要调用方法。这是真的,但还不完整。事实上,每当HTTP就绪状态改变时它都会调用方法

HTTP就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax应用程序中需要了解五种就绪状态:

0:请求没有发出(在调用open()之前)。

1:请求已经建立但还没有发出(调用send()之前)

2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。

3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。

4:响应已完成,可以访问服务器响应并使用它。

对于Ajax编程,需要直接处理的唯一状态就是就绪状态4,它表示服务器响应已经完成,可以完全地使用响应数据了。


HTTP状态码

除了就绪状态外,还需要检查HTTP状态。我们期望的状态码是200,它表示一切顺利。如果就绪状态是4而且状态码是200,就可以处理服务器的数据了,而且这些数据应该就是要求的数据(而不是错误或者其他有问题的信息)。


读取响应文本

现在可以确保请求已经处理完成(通过就绪状态),服务器给出了正常的响应(通过状态码),最后我们可以处理服务器返回的数据了。返回的数据保存在XMLHttpRequest对象的responseText属性中。


XMLHttpRequest的属性responseXML,如果服务器选择使用XML响应则该属性包含XML响应。处理XML响应和处理普通文本有很大不同,涉及到解析、文档对象模型(DOM)和其他一些问题。

原文链接:https://www.f2er.com/ajax/166445.html

猜你在找的Ajax相关文章