隨著時(shí)代的更新，網(wǎng)民開(kāi)始逐漸適應(yīng)使用手機(jī)來(lái)進(jìn)行網(wǎng)上活動(dòng)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

1、cookie的作用：

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

說(shuō)到前端, 大家第一反應(yīng)是不是都是vue、react、webpack等這些大大小小的框架或者工具, 但其實(shí)這些都是和js相關(guān)的, 真正的樣式會(huì)被大家忽略。其實(shí)真正呈現(xiàn)給大家看到華麗的頁(yè)面, 都是樣式才讓他們多了那份色彩。那么大家覺(jué)得簡(jiǎn)單的css樣式, 真的簡(jiǎn)單么? 讓我們一起來(lái)看下, 開(kāi)啟css的入坑之旅, 今天一起跟大家簡(jiǎn)單聊聊盒模型的相關(guān)問(wèn)題......

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

什么是代理模式

"這是移動(dòng)端界面設(shè)計(jì)規(guī)范尺寸安卓篇也是第二篇小總結(jié)，主講如何一稿去適配眾多的安卓機(jī)型。如果你有興趣也可以去官方研讀下設(shè)計(jì)文檔，這樣的話，就可以比較系統(tǒng)的掌握知識(shí)。

每次QQ有新的重要版本發(fā)布時(shí)，移動(dòng)端的介紹使用了HTML5頁(yè)面，通過(guò)7個(gè)獨(dú)立的頁(yè)面簡(jiǎn)潔地介紹了它的主要功能。在每個(gè)頁(yè)面切換時(shí)伴隨著背景圖片的切換，讓介紹頁(yè)面生動(dòng)有趣。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

說(shuō)到前端, 大家第一反應(yīng)是不是都是vue、react、webpack等這些大大小小的框架或者工具, 但其實(shí)這些都是和js相關(guān)的, 真正的樣式會(huì)被大家忽略。其實(shí)真正呈現(xiàn)給大家看到華麗的頁(yè)面, 都是樣式才讓他們多了那份色彩。那么大家覺(jué)得簡(jiǎn)單的css樣式, 真的簡(jiǎn)單么? 讓我們一起來(lái)看下, 開(kāi)啟css的入坑之旅, 今天一起跟大家簡(jiǎn)單聊聊盒模型的相關(guān)問(wèn)題......

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

一、Ajax的XMLHttpRrequest對(duì)象

Ajax的核心是XMLHttpRequest對(duì)象（發(fā)送異步請(qǐng)求、接受響應(yīng)及執(zhí)行回調(diào)），它是ajax實(shí)現(xiàn)的關(guān)鍵

XMLHttpRequest對(duì)象的open()方法與send()方法

請(qǐng)求類型，GET 還是 POST？

與 POST 相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用。

然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：

• 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
• 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）
• 發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

(1). GET請(qǐng)求

(2). POST請(qǐng)求

async參數(shù)設(shè)置

XMLHttpRequest對(duì)象如果要用于AJAX的話，其open()方法的async參數(shù)必須設(shè)置為true

通過(guò) AJAX，JavaScript 無(wú)需等待服務(wù)器的響應(yīng)，而是：

• 在等待服務(wù)器響應(yīng)時(shí)執(zhí)行其他腳本
• 當(dāng)響應(yīng)就緒后對(duì)響應(yīng)進(jìn)行處理

(1). 當(dāng)使用 async=true 時(shí)，請(qǐng)規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時(shí)執(zhí)行的函數(shù)：

(2). 當(dāng)您使用 async=false 時(shí)，請(qǐng)不要編寫(xiě) onreadystatechange 函數(shù) - 把代碼放到 send() 語(yǔ)句后面即可：

服務(wù)器響應(yīng)

使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。

(1). 如果來(lái)自服務(wù)器的響應(yīng)并非 XML，請(qǐng)使用 responseText 屬性。

responseText 屬性返回字符串形式的響應(yīng)，因此您可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

(2). 如果來(lái)自服務(wù)器的響應(yīng)是 XML，而且需要作為 XML 對(duì)象進(jìn)行解析，請(qǐng)使用 responseXML 屬性

