HTTP:計(jì)算機(jī)通過網(wǎng)絡(luò)進(jìn)行通信的規(guī)則或協(xié)議

ajax加載

JSONP(JSON with Padding)是JSON的一種"使用模式"，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。由于同源策略胆屿，一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server1.example.com的服務(wù)器溝通嗤练，而 HTML 的 元素是一個(gè)例外乃坤。利用 元素的這個(gè)開放策略擂送，網(wǎng)頁可以得到從其他來源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP茫打。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript妖混，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析老赤。

jquery中應(yīng)用ajax加載

?Ajax

學(xué)習(xí)要點(diǎn)：

1.Ajax 概述2.load()方法3.$.get()和$.post()

4.$.getScript()和$.getJSON()

5.$.ajax()方法

6.表單序列化

Ajax 全稱為：“Asynchronous JavaScript and XML”（異步?JavaScript 和?XML），

它并不是JavaScript的一種單一技術(shù)制市，而是利用了一系列交互式網(wǎng)頁應(yīng)用相關(guān)的技術(shù)所形成的結(jié)合體抬旺。使用Ajax，我們可以無刷新狀態(tài)更新頁面祥楣，并且實(shí)現(xiàn)異步提交开财，提升了用戶體驗(yàn)。

一．Ajax概述

Ajax 這個(gè)概念是由?Jesse James Garrett 在?2005 年發(fā)明的误褪。它本身不是單一技術(shù)责鳍，是一串

技術(shù)的集合，主要有：

[if !supportLists]1.[endif]JavaScript兽间，通過用戶或其他與瀏覽器相關(guān)事件捕獲交互行為历葛；

[if !supportLists]2.[endif]?2.XMLHttpRequest 對象，通過這個(gè)對象可以在不中斷其它瀏覽器任務(wù)的情況下向服

器發(fā)送請求嘀略；

3.服務(wù)器上的文件恤溶，以?XML乓诽、HTML 或?JSON 格式保存文本數(shù)據(jù)；

4.其它?JavaScript咒程，解釋來自服務(wù)器的數(shù)據(jù)（比如?PHP 從?MySQL 獲取的數(shù)據(jù)）并將其呈現(xiàn)到頁面上问裕。

由于Ajax包含眾多特性，優(yōu)勢與不足也非常明顯孵坚。優(yōu)勢主要以下幾點(diǎn)：1.不需要插件支持（一般瀏覽器且默認(rèn)開啟?JavaScript 即可）粮宛；

[if !supportLists]2.[endif]用戶體驗(yàn)極佳（不刷新頁面即可獲取可更新的數(shù)據(jù)）；

[if !supportLists]3.[endif]提升?Web 程序的性能（在傳遞數(shù)據(jù)方面做到按需放松卖宠，不必整體提交）巍杈；

4.減輕服務(wù)器和帶寬的負(fù)擔(dān)（將服務(wù)器的一些操作轉(zhuǎn)移到客戶端）；

而Ajax的不足由以下幾點(diǎn)：

[if !supportLists]1.[endif]不同版本的瀏覽器度?XMLHttpRequest 對象支持度不足(比如?IE5 之前)扛伍；

[if !supportLists]2.[endif]2.前進(jìn)筷畦、后退的功能被破壞（因?yàn)?/b>?Ajax 永遠(yuǎn)在當(dāng)前頁，不會(huì)幾率前后頁面）刺洒；

[if !supportLists]3.[endif]3.搜索引擎的支持度不夠（因?yàn)樗阉饕媾老x還不能理解?JS 引起變化數(shù)據(jù)的內(nèi)容）鳖宾；

[if !supportLists]4.[endif]4.開發(fā)調(diào)試工具缺乏（相對于其他語言的工具集來說，JS 或?Ajax 調(diào)試開發(fā)少的可憐）逆航。

異步和同步

使用Ajax最關(guān)鍵的地方鼎文，就是實(shí)現(xiàn)異步請求、接受響應(yīng)及執(zhí)行回調(diào)因俐。那么異步與同步有什么區(qū)別呢拇惋？我們普通的Web程序開發(fā)基本都是同步的，意為執(zhí)行一段程序才能執(zhí)行下一段抹剩，類似電話中的通話撑帖，一個(gè)電話接完才能接聽下個(gè)電話；而異步可以同時(shí)執(zhí)行多條任務(wù)澳眷，感覺有多條線路胡嘿，類似于短信，不會(huì)因?yàn)榭匆粭l短信而停止接受另一條短信钳踊。Ajax也可以使用同步模式執(zhí)行衷敌，但同步的模式屬于阻塞模式，這樣會(huì)導(dǎo)致多條線路執(zhí)行時(shí)又必須一條一條執(zhí)行箍土，會(huì)讓Web頁面出現(xiàn)假死狀態(tài)逢享，所以，一般Ajax大部分采用異步模式吴藻。

