Ajax_0

Posted on | In | Visitors:

AJAX = 异步 Javascript + XML

XMLHttpRequest 是 AJAX 的基础。

创建 XMLHttpRequest 对象

语法：

1
variable = new XMLHttpRequest();

eg：

1
xmlhttp = new XMLHttpRequest();

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

open()方法

语法：

1
open(method, url, async)
  • method：请求的类型，GET 或 POST
  • url：文件在服务器上的位置；
  • async：true（异步）或 false（同步

eg：

1
xmlhttp.open("GET", "test1.txt", true);

send()方法

语法：

1
send(string)
  • string：仅用于 POST 请求

eg：

1
xmlhttp.send();

GET 还是 POST ？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况，使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

服务器响应

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

responseText 属性

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

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

responseXML 属性

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

1
2
3
4
5
6
7
8
// 请求 books.xml 文件，并解析响应
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementByTagName("ARTIST");
for (i=0; i<x.length; i++) {
  txt = txt + x[i].childNodes[0].nodeValue + "<br />"
}
document.getElementById("myDiv").innerHTML = txt;

onreadystatechange 事件

三个属性

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

  • onreadystatechange：

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

  • readyState：

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

  • status：

    • 200: “OK”；
    • 404: 未找到页面。

onreadystatechange

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

1
2
3
4
5
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}

使用 callback 函数

如果网站上存在多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

1
2
3
4
5
6
7
function myFunction() {
  loadXMLDoc("ajax_info.txt",function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}