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对象,您可以定义在请求收到答案时要执行的函数。函数onreadystatechangeXMLHttpResponse对象的属性中定义:
    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异常。