二．load()方法

jQuery 對?Ajax 做了大量的封裝瞒爬，我們使用起來也較為方便，不需要去考慮瀏覽器兼容性。對于封裝的方式侧但，

jQuery采用了三層封裝：最底層的封裝方法為：$.ajax()矢空，而通過這

層封裝了第二層有三種方法：.load()、$.get()和$.post()禀横，

最高層是$.getScript()和$.getJSON()

方法屁药。

.load()方法可以參數(shù)三個(gè)參數(shù)：

url(必須，請求?html 文件的?url 地址柏锄，參數(shù)類型為?String)酿箭、

data(可選，發(fā)送的?key/value 數(shù)據(jù)趾娃，參數(shù)類型為?Object)缭嫡、

callback(可選，成功或失敗的回調(diào)

函數(shù)抬闷，參數(shù)類型為函數(shù)Function)妇蛀。

如果想讓Ajax異步載入一段HTML內(nèi)容，我們只需要一個(gè)HTML請求的url即可笤成。

//HTML

<input type="button" value="異步獲取數(shù)據(jù)" /> <div id="box"></div>

//jQuery $('input').click(function () {

$('#box').load('test.html');

});

如果想對載入的HTML進(jìn)行篩選评架，那么只要在url參數(shù)后面跟著一個(gè)選擇器即可。

//帶選擇器的?url $('input').click(function () {

$('#box').load('test.html .my');

});

如果是服務(wù)器文件炕泳，比如.php纵诞。一般不僅需要載入數(shù)據(jù)，還需要向服務(wù)器提交數(shù)據(jù)喊崖，那么我們就可以使用第二個(gè)可選參數(shù)data挣磨。向服務(wù)器提交數(shù)據(jù)有兩種方式：get和post。

//不傳遞?data荤懂，則默認(rèn)?get 方式?$('input').click(function () {

$('#box').load('test.php?url=qkt');

});

//get 方式接受的?PHP <?php

if ($_GET['url'] == 'qkt') {

echo '前端學(xué)習(xí)官網(wǎng)'; } else {

echo '其他網(wǎng)站';

}

?

}

?>

//傳遞?data，則為?post 方式?$('input').click(function () {

$('#box').load('test.php', { url : 'qkt'

});

});

//post 方式接受的?PHP?<?php

if ($_POST['url'] == 'qkt') {

echo '前端學(xué)習(xí)官網(wǎng)'; } else {

echo '其他網(wǎng)站';

}

?>

在Ajax數(shù)據(jù)載入完畢之后塘砸，就能執(zhí)行回調(diào)函數(shù)callback节仿，也就是第三個(gè)參數(shù)〉羰撸回調(diào)函數(shù)也可以傳遞三個(gè)可選參數(shù)：responseText（請求返回）廊宪、textStatus（請求狀態(tài))、XMLHttpRequest

（XMLHttpRequest對象）女轿。$('input').click(function () {

$('#box').load('test.php', { url : 'qkt'

}, function (response, status, xhr) {

alert('返回的值為：' + response + '箭启，狀態(tài)為：' + status + '，

狀態(tài)是：' + xhr.statusText);

});

});

注意：status得到的值蛉迹，如果成功返回?cái)?shù)據(jù)則為：success傅寡，否則為：error。XMLHttpRequest

對象屬于JavaScript范疇，可以調(diào)用一些屬性如下：

屬性名說明

responseText作為響應(yīng)主體被返回的文本

responseXML如果響應(yīng)主體內(nèi)容類型是"text/xml"或"application/xml"荐操，

則返回包含響應(yīng)數(shù)據(jù)的 XML DOM?文檔

status響應(yīng)的 HTTP?狀態(tài)

statusTextHTTP 狀態(tài)的說明

如果成功返回?cái)?shù)據(jù)芜抒，那么xhr對象的statusText屬性則返回'OK'字符串。除了'OK'的狀態(tài)字符串托启，statusText屬性還提供了一系列其他的值宅倒，如下：

HTTP 狀態(tài)碼狀態(tài)字符串說明

200OK服務(wù)器成功返回了頁面

400Bad Request語法錯(cuò)誤導(dǎo)致服務(wù)器不識別

401Unauthorized請求需要用戶認(rèn)證

404Not found指定的 URL?在服務(wù)器上找不到

500Internal Server Error服務(wù)器遇到意外錯(cuò)誤，無法完成請求

