Ajax的三種數據傳輸格式
阿新 • • 發佈：2017-08-10
page 操作dom window 文本 value lte innerhtml erp 原生
首先說一下什麽是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的三種數據傳輸格式