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 對(duì)象，通過這個(gè)對(duì)象可以在不中斷其它瀏覽器任務(wù)的情況下向服

器發(fā)送請(qǐng)求；

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

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

由于Ajax包含眾多特性，優(yōu)勢(shì)與不足也非常明顯。優(yōu)勢(shì)主要以下幾點(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 對(duì)象支持度不足(比如?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)試工具缺乏（相對(duì)于其他語言的工具集來說，JS 或?Ajax 調(diào)試開發(fā)少的可憐）。

異步和同步

使用Ajax最關(guān)鍵的地方，就是實(shí)現(xiàn)異步請(qǐng)求、接受響應(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 對(duì)?Ajax 做了大量的封裝，我們使用起來也較為方便，不需要去考慮瀏覽器兼容性。對(duì)于封裝的方式，

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

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

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

方法。

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

url(必須，請(qǐng)求?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請(qǐng)求的url即可。

//HTML

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

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

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

});

如果想對(duì)載入的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（請(qǐng)求返回）、textStatus（請(qǐng)求狀態(tài))、XMLHttpRequest

（XMLHttpRequest對(duì)象）。$('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

對(duì)象屬于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對(duì)象的statusText屬性則返回'OK'字符串。除了'OK'的狀態(tài)字符串，statusText屬性還提供了一系列其他的值，如下：

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

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

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

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

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

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

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

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

.load()方法是局部方法，因?yàn)樗枰粋€(gè)包含元素的?jQuery 對(duì)象作為前綴。而$.get()和$.post()是全局方法，無須指定某個(gè)元素。對(duì)于用途而言，.load()適合做靜態(tài)文件的異步獲取，而對(duì)于需要傳遞參數(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 請(qǐng)求是通過?URL 提交的，而?POST 請(qǐng)求則是?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è)功能鍵值對(duì)的對(duì)象。

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

參數(shù)類型說明

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

typeString請(qǐng)求方式：POST?或 GET，默認(rèn) GET

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

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

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

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

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

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

error Function 請(qǐng)求失敗時(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è)請(qǐng)求相關(guān)的所有回調(diào)函數(shù)的上下文。

contentType String指 定 請(qǐng) 求 內(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)行頭檢測(cè)。如果為 true，進(jìn)行頭檢測(cè)，當(dāng)相應(yīng)內(nèi)容與上次請(qǐng)求改變時(shí)，請(qǐng)求被認(rèn)為是成功的。

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

參數(shù)名 callback。??

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

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

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

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

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

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

data

Object 或 String

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

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

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

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

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

error Function 請(qǐng)求失敗時(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è)請(qǐng)求相關(guān)的所有回調(diào)函數(shù)的上下文。

contentType String

指定請(qǐng)求內(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)行頭檢測(cè)。如果為 true，進(jìn)行 頭檢測(cè)，當(dāng)相應(yīng)內(nèi)容與上次請(qǐng)求改變時(shí)，請(qǐng)求被 認(rèn)為是成功的。

jsonp String

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

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

scriptCharset String

當(dāng)遠(yuǎn)程和本地內(nèi)容使用不同的字符集時(shí)，用來設(shè)置script 和 jsonp 請(qǐng)求所使用的字符集。 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信息）