【04】AJAX接收服务器返回的数据

AJAX接收服务器返回的数据

readyState 和 status 属性

readyState 属性保存有 XMLHttpRequest 对象的交互状态，从 0 到 4 变化：

• 0 ：未初始化（还没有调用send()方法）；
• 1：载入（已调用send()方法，正在发送请求）；
• 2：载入完成（send()方法执行完成，已经接收到全部响应数据）；
• 3：交互（正在解析响应数据）；
• 4：完成（响应数据解析完成，可以在客户端调用了）。

status 属性保存有 XMLHttpRequest 对象与后台交互时服务器返回的一个状态码。例如：

• 200：OK，请求发送成功；
• 404：未找到页面。

注意：readyState 和 status 的含义不同，readyState 是XMLHttpRequest 对象的交互状态，共有 5 个状态，与服务器无关；status 是服务器返回的一个状态码，表示服务器的响应结果，例如，200 表示服务器响应成功，404 表示请求的文件在服务器上不存在。

AJAX 请求成功，xmlhttp.readyState=4，xmlhttp.statue=200，代码：

1. if(xmlhttp.readyState==4&& xmlhttp.status==200){
2. // AJAX 请求成功，处理响应数据
3. }

 

 

事件句柄 onreadystatechange

onreadystatechange 是一个事件句柄，存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

当发送一个 AJAX 请求后，客户端无法确定请求何时完成，所以需要用事件机制来捕获请求的状态，即 readyState 的值，onreadyStateChange 实现了这一功能。

注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

如下代码所示：

1. xmlhttp.onreadystatechange=function(){
2. // 每次改变 readyState，都会调用该方法
3. if(xmlhttp.readyState==4&& xmlhttp.status==200){
4. // AJAX 请求成功，处理响应数据
5. }
6. }

 

接收响应数据

接收来自服务器的响应数据，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	将响应数据作为字符串解析。
responseXML	将响应数据作为 XML 解析。

例如，将服务器返回的数据更新到 id="demo" 的节点：

1. document.getElementById("demo").innerHTML=xmlhttp.responseText ;

 

注意：服务器返回的数据一般作为字符串来解析，很少作为 XML 来解析，这里不再讲述 responseXML 。

到此，我们终于可以实现一个完整的 AJAX 请求了。

下面的代码展示了如何获取客户端 IP 地址：

1. <script type="text/javascript">
2. var xmlhttp;
3. // 创建 XMLHttpRequest 对象
4. try{
5. // code for IE7+, Firefox, Chrome, Opera, Safari
6. xmlhttp=newXMLHttpRequest();
7. }catch(e){
8. // code for IE6, IE5
9. xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
10. }
11. xmlhttp.onreadystatechange=function(){
12. if(xmlhttp.readyState==4&& xmlhttp.status==200){// 响应成功
13. document.getElementById("demo").innerHTML=xmlhttp.responseText;
14. }
15. }
16. xmlhttp.open("POST","/demo/javascript/ajax/ajaxDemo.php?action=getIP",true);
17. xmlhttp.send();
18. </script>

 

注意：onreadystatechange 需要在请求发送之前设定，编写代码时，要写在 open() 和 send() 之前。

、