Ajax之三种数据传输格式

最新推荐文章于 2024-07-30 08:20:42 发布
最新推荐文章于 2024-07-30 08:20:42 发布
阅读量4.9k 收藏 13
点赞数 2
分类专栏： 【编程语言】➣ ajax 文章标签： ajax
欢迎转载，注明作者和出处就好！如果有任何问题或文章存在明显的谬误，请留言说明原因谢谢，我也可以知道原因，不断进步！
本文链接：https://blog.csdn.net/coder__cs/article/details/72794813
版权

通过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>
gamedev˚
关注
专栏目录
ajax的三种传参方式
xzy的博客
05-06 8620
ajax的三种传参方式 ajax的第一种第二种传递参数的方式，如下图： ajax的第三种传递参数的方式，通过serialize()序列化方法传递参数，如下图：
ajax用json实现数据传输
10-20
AJAX与JSON的结合，可以实现高效、异步的数据传输。 首先，JSON是一种基于文本的轻量级的数据交换格式，它采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯。JSON数据由键值对组成，可以嵌套形成...
Ajax——三种数据传输格式
weixin_30416497的博客
02-01 270
一、HTML HTML由一些普通文本组成。如果服务器通过XMLHTTPRequest发送HTML，文本将存储在responseText属性中。 从服务器端发送的HTML的代码在浏览器端不需要用JavaScript进行解析。 可以直接使用innerHTML属性把服务器传输过来的HTML文本插入到页面中。 ①、html文本 andy.html <h2>&l...
AJAX中data的三种格式的特点分析
最新发布
chenyu_Yang的博客
07-30 334
还能向后台提交一个参数名对应多个参数值的数据，常用于多项删除和导出等操作。劣势：操作麻烦，请求前要进行字符串的拼接，且只能向后台提交字符串类型的数据。劣势：只能向后台提交一个参数名对应一个参数值的字符串类型的数据。优势：不但能提交字符串数据，还能提交二进制数据，常用于递交文件。优势：不但能够向后台提交一个参数名对应一个参数值的数据，格式：data:k1=v1&k2:v2&....优势：结构简单，常用于查询，修改，新增等操作。对象，以传递.xls文件为例。劣势：操作更加复杂。
Ajax的三种数据传输格式
weixin_30596343的博客
08-09 563
首先说一下什么是Ajax 　　Ajax的全称是AsynchronousJavaScriptand XML（是异步的javascript和 XML）， 　　通过后台少量的数据交换实现不刷新网页从而进行网页动态的技术，ajax就可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 　　Ajax能传输的数据格式一共有三种，HTML格式，XML格式，JS...
AJAX的数据传输格式
GaoYuan's Blog
08-06 637
1、使用ajax发送post请求 1、在请求地址后不能拼请求参数 2、请求参数要放在send( )方法中 xhr.send(“key=value&key=value”); ex:
ajax数据传输方式实例详解
10-23
在本文中，我们将深入探讨AJAX数据传输方式，包括如何使用XML、纯文本以及JSON格式来发送和接收数据。 首先，让我们了解如何通过AJAX进行纯文本数据传输。在上述实例中，`createXMLHTTP` 函数用于创建一个...
Ajax调用restful接口传送Json格式数据的方法
10-21
Ajax调用restful接口传送Json格式数据的方法是Web开发中非常常用的一种数据交互方式。它允许客户端与服务器之间进行异步通信，从而提高用户体验，因为它可以在不重新加载整个页面的情况下更新页面的一部分。而...
JQuery中使用ajax传输超大数据的解决方法
12-08
1. **数据压缩**：将数组或对象转换为JSON字符串可以减少数据的体积，因为JSON格式通常比原始的JavaScript表示更紧凑。这有助于降低单次请求的数据大小，从而可能绕过`post_max_size`的限制。 2. **单一字符串**：...
ajax传参的3种形式
wastingallthesetears的博客
08-25 4659
ajax传递参数的三种形式
关于ajax数组数据类型传输
weixin_42971933的博客
02-26 873
emmmm，以前一直以为传输中是不能直接传输整个数组的，但是，以为就是以为啊！还是太年轻了！果然实践是检验真理的唯一标准！ 我写了个小demo（根本算不上demo）测试ajax传输数组数据给后台： 前端环境： emmmm，最简单的html，jQuery，（相当于没有复杂环境） 后台环境： node后台，我是用express自动生成的环境~ 好的，环境有了，开测吧！ 第一种情况： 只传输数组...
ajax 传参的三种方式：
专注Java（全栈）应用开发，求知若渴，虚心若愚，talk is cheap, show me the code.
10-26 959
2.字符串传参： //查询控制器 function queryctl(){ alert(" 查询控制器信息,请稍等..."); //获取信息 var ctl= $("#ctl").val(); var zoneid= $("#hid_zoonid").val(); //发送...
AJAX笔记-数据传输格式
Good good study!
04-25 1105
HTML 优点： 传输的直接是HTML格式的内容，可以直接用innerHTML = XMLHttpRequest.responseText来获取操作。 缺点 如果是更新多个部分，则对responseText内容不容易拆分。 XML var result = XMLHttpRequest.responseXML 返回的是XML文档，需要进行解析，然后重组成HTML文档。通常是通过类似下
Python：django之ajax post传参的两种格式
weixin_42161670的博客
05-10 496
假设有如下表单，需要将这些表单用ajax传参的方式传给后台，该怎么做呢… 我们知道ajax传参的格式为$.post(“地址”,参数,function(返回值){})，套用这个格式进行传参，有以下两种方法： 方法一：提交表单中的部分字段 我们可以获取用户名，密码等内容，将其拼接成一个字典(想传什么就将其拼接成字典格式，没有特殊限制，你甚至可以单独的只传一个用户名)，将其作为参数传给后台 例： {‘username’:username,‘password’:password,‘csrfmiddlewareto
Ajax 数据交互格式
wizard__hao的博客
03-16 1387
数据交换格式 数据交互格式，就是服务器端与客户端之间进行数据传输与交换的格式 前端领域，经常提及的两种数据交换格式分别为XML和JSON。XML用得非常少，所以，重点学习的数据交互格式是JSON。 XML 什么是XML XML，即可扩展标记语言。因为它也是一种标记语言因此XML和HTML类似。 <note> <!-- note表明这是一条消息 --> <to>ls</to> <!-- 指定消息发送的对象 --> <from&g
ajax_数据格式
cheng_cuo_tuo的博客
06-22 504
允许的三种格式 HTML、XML、Json HTML数据 HTML由一些普通的文本组成，如果服务器通过 XMLHttpRequest 发送 HTML，文本将存储在 responseText 属性中。 不必从 responseText 属性中读取数据，它已经是希望的格式，可以直接将它插入到页面中，通过简单的某个元素的 innerHTML 属性。 优点： – 从服务器端发送的HTML代码在浏览器端不...
通过Ajax post Json类型的数据到Controller
gw的博客
12-12 530
JS function postSimpleData() { $.ajax({ type: "POST", url: "/Service/SimpleData", contentType: "application/json", //必须有 async: false，// 是否同步 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值