json和xml以及ajax的數據格式用法

時間  2019-11-08
標籤 json xml 以及 ajax 數據 格式 用法 欄目 JavaScript 简体版
原文   原文鏈接
JSON的兩個方法：
1.將字符串轉換爲JSON格式：parse().
2.將原生JavaScript值轉換爲JSON字符串：stringify(); 
 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8">
 5 <title>json數據</title>
 6 </head>
 7 <body>
 8 </body>
 9 <scripttype="text/javascript">
10 // json數據裏面能夠包含json數據
11 var json ={
12 "id":8,
13 "name":"小明",
14 "age":18,
15 "scroce":[99,35,12,45],
16 "message":{
17 marry:"no",
18 son:"yes",
19 }
20 }
21 // 字符串的json格式
22 var string ="{'id':8,'name':'小明'}";
23 // 若是使用JSON.parse(string);//會報錯
24 var str ='{"id":8,"name":"小明"}';// json轉換數據的字符串必須是（單引套雙引）
25 // 注意：鍵值key要用雙引號引發來（單引套雙引）
26 // 例如：
27 var person='{"name" : "aaa","age" : 11}';
28 // 1.parse()方法把字符串轉成JSON格式
29 var json = JSON.parse(str);
30 var json =eval(str);//這種方法既不安全，可能會執行一些惡意代碼。
31 // 2.stringify()方法第一個參數是一個數組，第二個參數是一個函數，第三個參數則表示是否在JSON字符串中保留縮進。
32 var str= JSON.stringify(json,function,num);//轉換成JSON字符串
33 // PHP中的轉化方法：
34 // json_encode()就是將PHP數組轉換成Json。
35 // json_decode()就是將Json轉換成PHP數組。
36 // json格式
37 var person='{"name":"小明","age":11,"sex":"男"}';
38 // 字符串
39 var string1 ="{'name':'小明','age':11,'sex':'男'}"
40 var string2 ='{"name":"小明","age":11,"sex":"男"}';
41 // 1.實現將字符串轉化成JSON格式
42 JSON.parse(string1);//報錯
43 JSON.parse(string2);//Object {name: "小明", age: 11, sex: "男"};
44 // 2.實現將JSON格式數據轉化成字符串
45 console.log(JSON.stringify(person));//"{\"name\":\"小明\",\"age\":11,\"sex\":\"男\"}";
46 // 3.三個參數
47 // 第一個參數：json格式數據
48 // 第二個數據：對這個json數據進行處理的函數
49 // 第三個參數：縮進
50 var string3 = JSON.parse(person,function(k,v){
51 // console.log(k,v);//{"name":"小明","age":11,"sex":"男"}
52 // k,v對應的是person裏面的鍵值對值
53 // 匹配處理
54 switch(k){
55 case"name":
56 return"姓名"+v;
57 break;
58 case"age":
59 return"年齡"+v;
60 break;
61 case"sex":
62 return"性別"+v;
63 break;
64 default:
65 return v;
66 }
67 },2);
68 console.log(string3);// Object {name: "姓名小明", age: "年齡11", sex: "性別男"};
69 </script>
70 </html>
XML的數據格式：
1.XML 被設計用來傳輸和存儲數據。
2.HTML 被設計用來顯示數據。
3.XML和JSON都使用結構化方法來標記數據.
4.什麼是 XML？
XML 指可擴展標記語言（EXtensible Markup Language）
XML 是一種標記語言，很相似 HTML
XML 的設計宗旨是傳輸數據，而非顯示數據
XML 標籤沒有被預約義。您須要自行定義標籤。
XML 被設計爲具備自我描述性。
XML 是 W3C 的推薦標準
下面會舉個例子：
獲取xml文件裏的數據
// 城市
// (省級)廣東省->(市級)廣州、..........
 
關於 AJAX：
1.AJAX是什麼？
AJAX ： 異步 JavaScript and XML
通俗的講，AJAX就是JS經過一個網址去加載數據，這個過程一般是用戶不可見的。
    
    
 
傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。 
        AJAX加載過來的數據，哪些是JS能直接處理的？（
HTML CSS JS TEXT PNG）
2.
AJAX的優點：
1.異步加載數據，無需切換頁面
2.更佳的用戶體驗：局部刷新、及時驗證、操做步驟簡化等
3.節省流量
4.JS控制數據的加載，更加靈活多用
3. 那麼AJAX如何使用？
          XMLHttpRequest() 可擴展超文本傳輸請求
          
3.1 建立一個對象
全部現代瀏覽器均支持 XMLHttpRequest 對象
（IE5 和 IE6 使用 ActiveXObject("Microsoft.XMLHTTP");
          
3.2 open(method,url,bol)
method 參數是用於請求的 HTTP 方法。GET、POST
POST：用"POST"方式發送數據,能夠大到4MB
用POST須要設置編碼格式
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                     
GET：用"GET"方式發送數據,只能256KB        
  
                
url 參數是請求的主體。大多數瀏覽器實施了一個同源安全策略，而且要求這個 
                             
URL 與包含腳本的文本具備相同的主機名和端口。
 
bol 若是這個參數是 false，請求是同步的
若是這個參數是 true 或省略，請求是異步的
    
              
3.3 send(data)發送請求
 
            
3.4 onreadystatechange事件 服務器響應
 
readyState與status:
                    
readyState有五種狀態：
 
　　0 (未初始化)：
(XMLHttpRequest)對象已經建立，但尚未調用open()方法；
　　1 (載入)：
已經調用open() 方法，但還沒有發送請求；
　　2 (載入完成)：
請求已經發送完成；
　　3 (交互)：
能夠接收到部分響應數據；
　　4 (完成)
：已經接收到了所有數據，而且鏈接已經關閉。
         如此一來，你應該就能明白readyState的功能，而status實際是一種輔狀態判斷，只是status更可能是服務器方的狀態判斷。關於status，因爲它的狀態有幾十種，我只列出平時經常使用的幾種：
　　100——客戶必須繼續發出請求
　　101——客戶要求服務器根據請求轉換HTTP協議版本
　　200——成功
　　201——提示知道新文件的URL
　　300——請求的資源可在多處獲得
　　301——刪除請求數據
　　404——沒有發現文件、查詢或URl
　　500——服務器產生內部錯誤
 
             3.5 獲取數據
    
responseText得到 字符串形式的響應數據。
    
responseXML得到 XML 形式的響應數據。
案例：
在頁面佈局
<h1>省份</h1>
<ul>
<li>城市1</li>
<li>城市2</li>
<li>城市3</li>
<li>城市4</li>
</ul>
添加一個button按鈕：<button>加載XML數據</button>
當點擊按鈕的時候，把？？.xml裏面的數據加載到頁面中
html： 
 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8">
 5 <title>ajax_get</title>
 6 </head>
 7 <body>
 8 <h1>省份</h1>
 9 <ul>
