AJAX（二）ResponseText、onreadystatechange 事件、readyState、status、ASP和PHP、数据库实例、XML实例

AJAX（二）ResponseText、onreadystatechange 事件、readyState、status、ASP和PHP、数据库实例、XML实例

总结：

• 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
• 当 readyState 等于 4 且状态为 200 时，表示响应已就绪

回忆：

• 浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。

• 1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。2005年2月，==AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。==W3C 也在2006年发布了它的国际标准。

• 具体来说，AJAX 包括以下几个步骤。

  1. 创建 XMLHttpRequest 实例
  2. 发出 HTTP 请求
  3. 接收服务器传回的数据
  4. 更新网页数据

• 概括起来，就是一句话，AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。现在，服务器返回的都是 JSON 格式的数据，XML 格式已经过时了，但是 AJAX 这个名字已经成了一个通用名词，字面含义已经消失了。

• XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

• 详细流程

  • XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

    var xhr = new XMLHttpRequest();
    

    一旦新建实例，就可以使用open()方法指定建立 HTTP 连接的一些细节。

    xhr.open('GET', 'http://www.example.com/page.php', true);
    

    上面代码指定使用 GET 方法，跟指定的服务器网址建立连接。第三个参数true，表示请求是异步的。

  • 然后，指定回调函数，监听通信状态（readyState属性）的变化。

  • xhr.onreadystatechange = handleStateChange;
    
    function handleStateChange() {
            
      // ...
    }
    

    上面代码中，一旦XMLHttpRequest实例的状态发生变化，就会调用监听函数handleStateChange

  • 最后使用send()方法，实际发出请求。

    xhr.send(null);
    

    上面代码中，send()的参数为null，表示发送请求的时候，不带有数据体。如果发送的是 POST 请求，这里就需要指定数据体。

  • 一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

1. 服务器响应（responseText）

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
   
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

2. onreadystatechange 事件（readyState、status）

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性：

• onreadystatechange

  • 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

• readyState

  • 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    • 0: 请求未初始化
    • 1: 服务器连接已建立
    • 2: 请求已接收
    • 3: 请求处理中
    • 4: 请求已完成，且响应已就绪

• status

  • 200, OK，访问正常
  • 301, Moved Permanently，永久移动
  • 302, Moved temporarily，暂时移动
  • 304, Not Modified，未修改
  • 307, Temporary Redirect，暂时重定向
  • 401, Unauthorized，未授权
  • 403, Forbidden，禁止访问
  • 404, Not Found，未发现指定网址
  • 500, Internal Server Error，服务器发生错误

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：