# ajax 简介
概念：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。使用 JS 的异步的方式（ajax 对象）去获取数据。数据：xml，json, 文本等。
特点：
-
AJAX 不是新的编程语言，而是一种使用现有标准的新方法，JS 中有一个专门的对象：XMLHttpRequest。
-
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（局部刷新）
-
AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。需要使用服务器环境
-
AJAX 是一种用于创建快速动态网页的技术。前后端分离。
同步和异步的区别：
- 同步：指的阻塞的，前面的代码会影响后面的代码的执行，也就是代码是从上到下执行的。
- 异步：指的非阻塞。前面的代码不会影响后面代码的执行
# ajax 对象和属性，方法
1
2
3
4
5
6
7
8
9
10
11
12
|
var xhr=new XMLHttpRequest();
xhr.open('get|post',url,[是否异步true或false,默认是异步]);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var json=JSON.parse(xhr.response);
}
}
|
# JSON 对象的两个方法
使用 ajax 返回过来的数据会自动变成字符串，即数组会变成字符串数组，对象会变成字符串对象等。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| 原数据：
{
web:{
}
}
通过ajax返回后：会变成字符串
"{
web:{
}
}"
JSON.parse(字符串对象)==> 真对象
JSON.parse('[]'); ==> []
JSON.parse("function(){}") ==> function(){}
JSON.parse('{}');===>{}
JSON.stringify([])==> "[]"
|
http 状态码：
因为网络上的所有的资源都需要通过 http 的方式请求和下载，那也有可能出现各种状况，可以通过读 http 状态码知道本次下载的情况如何。 https://www.runoob.com/http/http-status-codes.html 。
# ajax 模板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 假设需要加载json到当前页面，是 不可以使用link标签、script标签或其他标签-->
<!-- <link rel="stylesheet" href="">
<script></script> -->
<!-- 唯一可以的方式就是用ajax来加载json -->
</head>
<body>
<script type="text/javascript">
//ajax对象
var xhr=new XMLHttpRequest();
xhr.open('get','web20.json');
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
// 这里就成功拿到了数据
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
|
# ajax 实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 假设需要加载json到当前页面，是 不可以使用link标签、script标签或其他标签-->
<!-- <link rel="stylesheet" href="">
<script></script> -->
<!-- 唯一可以的方式就是用ajax来加载json -->
</head>
<body>
<table border="1" width="80%" align="center">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tbody id="tbd">
<tr>
<!-- 此地方最终会被ajax过来的数据替换 -->
</tr>
</tbody>
<!-- <tr>
<td>李四</td>
<td>19</td>
<td>男</td>
<td>唱歌</td>
</tr> -->
</table>
<script type="text/javascript">
//ajax对象
//1个对象：xhr
//2个方法：open(),send()
//3个属性：xhr.readyState,xhr.status,xhr.responseText
//1个事件：onreadystatechange
//ajax的工作原理很像我们打开浏览器访问一个页面
//1. 打开浏览器或者新建窗口（新标签页）
var xhr=new XMLHttpRequest();
// 2.输入要访问的地址，比如www.baidu.com
xhr.open('get','data.json');
// 3. 按下回车键
xhr.send();
// 4.等待网页返回内容给前端，这里需要一个事件来监听内容是否成功返回
// select.onchange=function(){}
xhr.onreadystatechange=function(){
//readyState保存的就是状态码，当每一次状态改变时，都会触发onreadystatechange事件
//所以这里需要添加if语句，确保数据已经成功拿到手了再开始干活，解析数据
if(xhr.readyState==4&&xhr.status==200){
// 这里如果能够打印数据，则表示肯定是请求成功了！
// xhr.response 表示返回过来的数据
// console.log(xhr.response);
// console.log(xhr.response);//string
var json=JSON.parse(xhr.response);
// console.log(data)
// 接下来就是用昨天学的解析json的知识点来解析了，与ajax无关了！！即ajax只负责运输数据，不负责解析数据
//
// ajax和json的关系
// 物流和物品的关系
var tbd=document.getElementById("tbd");
var html="";
var data=json.data;
for(var i=0;i<data.length;i++){
// console.log(web20[i]);
tbd.innerHTML+="<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td><td>"+data[i].sex+"</td><td>"+data[i].hobby.join(",")+"</td></tr>";
// var str="hello,world";
}
}
}
</script>
</body>
</html>
|