[javascript] view plain copy

1. xmlDoc=xmlhttp.responseXML;  
2. txt="";  
3. x=xmlDoc.getElementsByTagName("ARTIST");  
4. for (i=0;i<x.length;i++)  
5.   {  
6.   txt=txt + x[i].childNodes[0].nodeValue + "<br />";  
7.   }  
8. document.getElementById("myDiv").innerHTML=txt;  

onreadystatechange事件

當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。

每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

下面是 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：

Ajax()函數(shù)示例：

• 定義一個(gè)函數(shù)，用于異步獲取信息

[javascript] view plain copy

1. function Ajax(){  
2.     //code  
3. }  

• 聲明一個(gè)空對(duì)象來(lái)裝入XMLHttpRequest對(duì)象

[javascript] view plain copy

1. var xmlHttpReq = null;  

• 給XMLHttpRequest對(duì)象賦值

[javascript] view plain copy

1. if(window.ActiveXObject){  
2.     xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");  
3. }else if(window.XMLHttpRequest){  
4.     xmlHttpReq = new XMLHttpRequest();  
5. }  

IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest對(duì)象的，而其他瀏覽器的XMLHttpRequest對(duì)象是window的子對(duì)象。

• • 實(shí)例化后，使用open()方法初始化XMLHttpRequest對(duì)象，指定HTTP方法和要使用的服務(wù)器URL

[javascript] view plain copy

1. xmlHttpReq.open("GET","test.php",true);  

• 因?yàn)橐鲆粋€(gè)異步調(diào)用，所以需要注冊(cè)一個(gè)XMLHttpRequest對(duì)象將調(diào)用的回調(diào)事件處理器當(dāng)做它的readystate值改變時(shí)調(diào)用。當(dāng)readyState值改變時(shí)，會(huì)激發(fā)一個(gè)readystatechange事件，可以使用onreadystatechange屬性來(lái)注冊(cè)該回調(diào)事件處理器。

[javascript] view plain copy

1. xmlHttpReq.onreadystatechange = RequestCallBack;  

• 使用send()方法發(fā)送請(qǐng)求，因?yàn)檫@個(gè)請(qǐng)求使用的是HTTP的“GET”方式，所以可以在不指定參數(shù)或使用null參數(shù)的情況下調(diào)用send()方法

[javascript] view plain copy

1. xmlHttpReq.send(null);  

當(dāng)請(qǐng)求改變時(shí)，XMLHttpRequest對(duì)象調(diào)用onreadystatechange屬性注冊(cè)的事件處理器，因此在處理該響應(yīng)前，事件處理器首先應(yīng)該檢查readyState的值和HTTP的狀態(tài)。當(dāng)請(qǐng)求完成加載時(shí)（readyState==4）并且已經(jīng)響應(yīng)成功（status==200）時(shí)，就可以調(diào)用JavaScript函數(shù)來(lái)處理該響應(yīng)內(nèi)容。

[javascript] view plain copy

1. function RequestCallBack(){  
2.     if (xmlHttpReq.readyState == 4) {  
3.         if (xmlHttpReq.status == 200) {  
4.             //將xmlHttpReq.responText的值賦予id為resText的元素  
5.             document.getElementById('resText').innerHTML = xmlHttpReq.responText;  
6.         }  
7.     }  
8. }  

二、jQuery中的Ajax

jQuery對(duì)Ajax操作進(jìn)行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是load()、$.get()、$.post()方法，第3層是$.getScript()、$.getJSON()方法

1、load()方法    通常用來(lái)從WEB服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件

最常用的Ajax方法，能載入遠(yuǎn)程HTML代碼并插入DOM中

load(url[,data][,callback]);

• url：String    請(qǐng)求HTML頁(yè)面的URL地址
• data：Object    發(fā)送至服務(wù)器的key/value數(shù)據(jù)
• callback：Function    請(qǐng)求完成時(shí)的回調(diào)函數(shù)，無(wú)論請(qǐng)求成功或失敗

[javascript] view plain copy

1. $(function(){  
2.     $("#send").click(function(){  
3.         $("#resText").load("test.html");  
4.     })  
5. })  

