Ajax資料傳遞的方式-伺服器->前端 JSON+XML
阿新 • • 發佈：2018-12-12
一、JSON
1.js物件、陣列
javaScript Object Notation: JS物件表示法，以JS物件的方式表示字串
js用{}表示一個物件,用:賦值
var fb={
yu:21,//用:賦值
shu:33.
ying:66
}js的陣列物件：
var star=[
{height:21, gender:"女"},
{height:88, gender:"男"}
]2.json物件
語法：
- 用一對{}表示物件
- 物件的屬性必須用""引起來，值是字串的也必須用""引起來
- 屬性和值用:連線
- 多對屬性之間用，隔開
3.json陣列
普通陣列：
'["楊冪","fbb"]'物件陣列：
'[
{"height":50,"weight":30},
{"height":50,"weight":30}
]'JSON檔案：檔案中全是字串，陣列的[]外邊不需要加引號，檔案中的資料，必須符合JSON格式的字串
[
{"height":121,"weight":50,"gender":"女"},
{"height":122,"weight":51,"gender":"女"},
{"height":123,"weight":52,"gender":"女"}
]4.將JSON檔案轉成JS的物件/陣列
方法一：eval()函式（不推薦）
var p = '{"name":"ll","age":23}';
var obj = eval("("+p+")");//必須用括號包起來方法二：JSON.parse();將json檔案解析成JS的物件或者陣列
5.php中將陣列轉成JSON格式字串
一維、二維、關聯陣列等轉成JSON字串
json_encode($array);
服務端響應回的是json格式，需要增加響應訊息頭
header("Content-Type:application/json");
<?php #宣告一個數組並且初始化三個省份的資訊 header("Content-Type:application/json"); $city = ["黑龍江","吉林","遼寧"]; // #遍歷陣列拼接字串 // $opts =""; // for($i=0;$i<count($city);$i++) // { // $opts.="<option value='$i'>$city[$i]</option>"; // } // #將生成的字串響應給客戶端 // echo $opts; #json檔案 echo json_encode($city); ?>
案例：接收json檔案並輸出Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>關聯select+省份市級+json</title>
<script src="common.js"></script>
<script>
function selPro()
{
var xhr = createXhr();
//此處必須同步，必須載入完 才載入一下函式
//確認載入完省份資訊之後，再載入市級資訊
xhr.open("get","day03-test.php",false);
xhr.onreadystatechange = function()
{
if (xhr.readyState==4&&xhr.status==200)
{
//將json檔案 轉成陣列
var province = JSON.parse(xhr.responseText);
//遍歷迴圈
var opt="";
for (var i = 0; i < province.length; i++)
{
//拼接的i不能使用字串""引起來
opt+="<option"+" "+"value="+i+">"+province[i]+"</option>";
}
$("selProvince").innerHTML = opt;
}
}
xhr.send(null);
}
//載入城市資訊
function loadCity()
{
var xhr = createXhr();
var index = $("selProvince").value;
var url = "day03-test2.php?value="+index;
xhr.open("get",url,true);
xhr.onreadystatechange = function()
{
if (xhr.readyState==4&&xhr.status==200)
{
var city1 = JSON.parse(xhr.responseText);
var opt="";
for (var i = 0; i < city1.length; i++)
{
//拼接的i不能使用字串""引起來
opt+="<option"+" "+"value="+i+">"+city1[i]+"</option>";
}
$("city").innerHTML = opt;
}
}
xhr.send(null);
}
function pageLoad()
{
selPro();
loadCity();
}
</script>
</head>
<body onload="pageLoad()">
<select id="selProvince" onchange="loadCity()">
</select>
<select id="city"></select>
</body>
</html>php檔案
<?php
#宣告一個數組並且初始化三個省份的資訊
header("Content-Type:application/json");
$city = ["黑龍江","吉林","遼寧"];
// #遍歷陣列拼接字串
// $opts ="";
// for($i=0;$i<count($city);$i++)
// {
// $opts.="<option value='$i'>$city[$i]</option>";
// }
// #將生成的字串響應給客戶端
// echo $opts;
#json檔案
echo json_encode($city);
?>二、XML
eXtensible Markup Lauguage : 可擴充套件的標記語言
XML的標記沒有預定義，需要自行定義，中文、英文均可
XML的宗旨是傳遞資料，不是現實資料
1.語法規範:
獨立的XML檔案，或者字串的形式
格式：<?xml version = "1.0" encoding ="utf-8"?>
標記語法：
- xml的標記都是成對出現的
- xml的標記，嚴格區分大小寫
- 標記允許被巢狀
- 每個標記可以自定義屬性，格式等同html,屬性必須使用“”包裹
- 有且只有一個根元素
<?xml version="1.0" encoding="utf-8" ?>
<studentList>
<student>
<name>張三</name>
<age>13</age>
<gender>男</gender>
</student>
<student>
<name>李四</name>
<age>15</age>
<gender>男</gender>
</student>
<student>
<name>王五</name>
<age>19</age>
<gender>男</gender>
</student>
</studentList>2.使用Ajax請求XML檔案
①：四步：建立xhr,建立請求，設定回撥函式，傳送請求
第二步建立請求時:url改成xml結尾的檔案即可
第三步回撥函式使用 responseXML接收檔案
xhr.open("get","student.xml",true);
var res = xhr.responseXML;②：解析XML檔案
elem.getElementsByTagName("標籤名");
函式返回一個類陣列，elem：表示的是取值範圍
var xmlDoc = xhrresponseXML;
var students = xmlDoc.getElementsByTagName("student");//返回一個類陣列
//列印輸出
for(var i=0;i<students.length;i++){
var stu = students[i];
var name = stu.getElementsByTagName("name")[0];
}students及stu及name元素（未取下表[0]時）
所以 stu.getElementsByTagName("name")[0] 取得時name裡面的值
③：php檔案中，返回xml格式
按照xml的格式，拼接字串，響應給客戶端
同json格式一個，需要設定響應訊息頭：
header("Content-Type:application/xml");
Ajax讀取XML檔案案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XML請求資料</title>
<script src="../day01-03/common.js"></script>
<script>
function loadStu()
{
var xhr = createXhr();
xhr.open("get","student.xml",true);
xhr.onreadystatechange=function()
{
if (xhr.readyState==4&&xhr.status==200)
{
var res = xhr.responseXML;
//返回的是類陣列
var students=res.getElementsByTagName("student");
console.log(students);
for (var i = 0; i < students.length; i++)
{
var stu = students[i];
console.log(stu);
console.log(stu.getElementsByTagName("name"));
//name中儲存的是一個name元素集
var name = stu.getElementsByTagName("name")[0];
var age = stu.getElementsByTagName("age")[0];
var gender = stu.getElementsByTagName("gender")[0];
console.log("姓名："+name.innerHTML);
console.log("年齡："+age.innerHTML);
console.log("性別："+gender.innerHTML);
}
}
}
xhr.send(null);
}
</script>
</head>
<body onload="loadStu()">
</body>
</html><?xml version="1.0" encoding="utf-8" ?>
<studentList>
<student>
<name>張三</name>
<age>13</age>
<gender>男</gender>
</student>
<student>
<name>李四</name>
<age>15</age>
<gender>男</gender>
</student>
<student>
<name>王五</name>
<age>19</age>
<gender>男</gender>
</student>
</studentList>