Ajax入门之XMLHttpRequest核心对象的详解

来源：互联网发布：中国不高兴知乎编辑：程序博客网时间：2024/06/10 02:36

Ajax最核心的内容就是异步发送请求，Ajax使用XMLHttpRequest对象来完成异步请求的发送，因此可以说XMLHttpRequest对象是Ajax的核心对象

1.什么是XMLHttpRequest对象？

XMLHttpRequest对象是Ajax用于进行异步发送请求的核心对象，它用于在后台与服务器进行数据交换通过使用XMLHttpRequest对象，开发者可以：    1>在不重新加载页面的情况下更新网页    2>在页面已加载后从服务器上请求数据    3>在页面已加载后从服务器上接受数据    4>在后台向服务器发送数据

2.XMLHttpRequest对象的创建

现代所有浏览器都内建了XMLHttpRequest对象，不同的浏览器使用的内建方法可能有些许不同，一般来说，总结为三种创建XMLHttRequest对象的语法：    1>new XMLHttpRequest();    //window.XMLHttpRequest    2>new ActionXObjext(Msxml2.XMLHTTP");    //window.ActiveXObject    3>new ActiveXObject("Microsoft.XMLHTTP");    //window.ActiveXObject创建XMLHttpRequest对象的常用代码:function createXMLHttpRequest(){    var xmlhttprequest;    if(window.XMLHttpRequest)        xmlhttprequest = new XMLHttpRequest();    else if(window.ActiveXObject){        try{            xmlhttprequest = new ActiveXObject("Mxsml2.XMLHTTP");        }        catch(e){            try{                xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");            }            catch(e){                window.alert("浏览器不支持XMLHttpRequest对象的创建");            }        }        finally{            return xmlhttprequest;        }    }}

3.XMLHttpRequest对象创建成功之后，就可以使用该对象来异步发送请求了。该对象发送请求与传统的发送请求不同，传统的请求发送需要提交保单或者请求新的网络等等，这些都会导致浏览器重新请求并加载页面；而使用XMLHttpRequest对象发送请求原理是通过JS代码来完成，无须刷新页面，从而实现了异步发送请求这一技术

4.XMLHttpRequest对象的常用方法：

1.abort()：停止当前请求的发送2.getAllResponseHeaders()：获取服务器返回对的全部响应头3.getResponseHeader(name)：获取执行的服务器响应头信息4.open(method,url,[,asyncflag,username,password])：与服务器url建立method方式的请求连接，asyncflag指定是否异步连接，username和password指定远程连接服务器的用户名和密码，如果没有则不需要指定5.send(param)：指定请求参数，如果是使用post方式则将需要传过去的参数使用该方法指定，格式为:send(name1=val1&name2=val2);如果是get则不需要，直接send(null）6.setRequestHeader(name,value)：设置请求头，在发送请求之前使用

5.XMLHttpRequest对象常用的属性

1.onreadystatechange：指定该对象readystate值改变也就是请求的状态改变时的事件处理函数2.readyState：获取该对象的处理状态3.resposneText/resposneXML：获取服务器的响应文本或者响应的XML文档对象4.status：获取服务器返回的响应状态码5.statusText：获取服务器返回的状态文本信息，只有服务器响应完成之后才会有该文本信息

6.实现简单的一步发送请求:

//异步发送请求的文本form.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <title>Ajax实现异步请求</title></head><body>    <form method="psot">        <label for="username">username</label>        <input type="text" name="username" id="username" placeholder="please input your username" />        <br />        <label for="password">password</label>        <input type="password" name="password" id="password" placeholder="please input your password" />        <br />        <span>&nbsp;&nbsp;&nbsp;</span>        <button type="submit" id="login">login</button>        <span> &nbsp;</span>        <button type="reset">reset</button>    </form>    <div id="data">    </div>    <!--js start-->    <script>        window.onload = function(){            var login = document.getElementById('login');            login.onclick = function(){                //create xmlhttprequest                var ajax = new XMLHttpRequest();                //send request                var username = document.getElementById('username').value;                var password = document.getElementById('password').value;                ajax.open('post','test.php',true);                var data = 'username='+username+"&password="+password;                ajax.send(data);                //receive data from server                ajax.onreadystatechange = function(){                    if(ajax.readyState == 4 && ajax.status == 200){                        var serverdata = ajax.responseText;                        document.getElementById('data').innerHTML = serverdata;                    }                   };                return false;            };        };    </script>    <!--js end--></body></html>//服务器url的响应文件server.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>php站点测试文件</title></head><body>    <?php        echo "have received the data from client";    ?></body></html>//最终结果：点击login之后不用刷新页面将会在#data div下显示php文件传入的信息

0 0