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

建立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响应

点击按钮，弹出提示框：

发送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);
%>

点击按钮：弹出提示框显示查询信息：

注意：查询字符串通过（？）前缀附加在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格式数据时，也应该考虑选用这种方案来实现。