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

也就是直接编写onRecorderStateChange的事件函数,如果readyState的状态为4(数据接收成功)则继续操作。但是通常情况下,不但需要判断请求的状态,还要判断服务器返回的状态status,因此上述代码改为

复制代码 代码如下:


<script type="text/javascript">
            xmlHttp.onRecorderStateChange = function(){
                if(xmlHttp.readyState == 4&& xmlHttp.status==200)
                //执行相关代码
            }
        </script>

以上两段代码仅仅只是建立了请求,还需要使用send()方法来发送请求,该方法的原型如下:

send(body);
改方法仅有一个参数body,它表示要向服务器发送的数据,其格式为查询字符串的形式,例如:

var body = "myName=isaac&age=25";
如果再open中指定的是get方式,则这些参数作为查询字符串提交,如果指定的是post方式,则作为HTTP的POST方法提交。对于send()而言。body参数是必须的,如果不发送任何数据,则可以使用

xmlHttp.send(null)
特别的,如果使用POST方法进行提交请求,那么在发送之前必须使用以下语句来设置HTTP的头,语法如下:

xmlHttp.setRequestHeader("content-Type","application/x-www-form-urlencoded;")
服务器在收到客户端请求之后,根据请求返回相应的结果,这个结果通常为两种形式,一种是文本形式,存储在responseText中;另一种是XML格式,存储在responseXML中。客户端程序可以对前者进行字符串的处理,对后者进行DOM相关的处理,例如可以对服务器返回值做如下的处理:

alert("服务器返回:"+xmlHttp.responseText);
上述整个异步连接服务器的过程如下:

复制代码 代码如下:


    <body>
        <script type="text/javascript">
            var xmlHttp;
            function createXMLHttpRequest() {
                if (window.ActiveXObject)
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                    xmlHttp = new XMLHttpRequest();
            }
            function startRequest() {
                createXMLHttpRequest();
                xmlHttp.open("GET", "", true);
                xmlHttp.onreadystatechange = function() {
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                        alert("服务器返回: " + xmlHttp.responseText);
                }
                xmlHttp.send(null);
            }
        </script>
        <input type="button" value="测试异步通讯">
    </body>

为了解决异步连接ie缓存问题,需要在真实地址加一个与时间毫秒相关的参数,使得每次请求的地址都不一样。而该参数服务器确是不需要的。

复制代码 代码如下:


var sUrl = "1-1.aspx?"+new Date().getTime();//地址不断变化
        XMLHttp.open("GET",sUrl,true);

2.GET和POST模式

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wfypdj.html