Ajax

最新推荐文章于 2025-06-17 21:00:00 发布

酸乳酸乳

最新推荐文章于 2025-06-17 21:00:00 发布

阅读量174

点赞数

CC 4.0 BY-SA版权

文章标签： ajax

本文链接：https://blog.youkuaiyun.com/qq_41359265/article/details/94618088

AJAX = Asychronous Js and XML(异步的JS和XML）

Ajax最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

其中包括如下几个步骤：

使用XMLHttpRequest对象发出HTTP请求；
得到服务器返回XML格式的字符串；
JS解析XML，并更新局部页面；

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <script>
            function loadXMLDoc()
            {
                var xmlhttp;
                //XMLHTTPRequest 对象用于在后台和服务器交换对象
                if(window.XMLHttpRequest){
                    xmlhttp=new XMLHttpRequest();
                }
                else{
                    //ie5 ie6 浏览器执行代码
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                //onreadystatechange 存储函数，每当readystate属性改变就会调用该函数
                xmlhttp.onreadystatechange=function()
                {
                    //存有XMLHttpRequest的状态，0：请求为初始化，1：服务器连接已建立，2：请求以接受，3：请求处理中，4：请求已经完成，且响应已就绪
                    if(xmlhttp.readyState==4 && xmlhttp.status==200) 
                    {
                        
                        //获得来自服务器的响应使用XMLHttpRequest对象的responseText或responseXML属性
                        document.getElementById("myDiv").innerHTML="yuu";
                    }
                }
                //如果将请求发送到服务器，我们使用XMLHttpRequest对象的open（）和send（）方法
                //open（method，url，async）method：请求的类型GET OR PPOST，url：文件在服务器上的地址，async：是否异步处理请求
                xmlhttp.open("GET","\\ajax_info.txt",true);
                //send（string）将请求发送到服务器，string仅用于POST
                xmlhttp.send();
                //大部分情况下都可以使用GET，并且GET更快
                //不能使用缓存文件（更新服务器上的文件或数据库）
                //向服务器上发送大量的数据（POST没有数据量限制）
                //发送包含未知字符的用户输入时，POST也会比GET更稳定可靠
            }
        </script>
    </head>
    <body>
        <div id="myDiv"><h2>使用AJAX修改文本内容</h2></div>
        <button type="button" onclick="loadXMLDoc()">修改内容</button>
    </body>
</html>