10 <li>城市1</li>
11 <li>城市2</li>
12 <li>城市3</li>
13 <li>城市4</li>
14 </ul>
15 <button>加載XML數據</button>
16 </body>
17 <scripttype="text/javascript">
18 // 獲取按鈕
19 var btn = document.querySelector("button");
20 var h1 = document.querySelector("h1");
21 var lis = document.querySelectorAll("li");
22 // 1.建立對象
23 var xmlhttp ;//自定義對象
24 // 考慮兼容性寫法IE5/6
25 // 判斷瀏覽器是否支持XMLHttpRequest();
26 if(XMLHttpRequest){
27 // 非IE5/6
28 xmlhttp =newXMLHttpRequest();
29 }else{
30 // IE5/6
31 xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
32 }
33 // js中添加綁定事件addEventListener();
34 // 添加點擊事件
35 btn.onclick =function(){
36 // 使用open(data)設置請求參數
37 // open(method,url,bol);
38 xmlhttp.open("GET","2-city.xml",true);
39 // 使用send發送請求
40 xmlhttp.send();
41 }
42 // 響應服務器
43 // 給xmlhttp對象添加onreadystatechange事件
44 xmlhttp.onreadystatechange =function(){
45 // 兩類，1.readyState與status
46 // 要判斷服務器有沒有異常
47 /*console.log("readyState",xmlhttp.readyState);
48 console.log("status",xmlhttp.status);*/
49 if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
50 // 接受服務器端的數據
51 // xml,返回XML數據格式
52 // responseText    得到字符串形式的響應數據。
53 // responseXML    得到 XML 形式的響應數據。
54 var dataXML = xmlhttp.responseXML;
55 console.log(dataXML);
56 /*-------------處理數據怎麼處理--------------*/
57 // 獲取XML文檔裏面name標籤的內容
58 var name = dataXML.getElementsByTagName("name")[0].innerHTML;
59 console.log(name);
60 h1.innerText = name;
61 // 替換城市內容
62 var citys = dataXML.getElementsByTagName("city");
63 document.querySelector("ul").innerHTML ="";
64 for(var i=0;i<citys.length;i++){
65 var li = document.createElement("li");
66 li.innerText = citys[i].innerHTML;
67 document.querySelector("ul").appendChild(li);
68 }
69 }
70 }
71 </script>
72 </html>

 

xml： 
 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <province>
 3 <name>廣東省</name>
 4 <citys>
 5 <city>廣州</city>
 6 <city>深圳</city>
 7 <city>東莞</city>
 8 <city>惠州</city>
 9 <city>湛江</city>
10 <city>佛山</city>
11 </citys>
12 </province>
效果：
 AJAX獲取txt文件數據：
html: 
 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Document</title>
 6 </head>
 7 <body>
 8 <label>
 9 姓名：<span>XXX</span>
10 </label>
11 <label>
12 年齡：<span>XXX</span>
13 </label>
14 <button>獲取數據</button>
15 </body>
16 <scripttype="text/javascript">
17 var btn = document.querySelector("button");
18 var span = document.querySelectorAll("span");
19 var xmlhttp ;
20 if(XMLHttpRequest){
21 // 非IE5/6
22 xmlhttp =newXMLHttpRequest();
23 }else{
24 // IE5/6
25 xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
26 }
27 btn.onclick =function(){
28 // 使用open(data)設置請求參數
29 // open(method,url,bol);
30 xmlhttp.open("GET","get.txt",true);
31 // 使用send發送請求
32 xmlhttp.send();
33 }
34 xmlhttp.onreadystatechange =function(){
35 if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
36 // 獲取字符串
37 var data = xmlhttp.responseText;
38 // 把字符串轉換成json格式object對象
39 var str1 = JSON.parse(data);
40 // console.log(str1);
41 // console.log(dataXML);
42 var name = str1.name;
43 var age = str1.age;
44 // console.log(name);
45 span[0].innerText = name;
46 span[1].innerText = age;
47 }
48 }
49 </script>
50 </html>
View Code
txt:
{"name":"小明","age":18}
效果：
 
AJAX獲取PHP文件數據：
$_GET獲取方式： 
 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Document</title>
 6 </head>
 7 <body>
 8 <!-- <form action="" method=""> -->
 9 <!-- <label> -->
