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