[javascript] view plain copy

1. <button type="button" id="send">ajax加載</button>  
2. <div class="comment">已有評(píng)論：</div>  
3. <div id="resText">替換內(nèi)容</div>  

test.html代碼為：

[javascript] view plain copy

1. <div class="comment">  
2.     <h6>張三：</h6>  
3.     <p class="para">沙發(fā)</p>  
4. </div>  
5. <div class="comment">  
6.     <h6>李四：</h6>  
7.     <p class="para">板凳</p>  
8. </div>  
9. <div class="comment">  
10.     <h6>王五：</h6>  
11.     <p class="para">地板</p>  
12. </div>  

篩選載入的HTML文檔

load()方法的URL參數(shù)的語(yǔ)法結(jié)構(gòu)為：“url selector”

[javascript] view plain copy

1. $("#resText").load("test.html .para");  

load()傳遞方式根據(jù)參數(shù)data自動(dòng)指定，沒(méi)有參數(shù) --> GET，反之為POST   

[javascript] view plain copy

1. // 無(wú)參數(shù)傳遞 GET  
2. $("#resText").load("test.html",function(){  
3.     //code  
4. });  
5. // 有參數(shù)傳遞 POST  
6. $("#resText").load("test.html",{name:"rain",age:"22"},function(){  
7.     //code  
8. });  

回調(diào)函數(shù)：有三個(gè)參數(shù)，請(qǐng)求返回的內(nèi)容、請(qǐng)求狀態(tài)、XMLHttpRequest對(duì)象

[javascript] view plain copy

1. // 回調(diào)函數(shù)  
2. $("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){  
3.     //responseText  請(qǐng)求返回的內(nèi)容  
4.     //textStatus    請(qǐng)求狀態(tài)：success、error、notmodified、timeout  
5.     //XMLHttpRequest    XMLHttpRequest對(duì)象  
6. });  

2、$.get()和$.post()方法    jQuery中的全局函數(shù)

2.1 $.get()    使用GET方式來(lái)進(jìn)行異步請(qǐng)求

[javascript] view plain copy

1. $.get(url[,data][,callback][,type]);  

• url：String    請(qǐng)求HTML頁(yè)面的URL地址
• data：Object    發(fā)送至服務(wù)器的key/value數(shù)據(jù)會(huì)作為QueryString附加到請(qǐng)求URL中
• callback：Function    載入成功時(shí)回調(diào)函數(shù)（只有當(dāng)response的返回狀態(tài)是success才調(diào)用該函數(shù)）自動(dòng)將請(qǐng)求結(jié)果和狀態(tài)傳遞給該方法
• type：服務(wù)器返回內(nèi)容的格式，包括html、xml、script、json、text、_default

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get1.php",{  
3.         username:$("#username").val(),  
4.         content:$("#comment").val()  
5.     },function(data,textStatus){  
6.         // data：返回的內(nèi)容  
7.         // textStatus：請(qǐng)求狀態(tài)，success、error、notmodified、timeout  
8.     })  
9. })  

數(shù)據(jù)格式：服務(wù)器返回的數(shù)據(jù)格式

（1）HTML片段    較少工作量

[javascript] view plain copy

1. $.get("get1.php",{  
2.     username:$("#username").val(),  
3.     content:$("#comment").val()  
4. },function(data,textStatus){  
5.     // data：返回的內(nèi)容  
6.     // textStatus：請(qǐng)求狀態(tài)，success、error、notmodified、timeout  
7.     $("#resText").html(data);   //將返回的數(shù)據(jù)添加到頁(yè)面上  
8. });  

（2） XML文檔    需要對(duì)返回的數(shù)據(jù)處理

方便使用

可以通過(guò)attr()、find()、filter()方法對(duì)數(shù)據(jù)進(jìn)行處理

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get1.php", {   
3.         username :  $("#username").val() ,   
4.         content :  $("#content").val()    
5.     }, function (data, textStatus){  
6.         var username = $(data).find("comment").attr("username");  
7.         var content = $(data).find("comment content").text();  
8.         var txtHtml = "<div class='comment'><h6>"+username  
9.                     +":</h6><p class='para'>"+content+"</p></div>";  
10.         $("#resText").html(txtHtml); // 把返回的數(shù)據(jù)添加到頁(yè)面上  
11.     });  
12. })  