503ServiceUnavailable由于服務(wù)器過載或維護(hù)導(dǎo)致無法完成請求

三．$.get()和$.post()

.load()方法是局部方法屯耸，因?yàn)樗枰粋€(gè)包含元素的?jQuery 對象作為前綴拐迁。而$.get()和$.post()是全局方法，無須指定某個(gè)元素疗绣。對于用途而言线召，.load()適合做靜態(tài)文件的異步獲取，而對于需要傳遞參數(shù)到服務(wù)器頁面的持痰，$.get()和$.post()更加合適灶搜。

$.get()方法有四個(gè)參數(shù)，前面三個(gè)參數(shù)和.load()一樣工窍，多了一個(gè)第四參數(shù)?type割卖，即服務(wù)器返回的內(nèi)容格式：包括xml、html患雏、script鹏溯、json、jsonp和text淹仑。第一個(gè)參數(shù)為必選參數(shù)丙挽，后面三個(gè)為可選參數(shù)。

//使用$.get()異步返回?html 類型?$('input').click(function () {

$.get('test.php', { url : 'qkt'

}, function (response, status, xhr) { if (status == 'success') {

$('#box').html(response);

}

}) //type 自動(dòng)轉(zhuǎn)為?html

});

注意：第四參數(shù)type是指定異步返回的類型匀借。一般情況下type參數(shù)是智能判斷颜阐，并不需要我們主動(dòng)設(shè)置，如果主動(dòng)設(shè)置吓肋，則會(huì)強(qiáng)行按照指定類型格式返回凳怨。

?

$.post()方法的使用和$.get()基本上一致，他們之間的區(qū)別也比較隱晦是鬼，基本都是背后的不同肤舞，在用戶使用上體現(xiàn)不出。具體區(qū)別如下：

[if !supportLists]1.[endif]GET 請求是通過?URL 提交的均蜜，而?POST 請求則是?HTTP 消息實(shí)體提交的李剖；

[if !supportLists]2.[endif]?2.GET 提交有大小限制（2KB），而?POST 方式不受限制囤耳；

[if !supportLists]3.[endif]?3.GET 方式會(huì)被緩存下來篙顺，可能有安全性問題偶芍，而?POST 沒有這個(gè)問題；

?

4.GET 方式通過$_GET[]獲取慰安，POST 方式通過$_POST[]獲取腋寨。

//使用$.post()異步返回?html?

$.post('test.php', {

url : 'qkt'

}, function (response, status, xhr) { $('#box').html(response);

});

四．$.getScript()和$.getJSON()

jQuery 提供了一組用于特定異步加載的方法：$.getScript()，用于加載特定的?JS 文件化焕；

$.getJSON()萄窜，用于專門加載?JSON 文件。

有時(shí)我們希望能夠特定的情況再加載JS文件撒桨，而不是一開始把所有JS文件都加載了查刻，

這時(shí)課時(shí)使用$.getScript()方法。

//點(diǎn)擊按鈕后再加載?JS 文件?$('input').click(function () { $.getScript('test.js');

});

$.getJSON()方法是專門用于加載?JSON 文件的凤类，使用方法和之前的類似穗泵。?$('input').click(function () {

$.getJSON('test.json', function (response, status, xhr) { alert(response[0].url);

});

});

五．$.ajax()

$.ajax()是所有?ajax 方法中最底層的方法，所有其他方法都是基于$.ajax()方法的封裝谜疤。這個(gè)方法只有一個(gè)參數(shù)佃延，傳遞一個(gè)各個(gè)功能鍵值對的對象。

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

參數(shù)類型說明

urlString發(fā)送請求的地址

typeString請求方式：POST?或 GET夷磕，默認(rèn) GET

timeout Number設(shè)置請求超時(shí)的時(shí)間（毫秒）

dataObject 或String發(fā)送到服務(wù)器的數(shù)據(jù)履肃，鍵值對字符串或?qū)ο?/b>

dataTypeString 返回的數(shù)據(jù)類型，比如 html坐桩、xml尺棋、json 等

beforeSend Function 發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)

complete Function請求完成后調(diào)用的回調(diào)函數(shù)

successFunction 請求成功后調(diào)用的回調(diào)函數(shù)

error Function 請求失敗時(shí)調(diào)用的回調(diào)函數(shù)

globalBoolean 默認(rèn)為 true，表示是否觸發(fā)全局 Ajax

cache Boolean設(shè)置瀏覽器緩存響應(yīng)绵跷， 默認(rèn)為 true膘螟。 如果 dataType類型為 script 或 jsonp 則為 false。

???

