这些日子我学到的JavaScript:Day27- AJAX

什麽是 AJAX ？
AJAX 是 Asynchronous JavaScript and XML（非同步的 JavaScript 与 XML 技术）的缩写，简单说就是网页不用重新整理，就能即时地透过浏览器去跟服务器沟通，捞出资料。

服务器对 AJAX 资料请求回应通常是以三种资料格式其中之一（HTML、XML、JSON），最常与 Javascript 做搭配就是 JSON。

XMLHttpRequest 物件 — 跨浏览器捞资料
使用 XHR 物件可以在自己网页上读取远端的 JSON 资料，最常见的用途是在注册页面验证「用户名」及「信箱」是否被重复使用。

设变数（xhr）
储存一个 XMLHttpRequest 物件以抓取别人的资料，该物件里面有很多方法跟特性可以做应用，例如 onload / readyState 等。

var xhr = new XMLHttpRequest();
readyState 特性的数值用以判断目前读取资料的状态。

0 - 已经产生一个 XMLHttpRequest，但是还没连结要捞的资料，接着下 open() 语法来设定环境（有三个参数）
1 - 用了 open()，但是还没传资料
2 - 侦测到你有用 send()
3 - 资料 loading 中
4 - 你捞到资料了，数据已经接收到
下 open() 指令
xhr.open('格式', '读取的网址', true);
第一个参数： 格式，读取资料 (get) / 传送资料到服务器 (post)
第三个参数： 同步与非同步
接着 xhr 的 readyState 会等於 1，代表我们用了 open() 但还没把资料传送过去。

传送资料
xhr.send();
如果只是要读取资料，则 () 内要打 null （空值）。
此时 readyState = 2，代表侦测到有用 send()。
接下来，如果成功读取到资料，则 XML 物件内的 responseText 特性会把捞到的资料纪录进去，此时 readyState = 4，代表已经成功捞到资料。

参照：XMLHttpRequest — JavaScript 发送 HTTP 请求 (I)

AJAX 非同步请求
通过 XMLHttpRequest 生成的请求可以有两种方式来获取资料，非同步模式或同步模式。
XMLHttpRequest 物件的 open() 方法的第三个参数，true 代表非同步、false 代表同步，以下来介绍非同步及同步的意义。

非同步：可以同时进行多个任务，不需要等待上一个动作完成，就能让程序码继续往下跑，等到请求资料完成才会执行回传函式。总之，在执行请求的同时，浏览器可以正常的执行其他事务的处理。
同步：必须等到请求完成才会继续往下执行程序码。
为了避免阻塞页面，一般而言都会使用非同步请求，然而非同步请求在下了 send() 指令後，还需要一些时间 load 资料，在还没捞到资料的情况下，程序码继续往下跑，那要怎样才能顺利将资料印出来呢？

解决方法：使用 XMLHttpRequest 中的 onload 事件，该事件的意思是「当资料全部跑完以後，才会触发此事件」。

xhr.onload = function(){
console.log(xhr.responseText);
//把抓到的资料物件化或阵列化，加以运用
var str = JSON.parse(xhr.responseText);
//选取 DOM，并渲染至网页
document.querySelector('要插入资料的 DOM .class 名称').textContent = str[阵列编号].阵列属性;
}
HTTP 状态码
打开 chrome 开发者工具选择 Network 页签，重整一下可以看到该网页读取资料的状况，其中有一个 status 栏，里面的数字就是 HTTP 状态码，代表网页连线的状态。

以下先介绍 2 个状态码，其余的状态码及更详细的介绍，可以阅读保哥的文章。

200：资料正确回传
404：资料读取错误
因此，刚刚上面的 onload 事件所触发的回传函式，可以用 if 判断式把 HTTP 连线状态加入判断。

xhr.onload= function(){
console.log(xhr.responseText);
if(xhr.status == 200){
var str = JSON.parse(xhr.responseText);
document.querySelector('要插入资料的 DOM .class 名称').textContent = str[阵列编号].阵列属性;
} else{
console.log('资料错误');
}
}