由于期待服務(wù)器返回的數(shù)據(jù)類型為XML文檔，因此需要在服務(wù)期端設(shè)置Content-Type類型

[javascript] view plain copy

1. header("Content-Type:text/html; charset=utf-8");  

（3）JSON文件    需要對(duì)返回的數(shù)據(jù)處理

JSON相對(duì)于XML比較簡(jiǎn)潔

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get3.php", {   
3.         username :  $("#username").val() ,   
4.         content :  $("#content").val()    
5.     }, function (data, textStatus){  
6.         var username = data.username;  
7.         var content = data.content;  
8.         var txtHtml = "<div class='comment'><h6>"+username  
9.                     +":</h6><p class='para'>"+content+"</p></div>";  
10.         $("#resText").html(txtHtml); // 把返回的數(shù)據(jù)添加到頁(yè)面上  
11.     },"json");  
12. })  

以上三種方法對(duì)比：

HTML返回?cái)?shù)據(jù)最簡(jiǎn)單，如果數(shù)據(jù)需要重用使用JSON（性能與文件大小方面有優(yōu)勢(shì)），當(dāng)遠(yuǎn)程程序未知時(shí)使用XML。

2.2 $.post()    通過(guò) HTTP POST 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)

[javascript] view plain copy

1. $.post(URL[,data][,callback]);  

• url：String    請(qǐng)求的URL地址
• data：Object    發(fā)送至服務(wù)器的key/value數(shù)據(jù)
• callback：Function    載入成功時(shí)的回調(diào)函數(shù)

由于POST和GET方式提交的所有數(shù)據(jù)都可以通過(guò)$_REQUEST[]來(lái)獲取，因此只需要改變jQuery函數(shù)，就可以將程序在GET請(qǐng)求和POST請(qǐng)求之間切換。

當(dāng)load()方法帶有參數(shù)傳遞時(shí)，會(huì)使用POST方式發(fā)送請(qǐng)求。因此也可以使用load()方法來(lái)完成同樣的功能。

$.post()與$.get()方法的區(qū)別：

• GET請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞，而POST請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器。當(dāng)然，在Ajax請(qǐng)求中，這種區(qū)別對(duì)用戶是不可見(jiàn)的。
• GET方式對(duì)傳輸?shù)臄?shù)據(jù)有大小限制（通常不能大于2KB），而使用POST方式傳遞的數(shù)據(jù)量要比GET方式大得多（理論上不受限制）。
• GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來(lái)，因此其他人就可以從瀏覽器的歷史記錄中讀取到這些數(shù)據(jù)，例如賬號(hào)和密碼等。在某種情況下，GET方式會(huì)帶來(lái)嚴(yán)重的安全性問(wèn)題，而POST方式相對(duì)來(lái)說(shuō)就可以避免這些問(wèn)題。
• GET方式和POST方式傳遞的數(shù)據(jù)在服務(wù)器端的獲取也不相同。在PHP中，GET方式的數(shù)據(jù)可以用$_GET[]獲取，而POST方式可以用$_POST[]獲取。兩種方式都可以用$_REQUEST[]來(lái)獲取。

      上面使用load()、$.get()和$.post()方法完成了一些常規(guī)的Ajax程序，如果還需要編寫(xiě)一些復(fù)雜的Ajax程序，那么就要用到j(luò)Query中的$.ajax()方法。$.ajax()方法不僅能實(shí)現(xiàn)與load()、$.get()和$.post()方法同樣的功能，而且還可以設(shè)定beforeSend（提交前回調(diào)函數(shù)）、error（請(qǐng)求失敗后處理）、success（請(qǐng)求成功后處理）以及complete（請(qǐng)求完成后處理）回調(diào)函數(shù)，通過(guò)這些回調(diào)函數(shù)，可以給用戶更多的Ajax提示信息。另外，還有一些參數(shù)，可以設(shè)置Ajax請(qǐng)求的超時(shí)時(shí)間或者頁(yè)面的“最后更改”狀態(tài)等。