ContentDOM指定某個(gè)元素為與這個(gè)請求相關(guān)的所有回調(diào)函數(shù)的上下文碾局。

contentType String指 定 請 求 內(nèi) 容 的 類 型 荆残。 默 認(rèn) 為application/x-www-form-urlencoded。

async Boolean??默認(rèn)為Boolean 是否異步處理净当。默認(rèn)為 true脊阴，false 為同步處理

processData true，數(shù)據(jù)被處理為 URL 編碼格式蚯瞧。如果為 false，則阻止將傳入的數(shù)據(jù)處理為 URL 編碼的格式品擎。

DataFilter?Function 用來篩選響應(yīng)數(shù)據(jù)的回調(diào)函數(shù)埋合。

IfModified?Boolean默認(rèn)為 false，不進(jìn)行頭檢測萄传。如果為 true甚颂，進(jìn)行頭檢測蜜猾，當(dāng)相應(yīng)內(nèi)容與上次請求改變時(shí)，請求被認(rèn)為是成功的振诬。

Jsonp?String指定一個(gè)查詢參數(shù)名稱來覆蓋默認(rèn)的 jsonp 回調(diào)

參數(shù)名 callback蹭睡。??

username String 在 HTTP 認(rèn)證請求中使用的用戶名

password String在 HTTP 認(rèn)證請求中使用的密碼

scriptCharset String當(dāng)遠(yuǎn)程和本地內(nèi)容使用不同的字符集時(shí)，用來設(shè)置 script 和 jsonp 請求所使用的字符集赶么。

xhr Function 用來提供 XHR 實(shí)例自定義實(shí)現(xiàn)的回調(diào)函數(shù)

traditional Boolean默認(rèn)為 false肩豁，不使用傳統(tǒng)風(fēng)格的參數(shù)序列化。 如為

timeout Number 設(shè)置請求超時(shí)的時(shí)間（毫秒）

data

Object 或 String

發(fā)送到服務(wù)器的數(shù)據(jù)辫呻，鍵值對字符串或?qū)ο?/p>

dataType String 返回的數(shù)據(jù)類型清钥，比如 html、xml放闺、json 等

beforeSend Function 發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)

complete Function 請求完成后調(diào)用的回調(diào)函數(shù)

success Function 請求成功后調(diào)用的回調(diào)函數(shù)

error Function 請求失敗時(shí)調(diào)用的回調(diào)函數(shù)

global Boolean 默認(rèn)為 true祟昭，表示是否觸發(fā)全局 Ajax

cache Boolean

設(shè)置瀏覽器緩存響應(yīng)，默認(rèn)為true怖侦。如果 dataType 類型為 script 或 jsonp 則為 false篡悟。

content DOM

指定某個(gè)元素為與這個(gè)請求相關(guān)的所有回調(diào)函數(shù)的上下文。

contentType String

指定請求內(nèi)容的類型匾寝。默認(rèn)為application/x-www-form-urlencoded搬葬。 async Boolean 是否異步處理。默認(rèn)為 true旗吁，false 為同步處理

processData Boolean

默認(rèn)為true踩萎，數(shù)據(jù)被處理為 URL 編碼格式。如 果為 false很钓，則阻止將傳入的數(shù)據(jù)處理為 URL 編 碼的格式香府。 dataFilter Function 用來篩選響應(yīng)數(shù)據(jù)的回調(diào)函數(shù)。

ifModified Boolean

默認(rèn)為false码倦，不進(jìn)行頭檢測企孩。如果為 true，進(jìn)行 頭檢測袁稽，當(dāng)相應(yīng)內(nèi)容與上次請求改變時(shí)勿璃，請求被 認(rèn)為是成功的。

jsonp String

指定一個(gè)查詢參數(shù)名稱來覆蓋默認(rèn)的jsonp 回調(diào) 參數(shù)名 callback推汽。 username String 在 HTTP 認(rèn)證請求中使用的用戶名

password String 在 HTTP 認(rèn)證請求中使用的密碼

scriptCharset String

當(dāng)遠(yuǎn)程和本地內(nèi)容使用不同的字符集時(shí)补疑，用來設(shè)置script 和 jsonp 請求所使用的字符集。 xhr Function 用來提供 XHR 實(shí)例自定義實(shí)現(xiàn)的回調(diào)函數(shù)

traditional Boolean

默認(rèn)為false歹撒，不使用傳統(tǒng)風(fēng)格的參數(shù)序列化莲组。如 為 true，則使用暖夭。

jsonp跨域獲取

通過js標(biāo)簽獲取內(nèi)容

（搜索引擎不能讀取js信息）