資訊專欄INFORMATION COLUMN
摘要：簡介業務做一個在線投票，給歌手投票。提交到當前頁面的中達到效果。用戶名密碼注冊總結在不使用對象的情況下，依然可以用來實現對后臺服務器的請求，同時不帶來頁面刷新或者跳轉。
ajax 簡介
業務：
做一個在線投票，給歌手投票。
要求：無刷新，并且不允許使用XMLHttpRequest對象.
分析:在XHR對象，沒有流行之前，已經有了“無刷新”這種效果的方法.
從http角度看，可以利用204 No content 狀態碼的特性
可以使用iframe
利用圖片加載的特性
可以使用script
無刷新只是表面現象，本質上，是需要發送一個請求，把數據送到后臺.
業務需求：
AJAX注冊，提交表單，要求頁面無刷新.
利用iframe特性
iframe嵌入在當前頁面。
post提交到當前頁面的iframe中,達到ajax效果。
總結：
在不使用XMLHttpRequest對象的情況下，依然可以用js來實現對后臺服務器的請求，同時不帶來頁面刷新或者跳轉。
所謂AJAX：
即是指：頁面不刷新的情況下，利用XMLHttpRequest對象發送HTTP請求.或者JavaScript的網絡化.
AJAX文件上傳實現原理(HTTP協議+JS引擎)的角度：
分析：從HTTP協議的角度來看，則要把文件的內容發送到服務器.如果可以，說明XMLHttpRequest對象在POST數據時，把文件的內容也發送到服務器，---> XHR對象獲取了你要上傳的文件的內容. ---> JavaScript讀取了本地的文件內容. ---> 處于安全原因，JavaScript是不能夠讀取到本地文件內容.
因此：AJAX原理上是無法實現的.
利用偽AJAX方式來實現.
iframe來實現.
用flash實現。如：swfuploaded插件
HTML5實現。(HTML5增加了文件讀取API)
AJAX核心：XMLHttpRequest對象.
XML對象一個專門的HTTP請求的工具.
如何使用XMLHttpRequrest對象做AJAX請求?
分析：
如何實例化該對象.
如何請求后臺資源.
請求結果如何得到(雙向通信).
創建XML對象.
new XMLHttpRequest();
如何通過XHR發送請求?
分析HTTP協議，要請求需要明確因素?
根據請求行：
用什么方法來請求.
GET,POST,PUT,DELETE,HEAD
請求那個資源(URL)
同步方式
同步，異步
獲取返回信息
XHR對象本身有一些屬性，responseText,表示返回值.
xhr.responseText
使用異步，如何知道請求完成.
XHR對象在請求與響應的過程中，狀態會不斷變化(0-4)xhr.readyState，逐步變化. 可以綁定一個函數，監聽狀態變化，只要狀態發生變化，就觸發函數xhr.onreadystatechange
返回值類型不考慮HTML5最新的標準，返回值：普通文本/xml文檔.二種返回形式
XML文檔function createXHR() {
var xhr = null;
if ( window.ActiveXObject ) {
xhr = new window.ActiveXObject();
} else if ( XMLHttpRequest ) {
xhr = new XMLHttpRequest("Microsoft.XMLHTTP");
}
return xhr;
}
// xml
function test1() {
var xhr = createXHR();
xhr.open("GET", "./returntype.php", true);
xhr.onreadystatechange = function () {
if ( this.readyState == 4 ) {
var xmldom = this.responseXML;
console.log( xmldom );
}
}
xhr.send(null);
}
普通文本
普通文本變通形式：
后臺返回大段的html代碼，直接innerHTML到前臺頁面.
json格式的普通文本.
返回簡短的標志字符串 如: 0, 1, ok.
function createXHR() {
var xhr = null;
if ( window.ActiveXObject ) {
xhr = new window.ActiveXObject();
} else if ( XMLHttpRequest ) {
xhr = new XMLHttpRequest("Microsoft.XMLHTTP");
}
return xhr;
}
// 返回普通文本的html代碼字符串
function test2() {
var xhr = createXHR();
xhr.open("GET", "./returnhtml.php", true);
xhr.onreadystatechange = function () {
if ( this.readyState == 4 ) {
console.log( this.responseText );
}
}
xhr.send(null);
}
// json格式字符串對象
function test3() {
var xhr = createXHR();
xhr.open("GET", "./returnjson.php", true);
xhr.onreadystatechange = function () {
if ( this.readyState == 4 ) {
console.log( this.responseText );
}
}
xhr.send(null);
}
jsonp格式
jsonp是跨域解決的一種方式.
異步原理
readyState 狀態值:
通過插隊機制，把回調函數插入到當前已經執行代碼的前方。
HTML5與AJAX iframe撲捉表單提交動作(onsubmit)
創建一個iframe
把表單的target修改 指向 該 iframe
銷毀iframe
$("form").submit(function () {
var upName = "up" + Math.random();
$("