本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。
以下是正文。
同步和异步
同步和异步的概念
同步：必须等待前面的任务完成，才能继续后面的任务。
异步：不受当前任务的影响。
拿排队举例：
同步：在银行排队时，只有等到你了，才能够去处理业务。
异步：在排队的时候，可以玩手机。
异步更新网站
我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。
可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。
试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。
web前端里的异步更新，就要用到 Ajax。
Ajax
Ajax 的概念
在浏览器中，我们可以在不刷新页面的情况下，通过ajax的方式去获取一些新的内容。
Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。
发送 Ajax 请求的五个步骤
其实也就是 使用 XMLHttpRequest 对象的五个步骤。
我们先回忆一下，一个完整的HTTP请求需要的是：
请求的网址、请求方法get/post。
提交请求的内容数据、请求主体等。
接收响应回来的内容。
发送 Ajax 请求的五个步骤：
（1）创建异步对象。即 XMLHttpRequest 对象。
（2）设置请求的参数。包括：请求的方法、请求的url。
（3）发送请求。
（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
（5）获取返回的数据。
Ajax 请求：get 请求举例
（1）index.html：
Document
Ajax 发送 get 请求
（2）02-ajax.php：
效果如下：
Ajax 请求：post 请求举例
index.html：
Document
Ajax 发送 get 请求
XMLHttpRequest 对象详解
我们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段，我们讲一下注意事项。
发送请求
发送请求的方法：
open(method, url, async);参数解释：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
另外还有个方法：（仅用于 POST 请求）
send(string);POST请求时注意
如果想让 像form 表单提交数据那样使用POST请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：
xmlhttp.open("POST","ajax_test.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=smyhvae&age=27");onreadystatechange 事件
注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。
readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status：
200: "OK"。
404: 未找到页面。
在 onreadystatechange 事件中，当 readyState 等于 4，且状态码为200时，表示响应已就绪。
服务器响应的内容
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
如果响应的是普通字符串，就使用responseText；如果响应的是XML，使用responseXML。
Ajax 传输 XML
XML 语法
XML（Extensible Markup Language）：可扩展标记语言。详细语法可以查看：#。
1、XML声明：
第一行的声明，指定了XML版本(1.0)以及使用的编码。
2、自定义标签：
XML中没有默认的标签，所有的标签都是我们自己已定义的。例如：
XML中没有单标签，都是双标签。
3、根节点：
XML中必须要有一个根节点，所有的子节点都放置在根节点下。例如：
XML 解析
因为 XML 就是标签，所以我们可以直接用解析Dom元素的方法解析 XML。
解析过程：
（1）html 部分：（包含 xml ）
Document
fox
18
小花花
（2）解析 xml：
ajax 请求解析xml（举例）
（1）get_xml.php：（里面包含了xml文件）
上方代码解释：
php 自带了 读取 xml 文件的方法。
在 php 中，如果要使用xml传输数据，则需要使用header()设置返回的内容为xml。
（2）get_xml.html：（Ajax 请求，获取并解析xml）
Document
Ajax 传输 JSON
JSON 的语法
JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。
语法规则：
数据在键值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
数据类型：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null
示例：
// 对象
{
"name":"fox",
"age":"18",
"sex":"true",
"car":null
}
// 数组
[
{
"name":"小小胡",
"age":"1"
},
{
"name":"小二胡",
"age":"2"
}
]JavaScript中：json 字符串 <--> js 对象
基本上，所有的语言都有将 json 字符串转化为该语言对象的语法。
比如在 js中：
- JSON.parse()：将JSON字符串转化为 js 对象。例如：
// 将 JSON 字符串格式化为 js 对象
var jsObj = JSON.parse(ajax.responseText);- JSON.stringify()：将 JS 对象转化为JSON字符串。例如：
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数组
$arrayName = array('name' =>'littleFox' ,'age' => 13 );
// php对象 转化为 json字符串
print_r(json_encode($arrayName));
?>输出结果：
stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
{"name":"littleFox","age":13}
ajax 请求解析 json（举例）
（1）Person.json:
{
"name":"小强",
"skill":"砍树",
"friend":"老板"
}（2）myJson.php：
（3）getJson.html：
Document
获取 json 数据
演示效果：
我的公众号
想学习代码之外的软技能？不妨关注我的微信公众号：生命团队（id：vitateam）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