3、$.getScript()和$.getJSON()方法

3.1 $.getScript()

有時(shí)候，在頁(yè)面初次加載時(shí)就取得所需的全部JavaScript文件是完全沒(méi)有必要的。雖然可以在需要哪個(gè)JavaScript文件時(shí)，動(dòng)態(tài)地創(chuàng)建<script>標(biāo)簽

[javascript] view plain copy

1. $(document.createElement("script").attr("src","test.js")).appenChild("head");  
2. //或  
3. $("<script type='text/javscript' src='test.js'></script>").appendChild("head");  

上述方法不理想，jQuery又提供了$.getScript()方法

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getScript("test.js");  
4.     })  
5. })  

有回調(diào)函數(shù)

[javascript] view plain copy

1. $.getScript("test.js",function(){  
2.     $(element).click(function(){  
3.         $(element).animate({backgroundcolor:'pink'},1000)  
4.         .animate({backgroundcolor:'coral'},1000);  
5.     })  
6. });  

3.2 $.getJSON()方法    用于加載JSON文件，用法同$.getScript()方法

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json");  
4.     })  
5. })  

上面函數(shù)雖然加載了JSON代碼，但是并沒(méi)有告訴JS對(duì)返回的數(shù)據(jù)如何處理，所以需要回調(diào)函數(shù)

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json",function(){  
4.             //data：返回的數(shù)據(jù)  
5.         });  
6.     })  
7. })  

jQuery遍歷方法  -->  $.each()方法    遍歷對(duì)象和數(shù)組

$.each(data,callback)    // 為全局函數(shù)   不同于each()方法

• data：數(shù)組或?qū)ο?

• callback：回調(diào)函數(shù)，有兩個(gè)參數(shù)（對(duì)象的成員或數(shù)組的索引，對(duì)應(yīng)變量或內(nèi)容）

4、$.ajax()方法    jQuery最底層的Ajax實(shí)現(xiàn)

$.ajax(options);

前面用到的$.load()、$.get()、$.post()、$.getScript()和$.getJSON()這些方法，都是基于$.ajax()方法構(gòu)建的，$.ajax()方法是jQuery最底層的Ajax實(shí)現(xiàn)，因此可以用它來(lái)代替前面的所有方法。

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getScript("test.js");  
4.     })  
5. })  

可被替換為

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.ajax({  
4.             type:"GET",  
5.             url:"test.js",  
6.             dataType:"script"  
7.         });  
8.     });  
9. })  

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json",function(data){  
4.                 $("#resText").empty();  
5.                 var html = " ";  
6.                 $.each(data,function(commentIndex,comment){  
7.                     html+='<div class="comment"><h6>'+comment['username']  
8.                          +'</h6><p class="para">'+comment['content']  
9.                          +'</p></div>'  
10.                 })  
11.                 $("resText").html(html);  
12.             }  
13.         });  
14.     });  
15. })  

可被替換為

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.ajax({  
4.             type:"GET",  
5.             url:"test.json",  
6.             dataType:"json",  
7.             success:function(data){  
8.                 $("#resText").empty();  
9.                 var html = " ";  
10.                 $.each(data,function(commentIndex,comment){  
11.                     html+='<div class="comment"><h6>'+comment['username']  
12.                          +'</h6><p class="para">'+comment['content']  
13.                          +'</p></div>'  
14.                 })  
15.                 $("resText").html(html);  

1. })

} }); });

三、序列化元素

1．serialize()方法

異步提交表單，并將服務(wù)器返回的數(shù)據(jù)顯示到當(dāng)前頁(yè)面中

[javascript] view plain copy

1. $.get("get1.php",{  
2.     username:$("#username").val(),  
3.     content:$("#comment").val()  
4. },function(data,textStatus){  
5.     // data：返回的內(nèi)容  
6.     // textStatus：請(qǐng)求狀態(tài)，success、error、notmodified、timeout  
7.     $("#resText").html(data);   //將返回的數(shù)據(jù)添加到頁(yè)面上  
8. });  

