20150304+JQuery+AJax+插件-01

The Write Less,Do More——jQuery下

目錄

The Write Less,Do More——jQuery下 1

1、each方法 2

2、jQuery中的ajax操做 3

1、ajax的底層實現 4

2、ajax的高級實現 7

1）模擬發送get請求 7

2）經過時間戳解決get請求緩存問題 8

3）模擬post請求 8

4）返回值類型 9

3、Ajax跨域請求——jsonp技術 11

1、Ajax跨域請求原理圖 11

2、Ajax跨域請求不被容許的緣由 11

3、jsonp協議 12

4、經過jsonp返回大批量數據 13

4、jQuery中的跨域請求 15

1、經過jQuery的ajax底層實現$.ajax()解決跨域問題 15

2、經過$.get()方法解決跨域請求 16

3、$.getJSON()方法解決跨域請求 17

5、天氣預報 18

1、原理圖 18

2、代碼實現 18

6、那些年濤哥追過的jQuery插件 19

1、Lightbox 19

2、jquery.rotate.min.js插件 19

3、ValidateForm 20

4、多文件上傳 20

5、jquery.lazyload.js 21

6、jQuery Mobile 21

一、each方法

功能：用於遍歷jQuery對象

基本語法：

jQuery對象.each(callback)：該函數只有一個參數，要求是一個callback函數，函數的格式以下：

function callback(i,item){}

參數說明：

jQuery對象中擁有多少個元素，那麼咱們的callback函數就會自動執行多少次。

i：遍歷時，系統會自動將當前元素的索引下標放入變量i中，默認從0開始

item：便利是，系統會自動將當前元素的自己放入變量item中，其就是當前的dom對象

例1：經過each實現對三個層的內容進行遍歷，並更改其內容爲第1個div元素…

運行效果：

例2：替換當前頁面的img中的src屬性更換爲不一樣的三張圖片

demo02_each.html

運行效果：

二、jQuery中的ajax操做

若是是get請求，就要分5步

若是是post請求，就要分6步

//1)建立Ajax對象

var xhr = createXhr();

//2)設置回調函數

xhr.onreadystatechange = function(){

//6)判斷與執行

}

//3)初始化ajax

xhr.open(‘post’,’demo01.php’);

//4)設置請求頭信息

xhr.setRequestHeader(‘Content-type’,’application/x-www-form-urlencoded’);

//5)發送ajax請求

xhr.send(data);

在jQuery中的ajax實現有二種方式，三種方法

方式一：ajax的底層實現

l jQuery.ajax(options)

方式二：ajax的高級實現

l jQuery.get(url,[data],[callback])

l jQuery.post(url,[data],[callback])

一、ajax的底層實現

jQuery.ajax(options) === $.ajax

參數說明：

options：要求該參數爲一個json對象

l async ：是否異步 ，默認爲true

l cache ：緩存，bool類型，true：緩存，false：不緩存，默認爲true

l complete ：當ajax狀態碼爲4時，所觸發的回調函數

l contentType ：設置請求頭信息

l data ：ajax發送時，所傳遞的參數，要求是一個字符串

l dataType ：期待的返回值類型，text,xml,json，默認爲text

l success ：當ajax狀態爲4且http響應狀態碼爲200所觸發的回調函數

l type ：ajax發送的請求類型：get,post

l url ：請求的url地址

例1：

demo03_ajax.html

效果：

注：運行以上代碼，咱們發現，當在IE瀏覽器下運行時，系統仍是會產生緩存問題，那麼如何解決緩存呢？

答：能夠經過cache方式解決緩存問題

例2：

例3：經過ajax發送數據到服務器端

返回結果：hello zhangsan

例4：經過ajax發送post請求

返回結果：hello zhangsan

注：在ajax底層實現中能夠不添加請求頭信息，系統會自動追加請求頭到發送數據中

例5：經過ajax底層實現返回兩個數的四則

返回值類型

text文本、xml格式、json格式

運行結果：

二、ajax的高級實現

l jQuery.get(url,[data],[callback]) ：模擬ajax的get請求

l jQuery.post(url,[data],[callback]) ：模擬ajax的post請求

參數說明：

url：要請求的url地址

[data]：要發送的數據，要求該參數爲json對象

[callback]：當ajax狀態碼爲4且http響應狀態碼爲200時，所觸發的回調函數

[type]：期待的返回值類型，text,xml,json

1）模擬發送get請求

經過運行可知，雖然以上程序能夠正常運行，但仍是存在緩存問題，那麼如何解決呢？

2）經過時間戳解決get請求緩存問題

運行效果：

3）模擬post請求

運行效果：

‘

4）返回值類型

1）xml數據的解析

結果以下：

2）經過jQuery方式進行解析

var person=$(msg).find(「person」);

person.children(「name」).text());

person.children(「jian」).text());

person.children(「cheng」).text());

運行結果：

2）json數據的解析

運行效果：