Ajax的五种接受响应头消息（常用）二
我们引用一个问题来对Ajax的剩下来进行解释
服务端如何返回批量的复合数据给客户端？
1. text/plain
不用的弊端：不易开发者阅读，容易出错。
2. text/html
text/html响应头例题
3. application/xml
在学习xml之前我们得先了解xml（基本）
- 什么是xml?
XML 指可扩展标记语言（EXtensible Markup Language）。
XML 是一种很像HTML的标记语言。
XML 的设计宗旨是传输数据，而不是显示数据。
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准。
- XML 和 HTML 之间的差异
XML 不是 HTML 的替代。
XML 和 HTML 为不同的目的而设计：
XML 被设计用来传输和存储数据，其焦点是数据的内容。
HTML 被设计用来显示数据，其焦点是数据的外观。
HTML 旨在显示信息，而 XML 旨在传输信息。
- xml的语法
XML 文档必须有根元素
XML所有的 元素都必须有一个关闭标签
例子：<标签名>数据 ，<标签名/>XML 标签对大小写敏感
XML每个标签都可以任意定义字标签，标签可以嵌套，但不能交叉
XML 属性值必须加引号
基本了解xml后就可以运用xml响应格式了
服务端：header(“Content-Type:application/xml;charset=UTF-8”);
例子：
服务数据：
<?php
//数据（二维数组）
$gArr=[
['id'=>0,'userName'=>'张三','className'=>'软件一班'],
['id'=>1,'userName'=>'李四','className'=>'软件二班'],
['id'=>2,'userName'=>'王五','className'=>'软件三班'],
['id'=>3,'userName'=>'赵六','className'=>'软件四班'],
['id'=>4,'userName'=>'李七','className'=>'软件四班'],
];
服务端：
//响应头
header("Content-Type:application/xml;charset=UTF-8");
//引入数据
require('xml_data.php');
//XML格式 自定义标签
$str = "";
$str .= "" ;
foreach ($gArr as $value) {
$str .= "" ;
$str .= "$value[userName] ";
$str .= "$value[className] ";
$str .= "";
}
$str .= "";
echo $str;
//效果如下图
客户端：
<style>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
ul {
margin: 0 auto;
width: 500px;
list-style: none;
display: flex;
border: 1px solid;
flex-wrap: wrap;
}
ul li {
min-width: 160px;
flex: 1 1 160px;
}
.ul_head {
background-color: #ccc;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<ul class="ul_head">
<li>ID</li>
<li>姓名</li>
<li>班级</li>
</ul>
<ul class="ul_body">
<!-- 没有事给他个默认 -->
<li>暂且没有数据</li>
</ul>
<button type="button">添加数据</button>
</body>
<script>
//点击添加事件
document.querySelector("[type='button']").onclick = function () {
let ul_body = document.getElementsByClassName("ul_body")[0];
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
fun(xhr);
}
}
xhr.open("GET", "../php/smallwork/Ajax_xml.php");
xhr.send();
function fun(xhr) {
//这里使用querySelector是因为它可以操作XML树
let studengtList = xhr.responseXML;
let student = studengtList.querySelectorAll("student");
let iHTML = '';
// 循环数据
for (let i = 0; i < student.length; i++) {
let id = student[i]["id"];
let userName = student[i].querySelector("studentName").innerHTML;
let className = student[i].querySelector("studentClass").innerHTML;
iHTML = iHTML + `<li>${id}</li><li>${userName}</li><li>${className}</li>`;
}
ul_body.innerHTML = iHTML;
}
}
</script>
展示：
默认无数据时：
4.application/json
了解json
- 为什么使用json？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
使用 XML
读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中
使用 JSON
读取 JSON 字符串
用 eval() 处理 JSON 字符串
- json语法（关键）
json的语法与对象格式十分相像json的键必须使用双引号，而对象则不用
如下：
//json
let json={
"id":001,
"name":'xxx',
}
let obj={
id:001,
name:'xxx',
}
服务端：header(“Content-Type:application/json;charset=UTF-8”);
例子：这里使用与上篇博客text/html相同的例子
数据：
$gArr=[
['id'=>0,'userName'=>'张三','className'=>'软件一班'],
['id'=>1,'userName'=>'李四','className'=>'软件二班'],
['id'=>2,'userName'=>'王五','className'=>'软件三班'],
['id'=>3,'userName'=>'赵六','className'=>'软件四班'],
['id'=>4,'userName'=>'李七','className'=>'软件四班'],
];
服务端：
header("Content-Type:application/json;charset=UTF-8");
// 引用数据
require("xml_data.php");
$value = $_POST["value"];
//创建一个空数组
$arr = [];
if (strlen($value) > 0) {
//循环将响应的数据存入数组最后以json字符串的格式输出
for ($i = 0; $i < count($gArr); $i++) {
if (strtolower($value) == strtolower(substr($gArr[$i]["userName"], 0, strlen($value)))) {
$arr[] = $gArr[$i];
}
}
}
//将关联数组转换成json数据格式的字符串
echo json_encode($arr);
客户端：
<script>
document.querySelector("[name='textC']").onkeyup = function () {
let value = document.querySelector("[name='textC']").value;
let str = `value=${value}`;
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
fun(xhr);
}
}
xhr.open('POST', '../php/smallwork/Ajax_json.php');
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(str);
function fun(xhr) {
//将接收到的json字符串转换成json数据格式
let json = JSON.parse(xhr.responseText);
let string = ''
if (json) {
for (let i = 0; i < json.length; i++) {
string = string + `<li>${json[i]["userName"]}</li>`
wy.innerHTML = string;
}
}
//判断string是否为空
if (string != '') {
//有就添加显示类
wy.classList.add('active');
} else {
//则反
wy.classList.remove('active');
}
}
}
</script>
展示：
响应头查看：
以相同的步骤去查看下另外种响应消息头 - - - GO