JavaScript ajax http send

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

向服务器发送请求

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

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

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");

让我试试

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;

让我试试