webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: Ajax

Browse Source
This commit is contained in:
qianguyihao 2021-05-19 00:10:08 +08:00
parent 1e775ba3e7
commit 050ff8ae45
3 changed files with 509 additions and 497 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

673
05-JavaScript基础：异步编程和Ajax/02-Ajax入门和发送http请求.md
View File

@ -1,19 +1,16 @@
## 同步和异步回顾 ## 同步和异步回顾
### 同步和异步的简单理解 ### 同步和异步的简单理解
- 同步：必须等待前面的任务完成，才能继续后面的任务。
- 同步：必须等待前面的任务完成，才能继续后面的任务。 - 异步：不受当前任务的影响。
- 异步：不受当前任务的影响。
拿排队举例： 拿排队举例：
- 同步：在银行排队时，只有等到你了，才能够去处理业务。 - 同步：在银行排队时，只有等到你了，才能够去处理业务。
- 异步：在排队的时候，可以玩手机。 - 异步：在排队的时候，可以玩手机。
### 异步更新网站 ### 异步更新网站
@ -23,11 +20,9 @@
试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要重新刷新，体验就太糟糕了。 试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要重新刷新，体验就太糟糕了。
web前端里的异步更新，就要用到 Ajax。很多人说，如果没有 Ajax，就没有互联网的今天。 web 前端里的异步更新，就要用到 Ajax。很多人说，如果没有 Ajax，就没有互联网的今天。
关于同步和异步的更详细介绍，可以参考本项目的另外一篇文章：《05-JavaScript基础：异步编程和Ajax/01-单线程和异步》
关于同步和异步的更详细介绍，可以参考本项目的另外一篇文章：《05-JavaScript 基础：异步编程和 Ajax/01-单线程和异步》
## Ajax ## Ajax
@ -37,80 +32,127 @@ web前端里的异步更新，就要用到 Ajax。很多人说，如果没有 Aj
Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：**XMLHttpRequest**。 Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：**XMLHttpRequest**。
### Ajax原理（发送 Ajax 请求的五个步骤） ### Ajax 原理（发送 Ajax 请求的五个步骤）
> 其实也就是 使用 XMLHttpRequest 对象的五个步骤。 > 其实也就是 使用 XMLHttpRequest 对象的五个步骤。
我们先回忆一下，一个完整的HTTP请求需要的是： 我们先回忆一下，一个完整的 HTTP 请求需要的是：
- 请求的网址、请求方法get/post。 - 请求的网址、请求方法 get/post。
- 提交请求的内容数据、请求主体等。 - 提交请求的内容数据、请求主体等。
- 接收响应回来的内容。 - 接收响应回来的内容。
发送 Ajax 请求的五个步骤： 发送 Ajax 请求的五个步骤：
（1）创建异步对象，即 XMLHttpRequest 对象。 （1）创建异步对象，即 XMLHttpRequest 对象。
（2）使用open方法设置请求参数。`open(method, url, async)`。参数解释：请求的方法、请求的url、是否异步。 （2）使用 open 方法设置请求参数。`open(method, url, async)`。参数解释：请求的方法、请求的 url、是否异步。第三个参数如果不写，则默认为 true。
（3）发送请求：`send()`。 （3）发送请求：`send()`。
（4）注册事件：注册onreadystatechange事件，状态改变时就会调用。 （4）注册事件：注册 onreadystatechange 事件，状态改变时就会调用。
如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。 如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
（5）服务端响应，获取返回的数据。 （5）服务端响应，获取返回的数据。
### Ajax 请求：get 请求举例 ## 手写 Ajax
### 手写第一个 Ajax 请求
get 请求：
```js
//【发送ajax请求需要五步】
//（1）创建XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();
//（2）设置请求的参数。包括：请求的方法、请求的url。
xmlhttp.open('get', '02-ajax.php');
//（3）发送请求
xmlhttp.send();
//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
xmlhttp.onreadystatechange = function () {
// 为了保证 数据 完整返回，我们一般会判断 两个值
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 如果能够进入这个判断，说明数据请求成功了
//（5）服务端相应：在注册的事件中，获取返回的内容，并显示在页面上
console.log('数据返回成功');
// 数据是保存在 异步对象的 属性中
console.log(JSON.stringify(xmlhttp.responseText));
}
};
```
post 请求：
```js
//（1）异步对象
var xmlhttp = new XMLHttpRequest();
//（2）设置请求参数。包括：请求的方法、请求的url。
xmlhttp.open('post', '02.post.php');
// 如果想要使用post提交数据,必须添加此行
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//（3）发送请求
xmlhttp.send('name=fox&age=18');
//（4）注册事件
xmlhttp.onreadystatechange = function () {
//（5）服务端相应
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
};
```
### 封装Ajax请求（重要）
todo
## Ajax 请求举例
### Ajax 请求：get 请求举例
（1）index.html： （1）index.html：
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<h1>Ajax 发送 get 请求</h1> <h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'> <input type="button" value="发送get_ajax请求" id="btnAjax" />
<script type="text/javascript"> <script type="text/javascript">
// 绑定点击事件 // 绑定点击事件
document.querySelector('#btnAjax').onclick = function () { document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步 // 发送ajax 请求需要五步
var xmlhttp = new XMLHttpRequest();
// （1）创建XMLHttpRequest对象 xmlhttp.open('get', '02-ajax.php');
var xmlhttp = new XMLHttpRequest(); xmlhttp.send();
xmlhttp.onreadystatechange = function () {
// （2）设置请求的参数。包括：请求的方法、请求的url。 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
xmlhttp.open('get', '02-ajax.php'); console.log('数据返回成功');
console.log(xmlhttp.responseText);
// （3）发送请求 // 显示在页面上
xmlhttp.send(); document.querySelector('h1').innerHTML = xmlhttp.responseText;
}
//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。 };
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。 };
xmlhttp.onreadystatechange = function () { </script>
// 为了保证 数据 完整返回，我们一般会判断 两个值 </body>
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 如果能够进入这个判断，说明数据请求成功了
// （5）在注册的事件中，获取返回的内容，并显示在页面上
console.log('数据返回成功');
// 数据是保存在 异步对象的 属性中
console.log(xmlhttp.responseText);
// 显示在页面上
document.querySelector('h1').innerHTML = xmlhttp.responseText;
}
}
}
</script>
</body>
</html> </html>
``` ```
@ -133,36 +175,28 @@ index.html：
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<h1>Ajax 发送 get 请求</h1> <h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送put_ajax请求" id='btnAjax'> <input type="button" value="发送put_ajax请求" id="btnAjax" />
<script type="text/javascript"> <script type="text/javascript">
// 发送ajax 请求需要五步
// 异步对象 var xhr = new XMLHttpRequest();
var xhr = new XMLHttpRequest(); xhr.open('post', '02.post.php');
// 如果想要使用post提交数据,必须添加此行
// 设置属性 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.open('post', '02.post.php'); xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
// 如果想要使用post提交数据,必须添加此行 // 这步为判断服务器是否正确响应
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
// 将数据通过send方法传递 }
xhr.send('name=fox&age=18'); };
</script>
// 发送并接受返回值 </body>
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
</script>
</body>
</html> </html>
``` ```
@ -175,33 +209,33 @@ index.html：
发送请求的方法： 发送请求的方法：
```javascript ```javascript
open(method, url, async); open(method, url, async);
``` ```
参数解释： 参数解释：
- method：请求的类型；GET 或 POST - method：请求的类型；GET 或 POST
- url：文件在服务器上的位置 - url：文件在服务器上的位置
- async：true（异步）或 false（同步） - async：true（异步）或 false（同步）
另外还有个方法：（仅用于 POST 请求） 另外还有个方法：（仅用于 POST 请求）
```javascript ```javascript
send(string); send(string);
``` ```
### POST请求时注意 ### POST 请求时注意
如果想让 像form 表单提交数据那样使用POST请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据： 如果想让 像 form 表单提交数据那样使用 POST 请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：
```javascript ```javascript
xmlhttp.open("POST","ajax_test.php", true); xmlhttp.open('POST', 'ajax_test.php', true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send("name=smyhvae&age=27"); xmlhttp.send('name=smyhvae&age=27');
``` ```
### onreadystatechange 事件 ### onreadystatechange 事件
@ -210,424 +244,86 @@ index.html：
readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化） readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）
- 0: 请求未初始化 - 0: 请求未初始化
- 1: 服务器连接已建立 - 1: 服务器连接已建立
- 2: 请求已接收 - 2: 请求已接收
- 3: 请求处理中 - 3: 请求处理中
- 4: 请求已完成，且响应已就绪 - 4: 请求已完成，且响应已就绪
status： status：
- 200: "OK"。 - 200: "OK"。
- 404: 未找到页面。 - 404: 未找到页面。
在 onreadystatechange 事件中，**当 readyState 等于 4，且状态码为200时，表示响应已就绪**。 在 onreadystatechange 事件中，**当 readyState 等于 4，且状态码为 200 时，表示响应已就绪**。
### 服务器响应的内容 ### 服务器响应的内容
- responseText：获得字符串形式的响应数据。 - responseText：获得字符串形式的响应数据。
- responseXML：获得 XML 形式的响应数据。
如果响应的是普通字符串，就使用responseText；如果响应的是XML，使用responseXML。
## Ajax 传输 XML
### XML 语法
XML（Extensible Markup Language）：可扩展标记语言。详细语法可以查看：[#](http://www.w3school.com.cn/xml/index.asp)。
**1、XML声明：**
```xml
<?xml version="1.0" encoding="UTF-8"?>
```
第一行的声明，指定了XML版本(1.0)以及使用的编码。
**2、自定义标签：**
XML中没有默认的标签，所有的标签都是我们自己已定义的。例如：
```xml
<fox></fox>
<name></name>
```
XML中没有单标签，都是双标签。
**3、根节点：**
XML中必须要有一个根节点，所有的子节点都放置在根节点下。例如：
```xml
<root1>
<name></name>
</root1>
```
### XML 解析
因为 XML 就是标签，所以我们可以直接用**解析Dom元素**的方法解析 XML。
**解析过程：**
（1）html 部分：（包含 xml ）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<person id='personXML'>
<name>fox</name>
<age>18</age>
<skill>小花花</skill>
</person>
</body>
</html>
```
（2）解析 xml：
```html
<script type="text/javascript">
var xmlObj = document.getElementById("personXML");
var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
console.log(name);
</script>
```
### ajax 请求解析xml（举例）
（1）get_xml.php：（里面包含了xml文件）
```php
<?php
// 设置 返回的为 xml
header('content-type:text/xml; charset= utf-8');
// 读取xml文件 并返回
echo file_get_contents('info/star.xml');
?>
```
上方代码解释：
- php 自带了 读取 xml 文件的方法。
- 在 php 中，如果要使用xml传输数据，则需要使用header()设置返回的内容为xml。
（2）get_xml.html：（Ajax 请求，获取并解析xml）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="获取XMl数据" id='getXML'>
</body>
</html>
<script type="text/javascript">
document.querySelector('#getXML').onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get','get_XMl.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status==200) {
// 如果 返回的是 xml文件
console.log(ajax.responseText);
// 异步 对象中 有另外一个属性 用来专门获取 xml
// xml对象 在浏览器段 就是一个 document对象
// 解析时 可以直接使用 querySelector 或者 getElementById等等 document对象 有的语法
console.log(ajax.responseXML);
console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
// 下面这个 页面文档对象 如果要获取某个标签
console.log(window.document);
}
}
}
</script>
```
## Ajax 传输 JSON
### JSON 的语法
JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。
语法规则：
- 数据在键值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
数据类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
示例：
```json
// 对象
{
"name":"fox",
"age":"18",
"sex":"true",
"car":null
}
// 数组
[
{
"name":"小小胡",
"age":"1"
},
{
"name":"小二胡",
"age":"2"
}
]
```
### JavaScript中：json 字符串 <--> js 对象
基本上，所有的语言都有**将 json 字符串转化为该语言对象**的语法。
比如在 js中：
- JSON.parse()：将JSON字符串转化为 js 对象。例如：
```javascript
// 将 JSON 字符串格式化为 js 对象
var jsObj = JSON.parse(ajax.responseText);
```
- JSON.stringify()：将 JS 对象转化为JSON字符串。例如：
```javascript
var Obj = {
name: "fox",
age: 18,
skill: "撩妹"
};
console.log(Obj);
// 将 js 对象格式化为 JSON 字符串
var jsonStr = JSON.stringify(Obj);
```
### PHP中：json 字符串 <--> js 对象
- **json_decode()**方法：将`json`字符串转化为变量。
- **json_encode()**方法：将变量转化为`json`字符串。
代码举例：
```php
<?php
header("Content-Type:text/html;charset=utf-8");
// json字符串
$jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
// 字符串转化为 php对象
print_r(json_decode($jsonStr));
echo "<br>";
// php数组
$arrayName = array('name' =>'littleFox' ,'age' => 13 );
// php对象 转化为 json字符串
print_r(json_encode($arrayName));
?>
```
输出结果：
```bash
stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
{"name":"littleFox","age":13}
```
### ajax 请求解析 json（举例）
（1）Person.json:
```json
{
"name":"小强",
"skill":"砍树",
"friend":"老板"
}
```
（2）myJson.php：
```php
<?php
// 读取json文件 并返回即可
echo file_get_contents('info/Person.json');
?>
```
（3）getJson.html：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>获取 json 数据</h1>
<input type="button" value="获取json" id='btnJson'>
</body>
</html>
<script type="text/javascript">
// 获取的是一个 如果要获取多个
// document.querySelectorAll(selector)
document.querySelector("#btnJson").onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get','myJson.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200) {
// json 字符串 是字符串 所以我们可以 通过 responseText获取
console.log(ajax.responseText);
// 转化为 js对象
var jsObj = JSON.parse(ajax.responseText);
console.log(jsObj);
// 拼接ul s
var str = '';
str+='<ul>';
str+='<li>'+jsObj.name+'</li>';
str+='<li>'+jsObj.skill+'</li>';
str+='<li>'+jsObj.friend+'</li>';
str+='</ul>';
// 设置到界面上
document.body.innerHTML = str;
}
}
}
</script>
```
演示效果：
![](http://img.smyhvae.com/20180228_1740.gif)
- responseXML：获得 XML 形式的响应数据。
如果响应的是普通字符串，就使用 responseText；如果响应的是 XML，使用 responseXML。
## jQuery 中的 Ajax ## jQuery 中的 Ajax
JQuery 作为最受欢迎的 js 框架之一，常见的 Ajax 已经帮助我们封装好了，只需要调用即可。更为详细的 api 文档可以查阅：[w3cSchool_JQueryAjax](http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp)
JQuery作为最受欢迎的js框架之一，常见的Ajax已经帮助我们封装好了，只需要调用即可。更为详细的api文档可以查阅：[w3cSchool_JQueryAjax](http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp)
格式举例： 格式举例：
```javascript ```javascript
$.ajax({ $.ajax({
url:'01.php',//请求地址 url: '01.php', //请求地址
data:'name=fox&age=18',//发送的数据 data: 'name=fox&age=18', //发送的数据
type:'GET',//请求的方式 type: 'GET', //请求的方式
success:function (argument) {},// 请求成功执行的方法 success: function (argument) {}, // 请求成功执行的方法
beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理 beforeSend: function (argument) {}, // 在发送请求之前调用,可以做一些验证之类的处理
error:function (argument) {console.log(argument);},//请求失败调用 error: function (argument) {
}) console.log(argument);
}, //请求失败调用
});
``` ```
代码举例： 代码举例：
（1）index.html （1）index.html
```html ```html
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>jquery-ajax</title> <title>jquery-ajax</title>
</head> </head>
<body> <body>
<input type="button" value="点击" id="btn"> <input type="button" value="点击" id="btn" />
<div id="showInfo"></div> <div id="showInfo"></div>
<script type="text/javascript" src="jquery-1.11.2.js"></script> <script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function(){ $(function () {
$('#btn').click(function () {
$("#btn").click(function(){ $.ajax({
$.ajax({ url: 'data.php',
url:"data.php", dataType: 'text',
dataType:"text", type: 'get',
type:"get", success: function (data) {
success:function(data){ alert(data);
alert(data); //$("#showInfo").html(data);
//$("#showInfo").html(data); },
}, error: function (e) {
error:function(e){ console.log(e);
console.log(e); },
} });
}); });
}); });
</script>
</body>
});
</script>
</body>
</html> </html>
``` ```
@ -644,15 +340,10 @@ echo $text;
``` ```
## 创作不易，赞赏作者 ## 创作不易，赞赏作者
如果你觉得本教程对你有帮助，或者你想催更，不妨赞赏一下。 如果你觉得本教程对你有帮助，或者你想催更，不妨赞赏一下。
你的赞赏和认可，是我最大的动力： 你的赞赏和认可，是我最大的动力：
![](http://img.smyhvae.com/20210510_2100.jpg) ![](http://img.smyhvae.com/20210510_2100.jpg)

326
05-JavaScript基础：异步编程和Ajax/03-Ajax传输json和XML.md Normal file
View File

@ -0,0 +1,326 @@
## Ajax 传输 JSON
### JSON 的语法
JSON(JavaScript Object Notation)：是 ECMAScript 的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。
语法规则：
- 数据在键值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
数据类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
示例：
```json
// 对象
{
"name":"fox",
"age":"18",
"sex":"true",
"car":null
}
// 数组
[
{
"name":"小小胡",
"age":"1"
},
{
"name":"小二胡",
"age":"2"
}
]
```
### JavaScript 中：json 字符串 <--> js 对象
基本上，所有的语言都有**将 json 字符串转化为该语言对象**的语法。
比如在 js 中：
- JSON.parse()：将 JSON 字符串转化为 js 对象。例如：
```javascript
// 将 JSON 字符串格式化为 js 对象
var jsObj = JSON.parse(ajax.responseText);
```
- JSON.stringify()：将 JS 对象转化为 JSON 字符串。例如：
```javascript
var Obj = {
name: 'fox',
age: 18,
skill: '撩妹',
};
console.log(Obj);
// 将 js 对象格式化为 JSON 字符串
var jsonStr = JSON.stringify(Obj);
```
### PHP 中：json 字符串 <--> js 对象
- **json_decode()**方法：将`json`字符串转化为变量。
- **json_encode()**方法：将变量转化为`json`字符串。
代码举例：
```php
<?php
header("Content-Type:text/html;charset=utf-8");
// json字符串
$jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
// 字符串转化为 php对象
print_r(json_decode($jsonStr));
echo "<br>";
// php数组
$arrayName = array('name' =>'littleFox' ,'age' => 13 );
// php对象 转化为 json字符串
print_r(json_encode($arrayName));
?>
```
输出结果：
```bash
stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
{"name":"littleFox","age":13}
```
### ajax 请求解析 json（举例）
（1）Person.json:
```json
{
"name": "小强",
"skill": "砍树",
"friend": "老板"
}
```
（2）myJson.php：
```php
<?php
// 读取json文件 并返回即可
echo file_get_contents('info/Person.json');
?>
```
（3）getJson.html：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h1>获取 json 数据</h1>
<input type="button" value="获取json" id="btnJson" />
</body>
</html>
<script type="text/javascript">
// 获取的是一个 如果要获取多个
// document.querySelectorAll(selector)
document.querySelector('#btnJson').onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get', 'myJson.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
// json 字符串 是字符串 所以我们可以 通过 responseText获取
console.log(ajax.responseText);
// 转化为 js对象
var jsObj = JSON.parse(ajax.responseText);
console.log(jsObj);
// 拼接ul s
var str = '';
str += '<ul>';
str += '<li>' + jsObj.name + '</li>';
str += '<li>' + jsObj.skill + '</li>';
str += '<li>' + jsObj.friend + '</li>';
str += '</ul>';
// 设置到界面上
document.body.innerHTML = str;
}
};
};
</script>
```
演示效果：
![](http://img.smyhvae.com/20180228_1740.gif)
## Ajax 传输 XML
### XML 语法
XML（Extensible Markup Language）：可扩展标记语言。详细语法可以查看：[#](http://www.w3school.com.cn/xml/index.asp)。
**1、XML 声明：**
```xml
<?xml version="1.0" encoding="UTF-8"?>
```
第一行的声明，指定了 XML 版本(1.0)以及使用的编码。
**2、自定义标签：**
XML 中没有默认的标签，所有的标签都是我们自己已定义的。例如：
```xml
<fox></fox>
<name></name>
```
XML 中没有单标签，都是双标签。
**3、根节点：**
XML 中必须要有一个根节点，所有的子节点都放置在根节点下。例如：
```xml
<root1>
<name></name>
</root1>
```
### XML 解析
因为 XML 就是标签，所以我们可以直接用**解析 Dom 元素**的方法解析 XML。
**解析过程：**
（1）html 部分：（包含 xml ）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<person id="personXML">
<name>fox</name>
<age>18</age>
<skill>小花花</skill>
</person>
</body>
</html>
```
（2）解析 xml：
```html
<script type="text/javascript">
var xmlObj = document.getElementById('personXML');
var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
console.log(name);
</script>
```
### ajax 请求解析 xml（举例）
（1）get_xml.php：（里面包含了 xml 文件）
```php
<?php
// 设置 返回的为 xml
header('content-type:text/xml; charset= utf-8');
// 读取xml文件 并返回
echo file_get_contents('info/star.xml');
?>
```
上方代码解释：
- php 自带了 读取 xml 文件的方法。
- 在 php 中，如果要使用 xml 传输数据，则需要使用 header()设置返回的内容为 xml。
（2）get_xml.html：（Ajax 请求，获取并解析 xml）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input type="button" value="获取XMl数据" id="getXML" />
</body>
</html>
<script type="text/javascript">
document.querySelector('#getXML').onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get', 'get_XMl.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
// 如果 返回的是 xml文件
console.log(ajax.responseText);
// 异步 对象中 有另外一个属性 用来专门获取 xml
// xml对象 在浏览器段 就是一个 document对象
// 解析时 可以直接使用 querySelector 或者 getElementById等等 document对象 有的语法
console.log(ajax.responseXML);
console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
// 下面这个 页面文档对象 如果要获取某个标签
console.log(window.document);
}
};
};
</script>
```

7
05-JavaScript基础：异步编程和Ajax/03-函数封装-Ajax发送http请求（get&post）.md → 05-JavaScript基础：异步编程和Ajax/04-函数封装-Ajax发送http请求（get&post）.md
View File

@ -1,7 +1,6 @@
## 函数封装 ## 函数封装
ajax_tool.js： ajax_tool.js：
@ -233,8 +232,4 @@ test_post.php：
echo $_POST['friend']; echo $_POST['friend'];
?> ?>
``` ```
工程文件：
- 2018-02-28-Ajax请求封装.rar