JS--AJAX建立XMLHttpRequest连接、发送GET请求、发送POST请求

朴灿烈づ我的快乐病毒、 2021-08-13 12:16 759阅读 0赞

#### 建立XMLHttpRequest连接 ####

创建XMLHttpRequest对象之后，就可以使用该对象的open()方法建立一个HTTP请求。open()方法用法如下：

oXMLHttpRequest.open.(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

该方法包含5个参数，其中前两个参数是必须的。

*  **bstrMethod：** HTTP方法字符串，如GET、POST等，大小写不敏感
 *  **bstrUrl：** 请求的URL地址字符串，可以为绝对地址或相对地址
 *  **varAsync：** 布尔值，可选参数，指定请求是否为异步方式。默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数
 *  **bstrUser：** 可选参数，如果服务器需要验证，该参数指定用户名，如果未只当，当服务器需要验证时，会弹出验证窗口
 *  \*\*bstrPassword：\*\*可选参数，验证信息中的密码部分，如果用户名为空，则此值将被忽略

建立连接之后，就可以使用send()方法发送请求到服务器端，并接收服务器的响应。send()方法用法如下：

XMLHttpRequest.send(varBody);
    //varBody表示将通过该请求发送的数据，如果不传递信息，可以设置参数为null

该方法的同步或异步取决于open方法中的BAsync参数，如果bAsync == False，此方法将会等待请求完成或者超时时才会返回，如果bAsync == True，此方法将立即返回。  
使用XMLHttpRequest对象的responseBody、responseStream、responseText或responseXML属性可以接收响应数据。

示例：

<h1>AJAX测试</h1>
    <button id="btn" value="btn" onclick="f()">按钮</button>
    <script> function f() { var ajax = createXMLHTTPObject(); ajax.open("get", "response.jsp",false); ajax.send(null); alert(ajax.responseText); } </script>

response.jsp:

ajax响应

点击按钮，弹出提示框：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

#### 发送GET请求 ####

发送GET请求时，只需要将包含查询字符串的URL传入open()方法，设置第一个参数值为“GET”即可。服务器能够在URL尾部的查询字符串中接收用户传递过来的信息。

示例：

<h1>AJAX测试</h1>
    <button id="btn" value="btn" onclick="f()">按钮</button>
    <script> function f() { var ajax = createXMLHTTPObject(); ajax.open("get", "response.jsp?name=zhangsan",false); ajax.send(null); alert(ajax.responseText); } </script>

response.jso：

<%
        String name = request.getParameter("name");
        response.getWriter().write(name);
    %>

点击按钮：弹出提示框显示查询信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]  
注意：查询字符串通过（？）前缀附加在URL的末尾，发送数据是以连字符（&）连接的一个或多个键值对。每个名称和值都必须在编码后才能用在URL中，用户使用JavaScript的encodeURLComponent()函数对其进行编码，服务器端在接收这些数据时也必须使用decodeURIComponent()函数进行解码。URL的最大长度为2048字符（2KB）。

#### 发送POST请求 ####

POST请求支持发送任意格式、任意长度的数据，一般多用于表单提交。于GET发送的数据格式相似，POST发送的数据也必须进行编码，并用连字符（&）进行分割，格式如下：

send("key1=value1&key2=value2&...");
    //这些参数在发送POST请求时，不会被附加到URL的末尾，而是作为send()方法的参数进行传递

注意：使用POST发送请求需要设置响应头信息

xmlhttp.setRequestHeader("Header-name", "value");

一般我们设置的是：content-type，传输数据类型，即服务器需要我们传送的数据类型

xmlhttp.setRequestHeader ("content-type", "application/x-www-form-urlencoded" )
    //表示传递的是表达值

用于发送POST请求的数据类型（Content Type）通常是application/x-www-form-urlencoded，这意味着我们还可以**text/xml或application/xml**类型给服务器发送XML数据，甚至可以以**application/json** 类型发送JavaScript对象。

示例：

<h1>AJAX测试</h1>
    <button id="btn" value="btn" onclick="f()">按钮</button>
    <script> function f() { var ajax = createXMLHTTPObject(); ajax.open("post", "response.jsp",false); ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ajax.send("name=Tom"); alert(ajax.responseText); } </script>

response.jso：

<%
        String name = request.getParameter("name");
        response.getWriter().write(name);
    %>

#### GET与POST方式对比 ####

使用GET方式传递的信息量是有限的，而使用POST方式传递的信息是无限的，且不受字符编码的限制，还可以传递二进制数据。对于传输文件，以及大容量信息时应采用POST方式。另外，当发送安全信息或XML格式数据时，也应该考虑选用这种方案来实现。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/377f20f11ece4f3287ad5e259c3a0374.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/564b3e2de98b4118a374998fac51e930.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]: /images/20210813/67e365d197be41e7983f5d81d85ccc43.png