10 姓名：<inputtype="text"name="user">
11 <!-- </label> -->
12 <!-- <label> -->
13 年齡：<inputtype="text"name="age">
14 <!-- </label> -->
15 <inputtype="button"value="輸入">
16 <!-- </form> -->
17 <divstyle="border:1px solid red;padding:30px">
18 <h2>你的信息：</h2>
19 <p>XXX</p>
20 <p>XXX</p>
21 </div>
22 </body>
23 <scripttype="text/javascript">
24 var btn = document.querySelector("input[type=button]");
25 var input = document.querySelectorAll("input[type=text]");
26 var p = document.querySelectorAll("p");
27 var xmlhttp ;
28 if(XMLHttpRequest){
29 // 非IE5/6
30 xmlhttp =newXMLHttpRequest();
31 }else{
32 // IE5/6
33 xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
34 }
35 btn.onclick =function(){
36 var value1 = input[0].value;
37 var value2 = input[1].value;
38 // 使用open(data)設置請求參數
39 // open(method,url,bol);
40 // get獲取類型：獲取字符在url後面加上"xxx.php?name" +value1+ "&age=" +value2
41 xmlhttp.open("GET","5-ajax-get-php.php?name="+value1+"&age="+value2,true);
42 // 使用send發送請求
43 xmlhttp.send();
44 }
45 // 接收服務器響應的數據
46 xmlhttp.onreadystatechange =function(){
47 if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
48 var data = xmlhttp.responseText;// 獲取的是字符串
49 console.log(data);
50 var str = JSON.parse(data);
51 p[0].innerText = str.name;
52 p[1].innerText = str.age;
53 }
54 }
55 </script>
56 </html>
View Code

 

PHP： 
 1 <?php
 2 // 接受前端數據
 3 $name = $_GET['name'];
 4 $age = $_GET['age'];
 5 /*
 6 -------------------鏈接數據庫，sql語句，執行----------------------
 7 */
 8 // 能夠用echo輸出
 9 echo '{"name":"姓名:'.$name.'","age":"年齡:'.$age.'"}';
10 // 須要特別注意單引號套雙引號在套單引號，.$name.和.$age.用單引號套，由於PHP用點（.）鏈接字符；
11 /*'{"name":"姓名:' .$name. '","age":"年齡:' .$age. '"}'*/
12 ?>
View Code

 

效果：
 
AJAX獲取PHP文件數據：
$_POST獲取方式：
跟$GET獲取方式基本一致
只是post須要設置編碼格式：
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
是
用s
end發送請求：
xmlhttp.send("name="   +value1+  "&age="  +value2);
HTML: 
 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Document</title>
 6 </head>
 7 <body>
 8 <!-- <form action="" method=""> -->
 9 <!-- <label> -->
10 姓名：<inputtype="text"name="user">
11 <!-- </label> -->
12 <!-- <label> -->
13 年齡：<inputtype="text"name="age">
14 <!-- </label> -->
15 <inputtype="button"value="輸入">
16 <!-- </form> -->
17 <divstyle="border:10px solid red;padding:30px">
18 <h2>你的信息：</h2>
19 <p>XXX</p>
20 <p>XXX</p>
21 </div>
22 </body>
23 <scripttype="text/javascript">
24 var btn = document.querySelector("input[type=button]");
25 var input = document.querySelectorAll("input[type=text]");
26 var p = document.querySelectorAll("p");
27 var xmlhttp ;
28 if(XMLHttpRequest){
29 // 非IE5/6
30 xmlhttp =newXMLHttpRequest();
31 }else{
32 // IE5/6
33 xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
34 }
35 btn.onclick =function(){
36 var value1 = input[0].value;
37 var value2 = input[1].value;
38 // 使用open(data)設置請求參數
39 // open(method,url,bol);
40 xmlhttp.open("POST","6-ajax-get-php.php",true);
41 // 設置編碼格式
42 xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
43 // 使用send發送請求
44 xmlhttp.send("name="+value1+"&age="+value2);
45 }
46 xmlhttp.onreadystatechange =function(){
47 if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
48 var data = xmlhttp.responseText;
49 console.log(data);
50 var str = JSON.parse(data);
51 p[0].innerText = str.name;
52 p[1].innerText = str.age;
53 }
54 }
55 </script>
56 </html>
View Code

 

PHP： 
 1 <?php
 2 // 接受前端數據
 3 $name = $_POST['name'];
 4 $age = $_POST['age'];
 5 /*
 6 -----鏈接數據庫，sql語句，執行-----
 7 */
 8 // 能夠用echo輸出
 9 echo '{"name":"姓名:'.$name.'","age":"年齡:'.$age.'"}';
10 /*'{"name":"姓名:' .$name. '","age":"年齡:' .$age. '"}'*/
11 ?>
View Code

 

效果：
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程