Ajax基礎教程筆記
嗯，昨天看那個方案要學習這個，就準備刷這部書，爭取國慶節把它刷完，嗯，但是還有一部分jQuery沒有看完，想來時間是夠用，加油吧生活，高興是Y君私信我了，但是很沒落的話，嗯，想起她寫給我的句子：在高樓矮窗裡活出自己的開闊吧，沒錯，L.，我希望你也一樣，讓自己心靈發光，在茫茫人海中，Y. 18.10.05 木開子
第一章 Ajax簡介
Web簡史：Berners-lee發明了標準通用語言(Standard Generalized Markup language ,SGML)的一個子集稱為超文字標記語言(HyperText Markup Language,HTML)，建立了稱為超文字傳輸協議(HyperText Transfer Protocol,HTTP)的簡單協議，還發明瞭第一個Web瀏覽器，叫做WorldWideWeb。 Web發展例程： 最初的Web頁面都是靜態的，為了讓Web動態，引入的CGI(Common Gateway Interfase,通用閘道器介面)，使用CGI在伺服器端建立程式，CGI指令碼可以使用多種語言編寫。對CGI的改進有了applet，applet允許開發人員編寫可嵌入在Web頁面的小應用程式，在瀏覽器的java虛擬機器(JVM)中執行applet，後來Netscape建立了一種動態指令碼語言指令碼語言，最終命名為JavaScript，設計JavaScript是為了讓不太熟悉Java和Web的開發人員能夠更輕鬆的開發applet，Microsoft也推出了VBScript，在java出現一年以後，sun引入servlet即java程式碼不用像apple那樣的客戶端瀏覽器中運行了，把它控制在一個應用伺服器上執行，但是servlet設計介面很不方便，需要以列印流來輸出，為了將表示與業務邏輯分離，出現了JSP(JavaScript Pages),Microsoft也推出了ASP。用來設計頁面， Flash：利用flash可以釋出高度互動的應用。 DHTML革命：動態HTML(Dynamic HTML，DHTML)結合HTML，層疊式樣式表(Cascading Style sheets,CSS),JavaScript,DOM。DHTML 不是 W3C 標準。 XML衍生語言：基於SGML衍生了W3C的可擴充套件標記語言(eXtensible Markup Language ,XML)，如今有許多XHL衍生的語言，Mozilla的XUL(XML User Interface Language,使用者介面語言，需要GECko引擎)，XAMJ(跨平臺語言，基於JAVA，編譯型語言，建立在clientlet體系結構上的)，Macromedia的MXML(Maximum sXperience Markup Language，最佳體驗語言，需要Fiex與ActionScript編寫業務邏輯)，Microsoft的XAML(eXtensible Application Markup Language，可擴充套件應用標記語言)，XForms(W3C的XForms規約). ajax:基於XMLHttprequest物件(XHR),消除胖客戶(桌面應用)與瘦客戶(Web應用)應用之間的界線。即非同步通訊，允許瀏覽器與伺服器通訊而無需重新整理當前頁面的技術。
第二章 使用XMLHTTPrequest物件
使用XMLHttpRequest物件傳送請求和處理響應之前，必須先寫JavaScript建立一個XMLHttpRequest物件，由於XMLHttpRequest並不是一個W3C標準，可以採用多種方法建立，Internet Explorer把XMLHttpRequest實現為一個ActiveXObject物件，其他瀏覽器把它實現為本地的Javascript物件。
var xmlHttp
function createXMLHttpRequest(){
if(window.ActiveXObject){ //IE瀏覽器
xmlHttp = 方法和屬性
| 方法屬性 | 描述 |
|---|---|
| void abort() | 停止當前請求 |
| String getAllresponseHeadders() | 以字串把HTTP請求的所有響應首部作為鍵值對返回 |
| String getResponseheader("") | 返回指定首部欄位的字串 |
| void open(string method,string url,boolean asynch,string username,string password) | 建立對伺服器的呼叫，初始化請求的純指令碼方法,第三個引數表示呼叫為非同步(true)還是同步(false),預設非同步 |
| void send(content) | 向伺服器發出請求，如果宣告非同步，立即返回，否則等待接收到響應為之，可選引數可以是DOM物件的例項，輸入流，或字串，傳入這個方法的內容會作為請求的一部分發送 |
| void setRequestHeader(string header,string value) | 把指定的首部設定為所提供的值，在設定任何首部前必須先呼叫open()後才可呼叫 |
| onreaddystatechange | 每個狀態改變時都會觸發這個事件處理器，通常會呼叫事件處理函式 |
| readystate | 請求的狀態，0(未初始化)，1(正在載入)，2(已載入)，3(互動中)，4(完成) |
| responseText | 返回伺服器的響應，表示為一個字串 |
| responseXML | 返回伺服器的響應，表示為xml，可以解析為DOM物件 |
| status | 伺服器的HTTP狀態碼 |
| statusText | 伺服器狀態碼對應原因短語 |
互動例項
<input type = "text" id = "email" name ="email" onblur = "validateEmail()">
<script type = "text/javascript">
var xmlHttp;
var email = document.getElementById("email");
var url = "validata?emali = "+escape(email.value);
//get方法資料作為URl一部分發送，地址資料？隔開。資料以鍵值對方式顯示&隔開。
if(window.ActiveXObject){ //IE瀏覽器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){ //其他瀏覽器
xmlHttp = new XMLHttprequest();
}
xmlHttp.open("GET",url);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
function callback(){
if(xmlHttp.readyState == 4 ){
if(xmlHttp.status ==200){
//do something interesting here
}
}
}
}
</script>
遠端指令碼：遠端呼叫型別，MSRS等 如何傳送簡單請求 使用XMLHttprequest物件傳送請求的基本步驟： 1，得到XMLHttpRequest物件的例項引用，可以建立新例項，也可以訪問已有的例項變數。 2，把物件的onreadystatechange屬性設定為指向事件函式的指標。 3，指定請求的屬性，open()方法 4，將請求傳送給伺服器，send()方法，如果沒有資料作為請求體的一部分發送，使用null；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>simple XMLHttpRequest</title>
<script type="text/javascript">
var xmlHttp;
function createXMlHttprequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveObject("Microsoft.XMLHttp");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function srartRequest(){
createXMLHttprequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET","simpleResponse.xml",true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState ==4){
if(xmlHttp.status == 200){
alert("The servlet replied with:"+xmlHttp.responseYext);
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Start Basic Asynchronous Request" onclick="startRequest()" />
</form>
</body>
</html>
DOM Level 3載入和儲存規約：以一種獨立於平臺和語言的方式，用XML內容修改DOM文件。