AJAX基础教程：向服务器发送请求

标签：

在上一篇中我们介绍了如何使用JavaScript创建XMLHttpRequest对象，在本文中将介绍使用XMLHttpRequest发送请求。

向服务器发送数据需要用到两个方法：open()和send()

open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。

参数介绍：

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

send(string)：将请求发送到服务器。

参数介绍：

• string：仅用于 POST 请求

在open方法中，我们需要指定请求的类型，常用的请求类型有GET、POST等，那么什么时候该用GET，什么时候该用POST呢？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

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

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。

setRequestHeader(header,value)：向请求添加 HTTP 头。

参数介绍：

• header: 规定头的名称
• value: 规定头的值

示例代码：

xmlhttp.open("POST", "ajax_test.asp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

同步还是异步？

AJAX指的是异步的AJAX和XML，但open方法却可以规定请求是同步或者异步，这为开发者提供了一个灵活的选项。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET", "ajax_test.asp", true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

异步请求的回调方法

使用同步的请求处理方法比较简单，我们可以直接在send方法之后来获取XMLHttpRequest 的Response：

xmlhttp.open("GET", "test1.txt", false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

但对于异步请求，直接在send方法后面获取Response是不可行的，因为此时服务器还没有返回数据。这个时候，我们就需要为XMLHttpRequest添加onreadystatechange事件，这个事件将监视XMLHttpRequest状态的变化，当检测到请求成功的时候我们即可获取Response数据。

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "test1.txt", true);
xmlhttp.send();

我们将在下一篇中详细介绍readyState和Status。

AJAX基础教程：向服务器发送请求

标签：

原文地址：http://www.cnblogs.com/Crow00/p/4610997.html