十二.Ajax

最新推荐文章于 2024-03-26 10:57:19 发布

小小道生一

最新推荐文章于 2024-03-26 10:57:19 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax

本文链接：https://blog.youkuaiyun.com/weixin_37664648/article/details/80664461

Ajax 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用XMLHttpRequest对象实现简单的AJAX请求，包括GET和POST请求的区别，如何设置请求头及处理服务器响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
        function loadXMLDoc()
        {
            //创建 XMLHttpRequest 对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }

            //向服务器发送请求
            //open(method,url,async)

            xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
            //将请求发送到服务器
            //send(string) string：仅用于 POST 请求
            xmlhttp.send();
            /*
            * 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
            * 在以下情况中，请使用 POST 请求：
            * 无法使用缓存文件（更新服务器上的文件或数据库）
            * 向服务器发送大量数据（POST 没有数据量限制）
            * 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
            *
            * */
            //URL 添加信息
            xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);

            //设置请求头,setRequestHeader(header,value)
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //服务器响应
//            responseText 获得字符串形式的响应数据。
//            responseXML 获得 XML 形式的响应数据。

            //如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析
            xmlDoc = xmlhttp.responseXML;
            txt = "";
            x = xmlDoc.getElementsByTagName("ARTIST");
            for ( i=0; i<x.length; i++)
            {
                txt=txt + x[i].childNodes[0].nodeValue + "<br>";
            }
            document.getElementById("myDiv").innerHTML=txt;

            //onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
            //当请求被发送到服务器时，我们需要执行一些基于响应的任务,每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
            /*
            *readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
            * 0: 请求未初始化
            * 1: 服务器连接已建立
            * 2: 请求已接收
            * 3: 请求处理中
            * 4: 请求已完成，且响应已就绪
            *
            * status
            * 200: "OK"
            * 404: 未找到页面
            * */


            //showHint() 函数
            /*
            *
            * */

        }
    </script>