JavaScript ajax http send



XMLHttpRequest 对象用于与服务器交换数据。


向服务器发送请求

发送请求到服务器,我们使用XMLHttpRequest对象的open()和send()方法:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
方法 描述
open(method, url, async) 指定请求的类型

method: 请求类型: GET 或者 POST
url: 服务器(文件)位置
async: true (异步) 或者 false (同步)
send() 将请求发送到服务器 (使用GET)
send(string) 将请求发送到服务器 (使用POST)

GET 还是 POST?

GET 比 POST简单并且更快, 并可在大多数情况下使用.

然而,当遇到下列情况时用 POST:

  • 不是更新缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST没有大小限制)。
  • 发送用户输入(可以包含未知字符),POST比GET更强大和安全.

GET 请求

一个简单的GET请求:

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

让我试试

在上面的例子中,你可能得到一个缓存的结果。为了避免这种情况,添加一个唯一的ID到URL:

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

让我试试

如果要用GET方法发送信息,请将信息添加到URL:

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();

让我试试


POST 请求

一个简单的POST请求:

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

让我试试

POST 数据像HTML表单, 使用setRequestHeader()添加HTTP头信息. 使用send()方法,指定要发送的数据:

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

让我试试

方法 描述
setRequestHeader(header, value) 增加的HTTP头到request

header: 指定header名称
value: 指定header值

url - 服务器上的文件

open() 方法的url参数, 服务器上文件的地址:

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

该文件可以是任何类型的文件, 像 .txt 和 .xml, 或服务器脚本文件 .asp 和 .php (可以在发送响应前在服务器上执行操作).


异步 - True 或者 False?

发送一个异步请求, open()方法的async参数可以设置为true或者false:

xhttp.open("GET", "ajax_test.php", true);

发送异步请求对web开发人员来说是一个巨大的改进. 服务器上执行的许多任务都非常耗时,在使用AJAX之前,此操作可能会导致应用程序挂起或停止。

通过发送异步的JavaScript,不用等待服务器的响应,而是:

  • 在等待服务器响应时执行其他脚本
  • 当响应完成,处理响应

Async = true

当使用 async = true, 当在onreadystatechange事件里,响应完成时,执行一个函数:

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

让我试试

关于onreadystatechange,将在下一章有更多讲述.

Async = false

使用async = false, 修改open()方法的第三个参数为false:

xhttp.open("GET", "ajax_info.txt", false);

使用async = false 不推荐, 但对于一些小的请求,是可以的.

记住,JavaScript不会继续执行,直到服务器响应准备。如果服务器忙或慢,应用程序将挂起或停止。

注意: 当你使用async = false, 不实现onreadystatechange函数 - 代码放在send()语句后面:

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

让我试试