//Ajax 簡介
//（Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）） [e??s??kr?n?s]
/*
1.1 什么是 AJAX ？
Ajax不是某種編程語言
AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需多載整個網頁面。
有很多使用 AJAX 的應用程式案例：新浪微博、Google 地圖等等
1.2 同步與異步
同步：就是指一個行程在執行某個請求的時候，
若該請求需要一段時間才能回傳資訊，
那么這個行程將會一直等待下去，
直到收到回傳資訊才繼續執行下去；
同步
//請求一 1ms
//請求二 1ms
//請求三 1ms
異步 1.3ms
異步：是指行程不需要一直等下去，
而是繼續執行下面的操作，不管其他行程的狀態。
當有訊息回傳時系統會通知行程進行處理，
這樣可以提高執行的效率。
異步實作：
1、運用HTML與CSS來實作頁面，表達資訊
2、運用XMLHttpRequest和web服務器進行資料的異步交換
3、運用JavaScript操作DOM，實作動態區域重繪
*/
/*
1.3 AJAX-創建XMLHttpRequest 物件
什么是XMLHttpRequest物件？
XMLHttpRequest物件用于在后臺與服務器交換資料（具體介紹可見w3c）
創建XMLHttpRequest物件
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari
以及 Opera）均內建 XMLHttpRequest 物件。
創建XMLHttpRequest物件的語法：
var xhr = new XMLHttpRequest();
老版本的Internet Explorer(IE5和IE6)使用ActiveXObject物件：
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
為了應對所有的現代瀏覽器,包括IE5和IE6,請檢查瀏覽器是否支持XMLHttpRequest物件.如果支持，則創建 XMLHttpRequest 物件。如果不支持，則創建 ActiveXObject ：
var xhr;
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}else{
// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
*/
/*
1.4 AJAX - 向服務器發送請求
向服務器發送請求,我們使用XMLHttpRequest物件的 open() 和 send() 方法：
open(method,url,asyns) 規定請求的型別、URL 以及是否異步處理請求。
引數說明：
method：請求的型別；GET 或 POST
url：檔案在服務器上的位置
async：true（異步）或 false（同步）Asynchronous
send(string):將請求發送到服務器
引數說明:string 僅用于POST請求
一個簡單的GET請求:
xhr.open("GET","/Ajax02/getInfor",true)
xhr.send();
一個簡單的POST請求:
xhr.open("POST","/Ajax02/getInfor",true)
xhr.send();
如果需要像HTML表單那樣POST資料，請使用setRequestHeader()來添加HTTP頭然后在 send() 方法中規定您希望發送的資料：
xhr.open("POST","/jQueryAjax/postPersonInfor",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);//data表單中需要提交的資料（字串）
setRequestHeader語法：
setRequestHeader(header,value)：向請求添加HTTP頭。
引數說明：
header: 規定頭的名稱
value: 規定頭的值
*/
/*
1.5 AJAX 服務器回應
使用XMLHttpRequest物件的responseText或responseXML屬性獲取來自服務器的回應
responseText:獲得字串形式的回應資料。
responseXML：獲得 XML 形式的回應資料。
1.6 AJAX onreadystatechange事件
在XMLHttpRequest物件中，readyState屬性存有XMLHttpRequest的狀態資訊，
每當readyState改變時，就會觸發onreadystatechange事件。
下面是XMLHttpRequest物件的三個重要屬性：
onreadystatechange:存盤函式(或函式名),每當readyState屬性改變時,就會呼叫該函式。
readyState:存有XMLHttpRequest的狀態。從0到4發生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且回應已就緒
status: 200: "OK" 404: 未找到頁面
在onreadystatechange事件中，我們規定當服務器回應已做好被處理的準備時所執行的任務。
當readyState等于4且status為 200 時，表示回應已就緒：
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt);
}
//JSON簡介
/*
JSON:JavaScript物件表示法（JavaScript Object Notation）
JSON是存盤和交換文本資訊的語法：
1.JSON是輕量級的文本資料交換格式
2.JSON獨立于語言和平臺
3.JSON具有自我描述性，更容易理解。
類似于xml,比XML更小、更快、更易決議
(XML:指可擴展標記語言。XML被設計用來傳輸和存盤資料。)
*/
//1.1 JSON語法
/*
JSON語法是JavaScript物件表示語法的子集
1.資料在名稱/值對中(資料在鍵值對中)
2.資料由逗號分隔
3.花括號保存物件({})
4.方括號保存陣列([])
JSON值可以是：
數字（整數或浮點數）
字串（在雙引號中）
布林值（true或false）
陣列（在方括號中）
物件（在花括號中）
null
*/
//js物件的屬性值：
//JS的資料型別：String Number Boolean Undefined Null Object（內建物件 自定義物件）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/53072.html
標籤：HTML(CSS)