JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

AJAX接收服务器返回的数据

在讲解如何接收服务器数据之前,先来看一下 XMLHttpRequest 对象的 readyState 和 status 属性。

readyState 和 status 属性

readyState 属性保存有 XMLHttpRequest 对象的交互状态,从 0 到 4 变化:
  • 0 :未初始化(还没有调用send()方法);
  • 1:载入(已调用send()方法,正在发送请求);
  • 2:载入完成(send()方法执行完成,已经接收到全部响应数据);
  • 3:交互(正在解析响应数据);
  • 4:完成(响应数据解析完成,可以在客户端调用了)。 

status 属性保存有 XMLHttpRequest 对象与后台交互时服务器返回的一个状态码。例如:
  • 200:OK,请求发送成功;
  • 404:未找到页面。

查看完整的 status 状态码:Ajax status 状态对照表

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

AJAX 请求成功,xmlhttp.readyState=4,xmlhttp.statue=200,代码:
if (xmlhttp.readyState==4 && xmlhttp.status==200){
     // AJAX 请求成功,处理响应数据
}

事件句柄 onreadystatechange

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

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

如下代码所示:
xmlhttp.onreadystatechange=function(){
    // 每次改变 readyState,都会调用该方法
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
         // AJAX 请求成功,处理响应数据
    }
}

接收响应数据

接收来自服务器的响应数据,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述
responseText 将响应数据作为字符串解析。
responseXML 将响应数据作为 XML 解析。

例如,将服务器返回的数据更新到 id="demo" 的节点:
document.getElementById("demo").innerHTML=xmlhttp.responseText ;

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

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

下面的代码展示了如何获取客户端 IP 地址:
<script type="text/javascript">
var xmlhttp;
// 创建 XMLHttpRequest 对象
try{
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}catch(e){
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){  // 响应成功
        document.getElementById("demo").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("POST","/demo/javascript/ajax/ajaxDemo.php?action=getIP",true);
xmlhttp.send();
</script>

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

实例演示:

点击这里获取你的IP