Ajax的三种数据传输格式
Posted 李子栗子梨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax的三种数据传输格式相关的知识，希望对你有一定的参考价值。
首先说一下什么是Ajax
Ajax的全称是Asynchronous JavaScript and XML（是异步的 javascript 和 XML），
通过后台少量的数据交换实现不刷新网页从而进行网页动态的技术，ajax就可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax能传输的数据格式一共有三种，html格式，XML格式，JSON格式
一，HTML格式
使用HTML传输格式，最大特点是要使用DOM方法，获取结点，通过结点进行操作使用innerHTML进行对DOM标签的值写入，从而实现异步更新
首先放HTML代码，下面的文件是从这一段代码来获取数据的
1 <h2><a >Andy</a></h2> 2 <a>aaaaaa</a>
然后放JSP代码，
首先要获取到对象的onlick方法，并且retuen fales这样做的目的是为了废除让a标签的跳转方法
然后按一下几个步骤执行
1.创建一个XMLHttpRequest对象
2.准备发送的数据，一般准备两个一个URL一个Method
3.调用XMLHttpRequest对象的Open方法，和Send方法，为了方便记忆，这里为了方便理解我所认为就是Open就是准备阶段，send就是发送。
4.调用XMLHttpRequest对象的onreadystatechange()方法，这个方法会和数据或者服务器进行交互，并且这个过程会有4部，只有当XMLHttpRequest对象的readyState为4的时候表示交互完成
5.调用XMLHttpRequest对象的status方法，这个对象代表的网页状态比如404（找不到网页） ，500（服务器内部错误），200（成功），
6操作DOM对标签的值进行写入XMLHttpRequest对象的responseText就是返回的文本
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <title>Ajax HTML格式传输</title> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 //1.获取a结点，并为其添加相应的onclick函数 15 document.getElementsByTagName("a")[0].onclick = function(){ 16 //3.创建一个XMLHttpRequest对象 17 var request = null; 18 request = new XMLHttpRequest(); 19 //4.准备发送的数据:url 20 var url =this.href ; 21 var method = "GET"; 22 //5.调用XMLHttpRequest的 Open 方法 23 request.open(method, url); 24 //6.调用XMLHttpRequest的 send 方法 25 request.send(null); 26 //7.为XMLHttpRequset 对象添加onreadystatechange相应函数 27 request.onreadystatechange = function(){ 28 //8.用requset对象的readyState方法判断是否进行到了第四步 29 if(request.readyState == 4){ 30 //9.用requset对象的status判断页面请求是否成功 31 if(request.status == 200 || request == 304){ 32 //2.获取到输入信息结点并放入返回的值 33 document.getElementById("andy").innerHTML = request.responseText; 34 } 35 } 36 } 37 return false; 38 } 39 } 40 </script> 41 </head> 42 43 <body> 44 <a href="files/Ajax_HTML.html">andy</a> 45 <div id="andy"></div> 46 </body> 47 </html>
二，XML格式
我认为，XML操作比HTML操作更为复杂，比上面就多了一个XML解析而已。
同上首先先放XML代码
1 <?xml version="1.0" encoding="UTF-8"?> 2 <detalis> 3 <name>Andy</name> 4 <text>hahahahahaah</text> 5 </detalis>
然后放JSP代码
过程基本相同，只不过HTML传输格式传输使用responseText,而这里通过responseXML来获取XML文档，然后解析或者子节点的值在对DOM进行操作。
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <title>Ajax XML格式传输</title> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 //1.获取a结点，并为其添加相应的onclick函数 15 document.getElementsByTagName("a")[0].onclick = function(){ 16 //3.创建一个XMLHttpRequest对象 17 var request = new XMLHttpRequest(); 18 //4.准备发送的数据:url 19 var url =this.href ; 20 var method = "GET"; 21 //5.调用XMLHttpRequest的 Open 方法 22 request.open(method, url); 23 //6.调用XMLHttpRequest的 send 方法 24 request.send(null); 25 //7.为XMLHttpRequset 对象添加onreadystatechange相应函数 26 request.onreadystatechange = function(){ 27 //8.用requset对象的readyState方法判断是否进行到了第四步 28 if(request.readyState == 4){ 29 //9.用requset对象的status判断页面请求是否成功 30 if(request.status == 200 || request == 304){ 31 //结果是XML格式，所以需要使用respinseXML来获取 32 var result =request.responseXML; 33 //结果不能使用来先创建对应的结点再将结果加入到#Andy中 34 /* 35 目标格式为 36 <h2><a >Andy</a></h2> 37 <a>aaaaaa</a> 38 */ 39 var name = result.getElementsByTagName("name")[0].firstChild.nodeValue; 40 var text = result.getElementsByTagName("text")[0].firstChild.nodeValue; 41 //alter(name); 42 //alter(text); 43 var nodea = document.createElement("a"); 44 nodea.appendChild(document.createTextNode(name)); 45 var nodeaa = document.createElement("a"); 46 nodeaa.appendChild(document.createTextNode(text)); 47 var andy = document.getElementById("andy"); 48 andy.appendChild(nodea); 49 andy.appendChild(nodeaa); 50 } 51 } 52 } 53 return false; 54 } 55 } 56 </script> 57 </head> 58 59 <body> 60 <a href="files/Ajax_XML.xml">andy</a> 61 <div id="andy"></div> 62 </body> 63 </html>
三，json格式
先说什么是JSON，json是javascript原生的，一种轻量级用户数据交换的一个东西，
json中只能通过键值对的方式来存储数据，在js中使用的试用直接.键值就可以获得队形的VALUE
值也可以再是一个json对象
比如，这就是一会要用的js文件
1 {"person":{ 2 "name":"andy", 3 "text":"hahahaha" 4 } 5 }
下面上js代码
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <title>Ajax XML格式传输</title> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 //1.获取a结点，并为其添加相应的onclick函数 15 document.getElementsByTagName("a")[0].onclick = function(){ 16 //3.创建一个XMLHttpRequest对象 17 var request = new XMLHttpRequest(); 18 //4.准备发送的数据:url 19 var url =this.href ; 20 var method = "GET"; 21 //5.调用XMLHttpRequest的 Open 方法 22 request.open(method, url); 23 //6.调用XMLHttpRequest的 send 方法 24 request.send(null); 25 //7.为XMLHttpRequset 对象添加onreadystatechange相应函数 26 request.onreadystatechange = function(){ 27 //8.用requset对象的readyState方法判断是否进行到了第四步 28 if(request.readyState == 4){ 29 //9.用requset对象的status判断页面请求是否成功 30 if(request.status == 200 || request == 304){ 31 32 var result =request.responseText; 33 var object = eval( "(" + result + ")" ); 34 //结果不能使用来先创建对应的结点再将结果加入到#Andy中 35 /* 36 目标格式为 37 <h2><a >Andy</a></h2> 38 <a>aaaaaa</a> 39 */ 40 var name = object.person.name; 41 var text = object.person.text; 42 //alter(name); 43 //alter(text); 44 var nodea = document.createElement("a"); 45 nodea.appendChild(document.createTextNode(name)); 46 var nodeaa = document.createElement("a"); 47 nodeaa.appendChild(document.createTextNode(text)); 48 var andy = document.getElementById("andy"); 49 andy.appendChild(nodea); 50 andy.appendChild(nodeaa); 51 } 52 } 53 } 54 return false; 55 } 56 } 57 </script> 58 </head> 59 60 <body> 61 <a href="files/Ajax_json.js">andy</a> 62 <div id="andy"></div> 63 </body> 64 </html>
初学者，这些只是个人理解。
以上是关于Ajax的三种数据传输格式的主要内容，如果未能解决你的问题，请参考以下文章
图书管理的图书增删改查choices参数MTV与MVC模型多对多关系的三种创建方式Ajax操作前后端传输数据编码格式ajax发送json格式数据ajax发送文件django自带的序列化
图书管理的图书增删改查choices参数MTV与MVC模型多对多关系的三种创建方式Ajax操作前后端传输数据编码格式ajax发送json格式数据ajax发送文件django自带的序列化