serialize()方法也是作用于一個(gè)jQuery對(duì)象，它能夠?qū)OM元素內(nèi)容序列化為字符串，用于Ajax請(qǐng)求。可將上述代碼簡(jiǎn)化為：

[javascript] view plain copy

1. $.get("get1.php",$("#form1").serialize(),function(data,textStatus){  
2.     // data：返回的內(nèi)容  
3.     // textStatus：請(qǐng)求狀態(tài)，success、error、notmodified、timeout  
4.     $("#resText").html(data);   //將返回的數(shù)據(jù)添加到頁(yè)面上  
5. });  

serialize()方法作用于jQuery對(duì)象，所以不光只有表單能使用它，其他選擇器選取的元素也都能使用它，如以下jQuery代碼：

[javascript] view plain copy

1. $(":checkbox,:radio").serialize();  

把復(fù)選框和單選框的值序列化為字符串形式，只會(huì)將選中的值序列化。

2．serializeArray()方法

該方法不是返回字符串，而是將DOM元素序列化后，返回JSON格式的數(shù)據(jù)

3．$.param()方法

它是serialize()方法的核心，用來(lái)對(duì)一個(gè)數(shù)組或?qū)ο蟀凑誯ey/value進(jìn)行序列化。

比如將一個(gè)普通的對(duì)象序列化：

四、jQuery中的全局事件

jQuery簡(jiǎn)化Ajax操作不僅體現(xiàn)在調(diào)用Ajax方法和處理響應(yīng)方面，而且還體現(xiàn)在對(duì)調(diào)用Ajax方法的過(guò)程中的HTTP請(qǐng)求的控制。通過(guò)jQuery提供的一些自定義全局函數(shù)，能夠?yàn)楦鞣N與Ajax相關(guān)的事件注冊(cè)回調(diào)函數(shù)。例如當(dāng)Ajax請(qǐng)求開(kāi)始時(shí)，會(huì)觸發(fā)ajaxStart()方法的回調(diào)函數(shù)；當(dāng)Ajax請(qǐng)求結(jié)束時(shí)，會(huì)觸發(fā)ajaxStop()方法的回調(diào)函數(shù)。這些方法都是全局的方法，因此無(wú)論創(chuàng)建它們的代碼位于何處，只要有Ajax請(qǐng)求發(fā)生時(shí)，就會(huì)觸發(fā)它們。

有時(shí)，當(dāng)網(wǎng)頁(yè)加載過(guò)慢時(shí)，就需要為網(wǎng)頁(yè)添加一個(gè)提示信息，常用的提示信息是“加載中…”，代碼如下：

[javascript] view plain copy

1. <div class="loading">加載中...</div>  

然后通過(guò)CSS控制元素隱藏，當(dāng)Ajax請(qǐng)求開(kāi)始的時(shí)候，將此元素顯示，用來(lái)提示用戶Ajax請(qǐng)求正在進(jìn)行。當(dāng)Ajax請(qǐng)求結(jié)束后，將此元素隱藏。

[javascript] view plain copy

1. $("$loading").ajaxStart(function(){  
2.     $(this).show();  
3. }).ajaxStop(function(){  
4.     $(this).hide();  
5. });  

jQuery的Ajax全局事件中還有幾個(gè)方法，也可以在使用Ajax方法的過(guò)程中為其帶來(lái)方便。

方法名稱	說(shuō)明
ajaxComplete(callback)	Ajax請(qǐng)求完成時(shí)執(zhí)行的函數(shù)
ajaxError(callback)	Ajax請(qǐng)求發(fā)生錯(cuò)誤時(shí)執(zhí)行的函數(shù)，捕捉到的錯(cuò)誤可以作為最后一個(gè)參數(shù)傳遞
ajaxSend(callback)	Ajax請(qǐng)求發(fā)送前執(zhí)行的函數(shù)
ajaxSuccess(callback)	Ajax請(qǐng)求成功時(shí)執(zhí)行的函數(shù)

注意：

1，如果想使某個(gè)Ajax請(qǐng)求不受全局方法的影響，那么可以在使用$.ajax(options)方法時(shí)，將參數(shù)中的global設(shè)置為false，jQuery代碼如下

