Ajax之三种数据传输格式

gamedev˚

墨衍会员 · AI 创作全网分发码龄12年

关注

原创最新推荐文章于 2026-03-05 00:08:56 发布 5.2k 阅读 AI 写同款· GEO 优化 ›

ajax的三种传参方式 ajax的三种传参方式 ajax的第一种第二种传递参数的方式，如下图： ajax的第三种传递参数的方式，通过serialize()序列化方法传递参数，如下图：阅读详情

通过ajax异步传输的数据格式有三种，分别是html、xml以及json格式。下面就分别给出它们传输格式的代码实例：

html格式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
    window.onload = function() {
        var aNodes = document.getElementsByTagName("a");
        for ( var i = 0; i < aNodes.length; i++) {
            aNodes[i].onclick = function() {
                var request = new XMLHttpRequest();
                method = "GET";
                url = this.href;

                request.open(method, url);
                request.send(null);

                request.onreadystatechange = function() {
                    if (request.readyState == 4) {
                        if (request.status == 200 || request.status == 304) {
                            document.getElementById("details").innerHTML = request.responseText;
                        }
                    }
                }

                return false;
            }
        }
    }
</script>
</head>
<body>
    <div align="center">
        <h1>People</h1>
        <ul>
        <!-- `andy.html`:
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
            <title>Insert title here</title>
            </head>
            <body>
                <h3>Hello,This is Andy!</h3>
                <p>Welcom!</p>
            </body>
            </html>
         -->
            <li><a href="files/andy.html">Andy</a>
            </li>
            <li><a href="files/richard.html">Richard</a>
            </li>
            <li><a href="files/jeremy.html">Jeremy</a>
            </li>
        </ul>
        <div id="details"></div>
    </div>
</body>
</html>

xml格式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
    window.onload = function() {
        var aNodes = document.getElementsByTagName("a");
        for ( var i = 0; i < aNodes.length; i++) {
            aNodes[i].onclick = function() {
                var request = new XMLHttpRequest();
                method = "GET";
                url = this.href;

                request.open(method, url);
                request.send(null);

                request.onreadystatechange = function() {
                    if (request.readyState == 4) {
                        if (request.status == 200 || request.status == 304) {
                            // 结果集为XML格式，所以使用responseXML来获取
                            var result = request.responseXML;
                            // 结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
                            var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
                            var website = result
                                    .getElementsByTagName("website")[0].firstChild.nodeValue;
                            var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
                            //alert(name);
                            //alert(email);
                            //alert(website);

                            // 创建DOM树：<h2><a href="...">...</a></h2>
                            var aNode = document.createElement("a");
                            aNode.appendChild(document.createTextNode(name));
                            aNode.href = "mailto:" + email;
                            var h2Node = document.createElement("h2");
                            h2Node.appendChild(aNode);

                            // 创建DOM树：<a href="...">...</a>
                            var aNode2 = document.createElement("a");
                            aNode2
                                    .appendChild(document
                                            .createTextNode(website));
                            aNode2.href = website;

                            // 将上面创建两个的DOM树加入#details中
                            var detailsNode = document
                                    .getElementById("details");
                            detailsNode.innerHTML = "";
                            detailsNode.appendChild(h2Node);
                            detailsNode.appendChild(aNode2);
                        }
                    }
                }

                return false;
            }
        }
    }
</script>
</head>
<body>
    <div align="center">
        <h1>People</h1>
        <ul>
            <!-- `andy.xml`:
                <?xml version="1.0" encoding="UTF-8"?>
                <details>
                    <name>Andy</name>
                    <website>http://adsctio.com/</website>
                    <email>Andy@clearleft.com</email>
                </details>
             -->
            <li><a href="files/andy.xml">Andy</a>
            </li>
            <li><a href="files/richard.xml">Richard</a>
            </li>
            <li><a href="files/jeremy.xml">Jeremy</a>
            </li>
        </ul>
        <div id="details"></div>
    </div>
</body>
</html>

json格式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
    window.onload = function() {
        var aNodes = document.getElementsByTagName("a");
        for ( var i = 0; i < aNodes.length; i++) {
            aNodes[i].onclick = function() {
                var request = new XMLHttpRequest();
                method = "GET";
                url = this.href;

                request.open(method, url);
                request.send(null);

                request.onreadystatechange = function() {
                    if (request.readyState == 4) {
                        if (request.status == 200 || request.status == 304) {
                            // 结果集为JSON格式，所以使用responseTest来获取
                            var result = request.responseText;
                            var objectJson = eval("(" + result + ")");
                            // 结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
                            var name = objectJson.person.name;
                            var website = objectJson.person.website;
                            var email = objectJson.person.email;
                            //alert(name);
                            //alert(email);
                            //alert(website);

                            // 创建DOM树：<h2><a href="...">...</a></h2>
                            var aNode = document.createElement("a");
                            aNode.appendChild(document.createTextNode(name));
                            aNode.href = "mailto:" + email;
                            var h2Node = document.createElement("h2");
                            h2Node.appendChild(aNode);

                            // 创建DOM树：<a href="...">...</a>
                            var aNode2 = document.createElement("a");
                            aNode2
                                    .appendChild(document
                                            .createTextNode(website));
                            aNode2.href = website;

                            // 将上面创建两个的DOM树加入#details中
                            var detailsNode = document
                                    .getElementById("details");
                            detailsNode.innerHTML = "";
                            detailsNode.appendChild(h2Node);
                            detailsNode.appendChild(aNode2);
                        }
                    }
                }

                return false;
            }
        }
    }
</script>
</head>
<body>
    <div align="center">
        <h1>People</h1>
        <ul>
        <!-- `andy.js`:
             {"person":{
                    "name":"Richard",
                    "website":"http://Richard.com",
                    "email":"Richard@clearleft.com"
                    }
             } 
        -->
            <li><a href="files/andy.js">Andy</a></li>
            <li><a href="files/jeremy.js">Jeremy</a></li>
            <li><a href="files/richard.js">Richard</a></li>
        </ul>
        <div id="details"></div>
    </div>
</body>
</html>