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

最新推荐文章于 2024-07-18 10:00:11 发布

19年，重新开始写

最新推荐文章于 2024-07-18 10:00:11 发布

阅读量438

点赞数

分类专栏： ajax 文章标签： ajax xmlhttprequest 异步

本文链接：https://blog.csdn.net/qq_27905183/article/details/64123998

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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文件传入的信息

19年，重新开始写

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax入门之XMLHttpRequest核心对象的详解

Ajax最核心的内容就是异步发送请求，Ajax使用XMLHttpRequest对象来完成异步请求的发送，因此可以说XMLHttpRequest对象是Ajax的核心对象1.什么是XMLHttpRequest对象？XMLHttpRequest对象是Ajax用于进行异步发送请求的核心对象，它用于在后台与服务器进行数据交换通过使用XMLHttpRequest对象，开发者可以： 1>在不重新加载页面
复制链接

扫一扫