[javascript] view plain copy

1. $.ajax({  
2.     url:"test.html",  
3.     global:false  
4. });  

2，在jQuery1.5版本之后，如果Ajax請(qǐng)求不觸發(fā)全局方法，那么可以設(shè)置：

[javascript] view plain copy

1. $.ajaxPrefilter(function(options){  
2.     options.global = true;  
3. })  

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

通常在PC上常出現(xiàn)的下拉菜單，在移動(dòng)端上都是用什么交互來(lái)實(shí)現(xiàn)的？將最近項(xiàng)目里碰到的情況總結(jié)一下。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

<?php echo <<<_END <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>點(diǎn)標(biāo)記</title>
    <link rel="stylesheet" />
    <style>
        .marker {
            color: #ff6600; padding: 4px 10px;
            border: 1px solid #fff; white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #0066ff;  } </style>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申請(qǐng)的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script> var marker, map = new AMap.Map("container", {
        resizeEnable: true, center: [126.60580555556, 45.702363888889], zoom: 13 }); var getJSON = function(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = 'json';
        xhr.onload = function() { var status = xhr.status; if (status == 200) {
            resolve(xhr.response);
          } else {
            reject(status);
          }
        };
        xhr.send();
      });
    };

    getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) { //alert('Your Json result is:  ' + jdata); //you can comment this, i used it to debug
        //alert(jdata.data[0].gpsx);
        //alert(jdata.data[0].gpsy); window.i=0; //addMarker(jdata.data[i].gpsx,jdata.data[i].gpsy); setInterval(function () { addMarker(jdata.data[window.i].gpsx,jdata.data[window.i].gpsy); },"1000");

    }, function(status) { //error detection.... alert('Something went wrong.');
    }); // 實(shí)例化點(diǎn)標(biāo)記 function addMarker(v1,v2) {

     window.i+=10;
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [v1,v2]
        });
        marker.setMap(map);
    } </script>
</body>
</html>

</script>
</body>
</html> _END; ?>

<?php echo<<<_END <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>點(diǎn)標(biāo)記</title>
    <link rel="stylesheet" />
    <style>
        .marker {
            color: #ff6600; padding: 4px 10px;
            border: 1px solid #fff; white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #0066ff;  } </style>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申請(qǐng)的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script> var marker, map = new AMap.Map("container", {
        resizeEnable: true, center: [126.60580555556, 45.702363888889], zoom: 13 }); var getJSON = function(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = 'json';
        xhr.onload = function() { var status = xhr.status; if (status == 200) {
            resolve(xhr.response);
          } else {
            reject(status);
          }
        };
        xhr.send();
      });
    };

    getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) {
        addMarker(jdata.data[0].gpsx,jdata.data[0].gpsy);
        window.i=1; //updateMarker(jdata.data[1].gpsx,jdata.data[1].gpsy); setInterval(function () { updateMarker(jdata.data[window.i].gpsx,jdata.data[window.i].gpsy); },"1000");

    }, function(status) { //error detection.... alert('Something went wrong.');
    }); // 實(shí)例化點(diǎn)標(biāo)記 function addMarker(v1,v2) {

        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [v1,v2]
        });
        marker.setMap(map);
    } function updateMarker(v1,v2) { //在地圖上更新標(biāo)記
        // 自定義點(diǎn)標(biāo)記內(nèi)容 window.i+=10; var markerContent = document.createElement("div"); // 點(diǎn)標(biāo)記中的圖標(biāo) var markerImg = document.createElement("img");
        markerImg.className = "markerlnglat";
        markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
        markerContent.appendChild(markerImg); // 點(diǎn)標(biāo)記中的文本 var markerSpan = document.createElement("span");
        markerSpan.className = 'marker';
        markerSpan.innerHTML = "Hi，我換新裝備啦！";
        markerContent.appendChild(markerSpan);

        marker.setContent(markerContent); //更新點(diǎn)標(biāo)記內(nèi)容 marker.setPosition([v1,v2]); //更新點(diǎn)標(biāo)記位置  } </script>
</body>
</html>

</script>
</body>
</html> _END; ?>