零基础学习AJAX之AJAX的简介和基础(3)

上面的实例中，除了请求异步服务器以外，并没有向服务器发送额外的数据，通常在html请求中有get和post模式，这两种模式都可以作为异步请求发送数据的方式。

如果是GET请求，则直接把数据放入异步请求的URL地址中，而send方法不发送任何数据，例如：

复制代码 代码如下:

    var queryString = "firstName=isaac&birthday=0226";
            var sUrl = "1-1.aspx?" + queryString + "&timestamp" + new Date().getTime();
            xmlHttp.open("GET", sUrl);
            xmlHttp.send(null); //该语句只发送null

如果是POST模式，则是把数据统一在send()方法中送出，请求地址没有任何信息，并且必须设置请求的文件头，例如：

复制代码 代码如下:

<script language="javascript">
            var queryString = "firstName=isaac&birthday=0226";
            var sUrl = "1-1.aspx?" + queryString + "&timestamp" + new Date().getTime();
            xmlHttp.open("POST", sUrl);
            xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlHttp.send(queryString); //该语句负责发送数据
        </script>

实例

为了更清楚地演示GET和POST的区别，编写示例代码，首先创建两个文本框用于输入用户姓名和生日，并建立两个按钮分别用于GET和POST两个方法来发送异步请求

复制代码 代码如下:

<form>
            <p><input type="text"/></p>
            <p><input type="text" /></p>
        </form>
        <input type="button" value="GET">
        <input type="button" value="POST">

其中用户填写的数据统一用函数createQueryString()编写，需要时予以调运，代码如下

复制代码 代码如下:

function crrateQueryString() {
                var firstName = document.getElementById("firstName").value;
                var birthday = document.getElementById("birthday").value;
                var queryString = "firstName=" + firstName + "&birthday=" + birthday;
                return queryString;
            }

服务器接收到请求数据后根据不同的时刻返回相应的文本，客户端接收到文本后显示在相应的div快中，代码如下

复制代码 代码如下:

    function handleStateChange() {
                if (xmlHttp.readyState == 4 && xmlHttp.state == 200) {
                    var responseDiv = document.getElementById("serverResponse");
                    responseDiv.innerHTML = xmlHttp.responseText;
                }
            }

GET和POST各建立自己的函数doRequestUsingGET()和doRequestUsingPOST()。

完整代码如下：

复制代码 代码如下: