6.Ajax和JSON 16:56
1.服務(wù)器的安裝
JSON 文件被放置在服務(wù)器端律适，客戶端請(qǐng)求該文件用得最多的是 Ajax，能夠?qū)崿F(xiàn)異步請(qǐng)求淆衷。
服務(wù)器推薦：
Apache:http://httpd.apache.org/
我使用：WarmServer
訪問本地服務(wù)器，地址欄輸入：127.0.1/ajax/
由于我修改了WarmServer的端口號(hào)渤弛，
所以我的電腦要打開此網(wǎng)址：http://localhost:8080/ajax/
2. Ajax 是什么
AJAX祝拯，全稱 Asynchronous JavaScript and XML，即“異步的 JavaScript 和 XML”她肯，一般寫作 Ajax佳头。
Ajax 能夠與服務(wù)器交換 少量 數(shù)據(jù)，從而異步地更新部分網(wǎng)頁晴氨。
異步,指的是當(dāng) Ajax 執(zhí)行交換數(shù)據(jù)的操作時(shí)康嘉，其他的操作仍然可以執(zhí)行。
一個(gè)最常見的應(yīng)用是：打開百度或谷歌首頁籽前，當(dāng)輸入文字后亭珍，搜索欄下方會(huì)顯示出幾個(gè)建議的搜索詞。這正是 Ajax 的應(yīng)用枝哄。
3. 創(chuàng)建和使用 Ajax
創(chuàng)建 Ajax 對(duì)象要考慮瀏覽器的版本問題块蚌，主要分為兩大類：IE7+/Chrome/Firefox/… 和 IE6/IE5.。
function CreateXHR(){
if (window.XMLHttpRequest)
{
//對(duì)瀏覽器 IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
else
{
//對(duì)瀏覽器 IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
//然后膘格，只要用如下方式創(chuàng)建即可峭范。
var xmlhttp;
xmlhttp = CreateXHR();
//服務(wù)器端有一個(gè)文件 test.json，請(qǐng)求并輸出瘪贱。
xmlhttp.open("GET","test.json",true); //true-是否使用異步請(qǐng)求：是纱控；//test.json要加雙引號(hào)
xmlhttp.send();
//響應(yīng)函數(shù)
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var jsonstr = xmlhttp.responseText;
console.log(jsonstr);
}
}
其中，xmlhttp.readyState 存有 XMLHttpRequest 的狀態(tài)菜秦，有五個(gè)值：
0: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 請(qǐng)求處理中
4: 請(qǐng)求已完成甜害，且響應(yīng)已就緒
xmlhttp.status 的值為請(qǐng)求結(jié)果，200 表示“OK”球昨，404 表示未找到頁面尔店。
獲取來自服務(wù)器的響應(yīng)，可使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性主慰，前者是以字符串形式嚣州，后者是以 XML 形式。
4共螺、案例效果圖：
文檔結(jié)構(gòu)圖：
1）要求：服務(wù)器端有一個(gè)文件test.json,使用Ajax發(fā)送請(qǐng)求給服務(wù)器端,獲取到該文件的內(nèi)容,并將它們輸出到控制臺(tái)
test.json：
{
"name": "Geoff Lui",
"age": 26,
"friends": ["Alice", "Gwen", "Lucy"]
}
2）要求：服務(wù)器端有一個(gè)文件test.xml,使用Ajax發(fā)送請(qǐng)求給服務(wù)器端,獲取到該文件的內(nèi)容,并將它們輸出到控制臺(tái)
test.xml:
<root>
<name>Geoff Lui</name>
<age>26</age>
<friends>Alice</friends>
<friends>Gwen</friends>
<friends>Lucy</friends>
</root>
