上一节:
下一节:

  JavaScript AJAX 发送请求

  • 向服务器发送请求

    XMLHttpRequest对象用于与服务器交换数据。
    要向服务器发送请求，我们使用XMLHttpRequest对象的open()和send()方法： 
    xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
    方法 描述
    open(method, url, async, user, psw) 指定请求
    • 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.php", true);
xhttp.send();
    尝试一下
    在上面的示例中，您可能会获得缓存结果。要避免这种情况，请在URL中添加唯一ID： 
    xhttp.open("GET", "demo_get.php?t=" + Math.random(), true);
xhttp.send();
    尝试一下
    如果要使用该GET方法发送信息，请将信息添加到URL： 
    xhttp.open("GET", "demo_get2.php?fname=Henry&lname=Ford", true);
xhttp.send();
    尝试一下

    POST请求

    一个简单的POST请求： 
    xhttp.open("POST", "demo_post.php", true);
xhttp.send();
    尝试一下
    要像HTML表单一样POST数据，请添加HTTP标头setRequestHeader()。在send()方法中指定要发送的数据： 
    xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
    尝试一下
    方法 描述
    setRequestHeader() 将HTTP标头添加到请求中,header：指定标题名称,value：指定标头值

  • url - 服务器上的文件

    open()方法的url参数是服务器上文件的地址： 
    xhttp.open("GET", "ajax_test.php", true);
    该文件可以是任何类型的文件，如.txt和.xml，或服务器脚本文件，如.asp和.php（可以在发送响应之前在服务器上执行操作）。

  • async - true 或者 false

    应以异步方式发送服务器请求。open()方法的async参数应设置为true： 
    xhttp.open("GET", "ajax_test.asp", true);
    通过异步发送，JavaScript不必等待服务器响应，而是可以：
    • 在等待服务器响应时执行其他脚本
    • 在响应准备好后处理响应

  • onreadystatechange属性

    使用XMLHttpRequest对象，您可以定义在请求收到答案时要执行的函数。函数onreadystatechange在XMLHttpResponse对象的属性中定义： 
    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在后面的章节中了解更多信息。

  • 同步请求

    要执行同步请求，请将open()方法中的第三个参数更改为false： 
    xhttp.open("GET", "ajax_info.txt", false);
    有时async = false用于快速测试。您还可以在较旧的JavaScript代码中找到同步请求。由于代码将等待服务器完成，因此不需要onreadystatechange函数： 
    xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
    尝试一下
    建议不要使用同步XMLHttpRequest（async = false），因为在服务器响应准备好之前，JavaScript将停止执行。如果服务器忙或慢，应用程序将挂起或停止。同步XMLHttpRequest正在从Web标准中删除，但此过程可能需要很多年。鼓励现代开发人员工具警告使用同步请求，并在发生时抛出InvalidAccessError异常。
上一节:
下一节: