資訊專(zhuān)欄INFORMATION COLUMN
摘要：簡(jiǎn)介業(yè)務(wù)做一個(gè)在線(xiàn)投票，給歌手投票。提交到當(dāng)前頁(yè)面的中達(dá)到效果。用戶(hù)名密碼注冊(cè)總結(jié)在不使用對(duì)象的情況下，依然可以用來(lái)實(shí)現(xiàn)對(duì)后臺(tái)服務(wù)器的請(qǐng)求，同時(shí)不帶來(lái)頁(yè)面刷新或者跳轉(zhuǎn)。
ajax 簡(jiǎn)介
業(yè)務(wù)：
做一個(gè)在線(xiàn)投票，給歌手投票。
要求：無(wú)刷新，并且不允許使用XMLHttpRequest對(duì)象.
分析:在XHR對(duì)象，沒(méi)有流行之前，已經(jīng)有了“無(wú)刷新”這種效果的方法.
從http角度看，可以利用204 No content 狀態(tài)碼的特性
可以使用iframe
利用圖片加載的特性
可以使用script
無(wú)刷新只是表面現(xiàn)象，本質(zhì)上，是需要發(fā)送一個(gè)請(qǐng)求，把數(shù)據(jù)送到后臺(tái).
業(yè)務(wù)需求：
AJAX注冊(cè)，提交表單，要求頁(yè)面無(wú)刷新.
利用iframe特性
iframe嵌入在當(dāng)前頁(yè)面。
post提交到當(dāng)前頁(yè)面的iframe中,達(dá)到ajax效果。
總結(jié)：
在不使用XMLHttpRequest對(duì)象的情況下，依然可以用js來(lái)實(shí)現(xiàn)對(duì)后臺(tái)服務(wù)器的請(qǐng)求，同時(shí)不帶來(lái)頁(yè)面刷新或者跳轉(zhuǎn)。
所謂AJAX：
即是指：頁(yè)面不刷新的情況下，利用XMLHttpRequest對(duì)象發(fā)送HTTP請(qǐng)求.或者JavaScript的網(wǎng)絡(luò)化.
AJAX文件上傳實(shí)現(xiàn)原理(HTTP協(xié)議+JS引擎)的角度：
分析：從HTTP協(xié)議的角度來(lái)看，則要把文件的內(nèi)容發(fā)送到服務(wù)器.如果可以，說(shuō)明XMLHttpRequest對(duì)象在POST數(shù)據(jù)時(shí)，把文件的內(nèi)容也發(fā)送到服務(wù)器，---> XHR對(duì)象獲取了你要上傳的文件的內(nèi)容. ---> JavaScript讀取了本地的文件內(nèi)容. ---> 處于安全原因，JavaScript是不能夠讀取到本地文件內(nèi)容.
因此：AJAX原理上是無(wú)法實(shí)現(xiàn)的.
利用偽AJAX方式來(lái)實(shí)現(xiàn).
iframe來(lái)實(shí)現(xiàn).
用flash實(shí)現(xiàn)。如：swfuploaded插件
HTML5實(shí)現(xiàn)。(HTML5增加了文件讀取API)
AJAX核心：XMLHttpRequest對(duì)象.
XML對(duì)象一個(gè)專(zhuān)門(mén)的HTTP請(qǐng)求的工具.
如何使用XMLHttpRequrest對(duì)象做AJAX請(qǐng)求?
分析：
如何實(shí)例化該對(duì)象.
如何請(qǐng)求后臺(tái)資源.
請(qǐng)求結(jié)果如何得到(雙向通信).
創(chuàng)建XML對(duì)象.
new XMLHttpRequest();
如何通過(guò)XHR發(fā)送請(qǐng)求?
分析HTTP協(xié)議，要請(qǐng)求需要明確因素?
根據(jù)請(qǐng)求行：
用什么方法來(lái)請(qǐng)求.
GET,POST,PUT,DELETE,HEAD
請(qǐng)求那個(gè)資源(URL)
同步方式
同步，異步
獲取返回信息
XHR對(duì)象本身有一些屬性，responseText,表示返回值.
xhr.responseText
使用異步，如何知道請(qǐng)求完成.
XHR對(duì)象在請(qǐng)求與響應(yīng)的過(guò)程中，狀態(tài)會(huì)不斷變化(0-4)xhr.readyState，逐步變化. 可以綁定一個(gè)函數(shù)，監(jiān)聽(tīng)狀態(tài)變化，只要狀態(tài)發(fā)生變化，就觸發(fā)函數(shù)xhr.onreadystatechange
返回值類(lèi)型不考慮HTML5最新的標(biāo)準(zhǔn)，返回值：普通文本/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);
}
普通文本
普通文本變通形式：
后臺(tái)返回大段的html代碼，直接innerHTML到前臺(tái)頁(yè)面.
json格式的普通文本.
返回簡(jiǎn)短的標(biāo)志字符串 如: 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格式字符串對(duì)象
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 狀態(tài)值:
通過(guò)插隊(duì)機(jī)制，把回調(diào)函數(shù)插入到當(dāng)前已經(jīng)執(zhí)行代碼的前方。
HTML5與AJAX iframe撲捉表單提交動(dòng)作(onsubmit)
創(chuàng)建一個(gè)iframe
把表單的target修改 指向 該 iframe
銷(xiāo)毀iframe
$("form").submit(function () {
var upName = "up" + Math.random();
$("