Ajax+js实现异步交互

2023年6月11日上午10:59 • JavaScript

实现"Ajax+js实现异步交互"的具体步骤如下：

创建 XMLHttpRequest 对象

使用Js 中的 XMLHttpRequest 对象创建Ajax请求，该对象用来与服务器交互，从服务器请求数据和处理响应。

var xmlhttp;
if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器建立XMLHttpRequest对象
    xmlhttp = new XMLHttpRequest();
} else {
    // IE6, IE5 浏览器建立XMLHttpRequest对象
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

规定要请求的 URL

使用 xmlhttp.open("GET", "url", true) 函数规定要请求的 URL ，第三个参数为true表示要进行异步请求，即AJAX操作。

发送请求

使用 xmlhttp.send() 函数发送请求。

xmlhttp.open("GET", "demo_get.asp", true);
xmlhttp.send();

接收响应

使用 xmlhttp.onreadystatechange 事件监听响应，该事件在请求接收到响应时执行。

判断请求状态 xmlhttp.readyState ，以便判断是否有响应值。状态码如下：

0: 请求未初始化
1: 服务器连接已经建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

根据请求状态的值判断相应动作

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
    }
};

示例一：

<html>
    <head>
        <meta charset="UTF-8">
        <title>AJAX数据请求</title>
    </head>
    <body>
        <div id="txtHint"><button onclick="showHint()">获取数据</button></div>
        <script>
            function showHint() {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    // IE7+, Firefox, Chrome, Opera, Safari 浏览器建立XMLHttpRequest对象
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // IE6, IE5 浏览器建立XMLHttpRequest对象
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("txtHint").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET", "ajax_info.txt", true);
                xmlhttp.send();
            }
        </script>
    </body>
</html>

大致脚本说明：

创建一个函数showHint，在点击按钮时触发。
创建一个XMLHttpRequest对象，判断浏览器是否支持。
判断响应状态码（使用readyState和status）。
请求方法是HTTP GET，并指定需要获取数据的URL。
最后发送请求（使用send()）。

示例二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AJAX数据请求</title>
    </head>
    <body>
        <h1>使用AJAX技术获取XML数据：</h1>
        <div id="id01"></div>
        <br>
        <h1>使用AJAX技术获取JSON数据：</h1>
        <div id="id02"></div>
        <script>
            //获取xml
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                    var xmlDoc = xmlHttp.responseXML;
                    var txt = "";
                    var x = xmlDoc.getElementsByTagName("title");
                    for (i = 0; i < x.length; i++) {
                        txt += x[i].childNodes[0].nodeValue + "<br>";
                    }
                    document.getElementById("id01").innerHTML = txt;
                }
            };
            xmlHttp.open("GET", "cd_catalog.xml", true);
            xmlHttp.send();

            //获取json
            var jsonHttp = new XMLHttpRequest();
            jsonHttp.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    var myObj = JSON.parse(this.responseText);
                    var output = "";
                    for (i in myObj) {
                        output += "<p>" + myObj[i].title + "</p>";
                    }
                    document.getElementById("id02").innerHTML = output;
                }
            };
            jsonHttp.open("GET", "cd_catalog.json", true);
            jsonHttp.send();
        </script>
    </body>
</html>

大致脚本说明：