PHP. 03 .ajax傳輸XML、 ajax傳輸json、封裝
阿新 • • 發佈：2017-05-22
格式 logs isp round list ati splay name ner 
XML簡介
XML 指可擴展標記語言 EXtensible Markup Language 。設計的時候是用來傳遞數據的，雖然格式跟HTML類似
xml示例
<?xml version="1.0" encoding="UTF-8"?> <singer> <name>Jay</name> <age>18</age> <skill>Sing</skill> </singer>
xml是純文本。xml是純文本，這點跟HTML很像，所以我們可以用任何的文本編輯軟件去打開編輯它
XML語法
雖然看起來跟
HTML類似,但是XML的語法有些需要註意的,更為詳細的可以查閱w3cschool_xml教程
XML聲明 第一行是XML的聲明，指定XML版本（1.0）以及使用的編碼（UTF-8萬國碼) ,文件類型為name.xml
<?xml version="1.0" encoding="UTF-8"?>
自定義標簽 XML 中沒有默認的標簽，所有的標簽都是我們定義者 自定義的
雙標簽 XML中沒有但標簽，都是雙標簽
根標簽 XML中必須有一個根節點，所有的子節點都放置在根節點下
<root>
<name></name>
</root>XML屬性 跟HTML一樣，XML的標簽裏面也能夠添加屬性type=‘text‘，但是不建議這樣用，而是使用標簽的方式來表述內容（下半部分代碼）
<!-- 使用屬性配合標簽表述信息 -->
<persion sex="female">
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</persion>
<!-- 使用標簽來表述信息 -->
<persion>
<sex>female</sex>
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>XML解析
因為 XML 就是標簽，所以直接用解析 Dom 元素的方法解析即可
html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{ margin: 100px auto; width: 400px; } td{ border: 1px solid #0094ff; } </style> </head> <body> <h1>ajax獲取 多個明星數據</h1> <input type="button" value="獲取男神們?" id=‘getStars‘> </body> </html> <script type="text/javascript"> // 綁定點擊事件 document.querySelector(‘#getStars‘).onclick = function () { var ajax = new XMLHttpRequest(); // post ajax.open(‘post‘,‘getStars.php‘); // 設置 請求的報文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 發送 ajax.send(); // 註冊事件 ajax.onreadystatechange = function () { if (ajax.readyState==4 && ajax.status==200) { // 知道返回的是 xml console.log(ajax.responseXML); // document對象哦 var persons = ajax.responseXML.querySelectorAll(‘person‘); console.log(persons); // 在循環之前 把table的 拼出來 var str =‘‘; // <table> str+=‘<table>‘; // 循環 獲取其中的某一個 for (var i = 0; i < persons.length; i++) { // 獲取 當前循環的那個person標簽對象 var currentPerson = persons[i]; // 獲取 其中的 每一個值 console.log(currentPerson.querySelector(‘name‘).innerHTML); console.log(currentPerson.querySelector(‘path‘).innerHTML); console.log(currentPerson.querySelector(‘skill‘).innerHTML); // 方法1 創建一個 table /* js創建dom元素 再添加 比較繁瑣 document.createElement(‘table‘).appendChild(); document.createElement(‘tr‘); document.createElement(‘td‘); */ // 直接 拼接出 一個 table的 字符串 然後 設置到頁面上即可 // 拼接開頭 str+=‘<tr>‘; str+=‘<td>‘+currentPerson.querySelector(‘name‘).innerHTML+‘</td>‘; // 這裏需要添加的是圖片 // str+=‘<td>‘+currentPerson.querySelector(‘path‘).innerHTML+‘</td>‘; str+=‘<td><img src="‘+currentPerson.querySelector(‘path‘).innerHTML+‘"></td>‘; str+=‘<td>‘+currentPerson.querySelector(‘skill‘).innerHTML+‘</td>‘; // 再次添加一個td str+=‘<td><a href="#">點擊了解更多_‘+currentPerson.querySelector(‘name‘).innerHTML+‘</a></td>‘; // 拼接結尾 str+=‘</tr>‘; } // 循環完畢以後 將table 合並 // </table> str+=‘</table>‘; // 測試 拼接的 內容 是否正確 console.log(str); // 直接 添加到頁面上 document.body.innerHTML = str; } } } </script>html代碼
php代碼
在php中如果要使用xml傳輸數據，需要使用header()設置返回的內容為xml
<?php // 設置返回的是xml header(‘content-type:text/xml; charset=utf-8‘) ; // 讀取並返回 oh -yeah echo file_get_contents( ‘starList.xml); ?>
XML文件
<?xml version="1.0" encoding="UTF-8"?> <stars> <person> <name>蓋倫</name> <path>images/hzt.jpg</path> <skill>轉圈</skill> </person> <person> <name>趙信</name> <path>images/xy.jpg</path> <skill>爆菊花</skill> </person> </stars>
JSON語法
JSON( JavaScript Object Notation ) 是 ECMAScript 的子集，作用是進行數據的交換，而且由於語法更為簡潔，網絡傳輸、解析都更為迅速 文件名類型為 name.json
語法規則：
對象 使用{}包裹
數組 使用[]包裹
屬性名 使用雙引號包裹
屬性名 跟屬性值之間 使用冒號分割
屬性值 也必須使用雙引號包裹(數字可以不包裹)
數據類型：
下列內容無論鍵、值 都是用雙引號包起來
數字(整數或浮點數)／字符串(在雙引號中)／邏輯值(true/false)／數組(在方括號中)／對象(在花括號中)／null
示例代碼：
// 基本對象
{
"name":"fox",
"age":"18 ",
"sex":"true",
"car":"null"
}
// 數組
[
{
"name":"小小",
"age":"1"
},
{
"name":"大大",
"age":"2"
}
]
JSON 解析
JavaScript使用JSON對象
JSON.parse()方法：將JSON字符串轉化為JavaScript對象 需要接收
JSON.stringify()方法：將JavaScript對象，轉化為JSON字符串 需要接收
IE（8以下）瀏覽器中沒有 JSON 對象，通過導入 JSON2.js 框架即可解決，框架獲取地址JSON2.js_github地址
<script type="text/javascript"> var obj = { name:"fox", age:18, skill:"撩妹" };
console.log( "原生形式"+obj); //將javaScript對象格式化為JSON字符串 var jsonStr = JSON.stringify(obj); console.log("我是json字符串"+jsonStr);
// 將JSON字符串 格式化為javaScript對象
var jsonObj = JSON.parse(jsonStr);
console.log("我是javaScript對象+jsonObj ");
</script>
使用eval() 方法將 json字符串 轉化為 javaScript對象
需要將內容使用（）括號包裹起來，
var jsonStr1 = ‘{ "name":"fox","age":18,"skill":"撩妹" }‘ ;
var jsonObj = eval(‘(‘+jsonStr1+‘)‘);
console.log(jsonObj);
console.log(jsonObj.name);
json_decode() ： 將json字符串 轉化為變量
json_encode() : 將變量轉化為‘json’字符串
<?php
header("Content-Type:text/html;charset=utf-8");
// json字符串
$jsonStr = ‘{"name":"itcast","age":54,"skill":"Singing"}‘;
// 字符串轉化為php對象
print_r(json_decode($jsonStr));
echo ‘<br>‘;
// php數組
$arrayName = array(‘name‘=>‘littleFox‘,‘age‘=>12);
// php對象轉化為json字符串
print_r(json_encode($arrayName));
使用例子：
json：
[
{
"name":"jay",
"skill" :"singing",
"path" :"images/jay.jpg"
}
{
"name":"ED",
"skill" :"singing",
"path" :"images/ed.jpg"
}
]
php:
<?php echo file_get_contents(‘info/stars.json); ?>
html:
<body> <input type="button" value="獲取" id=‘getStars‘> </body> <script type="text/javascript"> document.querySelector("#getStars").onclick = function(){ var ajax = new XMLHttpRequest() ; ajax.open(‘post‘,‘getStars.php‘); ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); ajax.send(); ajax.onreadystatechange = function(){ if(ajax.readystate ==4 && ajax.status==200){ // 轉化為js對象，不光是數組還是對象都可以使用該方法轉化 var strArr = JSON.parse(ajax.responseText); // 這裏也方法哦一個table中 var str=""; str+=‘<table>‘ for(var i=0;i<strArr.length;i++){ str+=‘<tr>‘; str+=‘<td>‘ +strArr[i].name+‘</td>‘. ; str+=‘<td>‘ +strArr[i].skill +‘</td>‘. ; str+=‘<td><img src="‘+strArr[i].path+‘"></td‘; str+=‘</tr>‘; } document.body.innerHtml = str ; } } </script>
封裝一下
// ajax get 五部曲 function ajax_get(url,data) { // 異步對象 var ajax = new XMLHttpRequest(); // url 方法 // 如果是get發送數據 發送的格式為 xxx.php?name=jack&age=18 // 所以 這裏 需要拼接 url if (data) { // 如果有值 需要拼接字符串 // 拼接為xxx.php?name=jack&age=18 url+=‘?‘; url+=data; }else{ } ajax.open(‘get‘,url); // 發送 ajax.send(); // 註冊事件 ajax.onreadystatechange = function () { // 在事件中 獲取數據 並修改界面顯示 if (ajax.readyState==4&& ajax.status==200) { console.log(ajax.responseText); } } } // ajax_post五部曲 function ajax_post(url,data) { // 異步對象 var ajax = new XMLHttpRequest(); // url 方法 ajax.open(‘post‘,url); // 設置 請求報文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 發送 if (data) { // 如果 有值 post請求 是在 send中 發送給服務器 ajax.send(data); }else{ ajax.send(); } // 註冊事件 ajax.onreadystatechange = function () { // 在事件中 獲取數據 並修改界面顯示 if (ajax.readyState==4&&ajax.status==200) { console.log(ajax.responseText); } } } // 將 get 跟post 封裝到一起 /* 參數1:url 參數2:數據 參數3:請求的方法 參數4:數據成功獲取以後 調用的方法 */ function ajax_tool(url,data,method,success) { // 異步對象 var ajax = new XMLHttpRequest(); // get 跟post 需要分別寫不同的代碼 if (method==‘get‘) { // get請求 if (data) { // 如果有值 url+=‘?‘; url+=data; }else{ } // 設置 方法 以及 url ajax.open(method,url); // send即可 ajax.send(); }else{ // post請求 // post請求 url 是不需要改變 ajax.open(method,url); // 需要設置請求報文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 判斷data send發送數據 if (data) { // 如果有值 從send發送 ajax.send(data); }else{ // 木有值 直接發送即可 ajax.send(); } } // 註冊事件 ajax.onreadystatechange = function () { // 在事件中 獲取數據 並修改界面顯示 if (ajax.readyState==4&&ajax.status==200) { // console.log(ajax.responseText); // 將 數據 讓 外面可以使用 // return ajax.responseText; // 當 onreadystatechange 調用時 說明 數據回來了 // ajax.responseText; // 如果說 外面可以傳入一個 function 作為參數 success success(ajax.responseText); } } }
使用代碼：
get方式：
php：
<?php // 獲取get提交的數據 echo $_GET[‘skill‘]; ?>
html：
<body> <input type="button" value="測試get" id=‘ajax_get‘> </body> </html> <!-- 導入 封裝的js --> <script type="text/javascript" src=‘ajax_tool.js‘></script> <script type="text/javascript"> document.querySelector(‘#ajax_get‘).onclick = function () { // 直接使用 封裝的 工具函數即可 /* 參數1:url 參數2:數據 參數3:請求的方法 */ var backData = ajax_tool(‘01.test_get.php‘,‘name=huluw&skill=saveyeye‘,‘get‘,function(data){ console.log(data); }); // 測試 console.log(backData); } </script>
post方式：
php：
<?php echo $_POST[‘friend‘]; ?>
html：
<body> <input type="button" value="測試post" id=‘ajax_post‘> </body> </html> <!-- 導入 封裝的js --> <script type="text/javascript" src=‘ajax_tool.js‘></script> <script type="text/javascript"> document.querySelector(‘#ajax_post‘).onclick = function () { // 直接使用 封裝的 工具函數即可 /* 參數1:url 參數2:數據 參數3:請求的方法 參數4:數據獲取成功調用的方法 */ var backData = ajax_tool(‘02.test_post.php‘,‘friend=好麗友‘,‘post‘,function(data){ console.log(data+"---dddd-----"); }); // 測試 console.log(backData+"我是backdata"); // 怎麽樣 處理數據 全部寫在 匿名函數中 ajax_tool(‘02.test_post.php‘,‘friend=好麗友‘,‘post‘,function(data){ console.log(data+"我是ajax_tool"); // 修改頁面的顯示呢? }); } </script>
PHP. 03 .ajax傳輸XML、 ajax傳輸json、封裝