JQuery（三）-- AJAX的深入理解以及JQuery的使用
HTTP
HTTP
http: 超文本傳輸協議。特點：? 簡單、快速、靈活、無狀態、無連接
URL： 統一資源定位符。
組成：協議名://主機IP：端口號/項目資源地址？傳遞參數的鍵值對#錨點
①ip地址在同一個網段是唯一的。如果是在公網中，整個公網的ip是唯一的。
②端口號默認是:80，可以省略不寫。常見的端口號:8080---tomcat,80---Apache
③本機IP： localhost 或者???? 127.0.0.1
?
常見的狀態碼：
??? 1XX：信息狀態碼
??????? 100 Continue 繼續，一般在發送post請求時，已發送了http header之后服務端將返回此信息，表示確認，之后發送具體參數信息
??? 2XX：成功狀態碼
??????? 200 OK 正常返回信息
??????? 201 Created 請求成功并且服務器創建了新的資源
??????? 202 Accepted 服務器已接受請求，但尚未處理
??? 3XX：重定向
??????? 301 Moved Permanently 請求的網頁已永久移動到新位置。
??????? 302 Found 臨時性重定向。
??????? 303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。
??????? 304 Not Modified 自從上次請求后，請求的網頁未修改過。
??? 4XX：客戶端錯誤
??????? 400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
??????? 401 Unauthorized 請求未授權。
??????? 403 Forbidden 禁止訪問。
??????? 404 Not Found 找不到如何與 URI 相匹配的資源。
??? 5XX: 服務器錯誤
??????? 500 Internal Server Error 最常見的服務器端錯誤。
??????? 503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護）。
JSON對象和JS字符串
1.JSON對象：? JSON對象就是鍵值對的集合，鍵與值之間用冒號分隔，多對鍵值對之間用逗號分隔。
注意：JSON對象，要求鍵必須是雙引號包裹的字符串。用單引號無效。
2.JSON字符串：將JSON對象，用字符串的形式進行包裹。
3.JSON對象與JSON字符串的互相轉換。
①對象 --> 字符串：JSON.stringify();
②字符串 --> 對象：JSON.parse();?? ????
JQuery也提供了字符串轉對象的方法：$.parseJSON();
1 var jsonObj = { 2 "name" : "zhangsan", 3 "age" : "12", 4 "sex" : "男" 5 }; 6 7 //JSON字符串 8 var jsonObj1 = '{"name" : "zhangsan","age" : "12","sex" : "男"}'; 9 10 var jsonObj2 = "{\"name\" : \"zhangsan\",\"age\" : \"12\",\"sex\" : \"男\"}"; 11 12 //JS中將JSON字符串轉化成JSON對象 13 console.log(JSON.parse(jsonObj1)); 14 15 //JS中將JSON對象轉化成JSON字符串 16 console.log(JSON.stringify(jsonObj)); 17 18 //JQuery中將JSON字符串轉化成JSON對象 19 console.log($.parseJSON(jsonObj2));4.JSON數組：將多個JSON對象組成數組的形式存放，稱為JSON數組。
JSON數組可以和JSON對象相互嵌套，也就是說JSON對象的值可以是JSON數組。
1 var jsonArr = [ 2 { 3 "name":"zhangsan", 4 "hobby":[{"0":"0"},{"1":"1"}] 5 }, 6 { 7 "name":"zhangsan", 8 "hobby":[{"0":"0"},{"1":"1"}] 9 }, 10 { 11 "name":"zhangsan", 12 "hobby":[{"0":"0"},{"1":"1"}] 13 } 14 ];AJAX
AJAX：Asynchronous Javascript And XML（異步的Javascript和XML）。
AJAX是一種用于創建快速動態網頁的技術。通過在后臺與服務器進行少量數據交換，AJAX可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
?
Ajax應用場景：
場景1 數據驗證
場景2 按需取數據
場景3 自動更新頁面
?
JQuery對Ajax操作進行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是load()、$.get()和$.post()方法，第3層就是$.getScript()和$.getJSON()方法。
?
1、load()方法：載入HTML文檔
load()方法是jQuery中最為簡單和常用的Ajax方法，能載入遠程HTML代碼并插入DOM中。它的結構為：load(url[,data][,callback]);
| 參數名稱 | 類型 | 說明 |
| url | String | 請求HTML頁面的URL地址 |
| data（可選） | Object | 發送至服務器的key/value數據,JSON字符串 |
| callback（可選） | Function | 請求完成時的回調函數，無論請求成功還是失敗，加載完成后會執行函數 |
type:表示ajax請求的方法，可以是get和post。
url：表示請求的后臺URL地址。
success：表示請求成功的回調函數。回調函數接收三個參數：參數1--請求成功接受的數據。
error:當請求失敗時，執行的回調函數。
complete：請求完成后，無論成功還是失敗都會執行的函數。
statusCode：接收一個對象，對象的鍵是各種狀態碼，對象的值表示每種狀態碼對應的回調函數。
async：設為true為異步，false為同步。默認是true
data：請求時，向后臺傳遞的數據，是一個對象類型，以鍵值對的形式分別表示name：value
dataType：預期返回的數據類型格式。常見的有JSON/text/html
timeout:設置請求超時時間。?? ?
注意：使用數據時，需要注意返回的數據是JSON字符串還是JSON對象。
| 方法 | 作用 |
| url | 請求的地址 |
| type | 請求的方式 |
| dataType | 告訴jQuery，需要按照什么格式對服務器返回的數據進行解析，默認json。 |
| async | 設為true表示異步請求，設為false表示同步請求。默認為true |
| data | 往后臺傳遞的數據 |
| success | 請求成功的回調函數，返回data數據 |
| error | 請求失敗的回調函數 |
| beforeSend | 請求發送之前調用的函數 |
| complete | 不論請求是成功還是失敗的，只要請求完成就會調用 |
| statusCode | 接收一個對象，對象的鍵是各種狀態碼，對象的值表示每種狀態碼對應的回調函數。 |
| timeout | 設置請求超時時間 |
[JS中的同源策略]
在JS中，當請求其他文件時，要求被請求文件與當前文件必須處于同一主機名，同一個協議名，同一個端口號下，否則請求將不能成功，如果要請求非同源文件，必須進行跨域請求設置。
?
3.如果需要向服務器傳遞參數的話，可以使用$.get()方法和$.post()方法還有后面的$.ajax方法。
$.get()/$.post():在$.ajax()的基礎上，進行封裝，默認使用get請求。
接收4個參數：
?? ? (1)請求的后臺Url
?? ? (2)傳遞給后臺的數據，對象類型，相當于ajax中的data屬性。
?? ? (3)請求成功的回調函數，相當于ajax中的success
?? ? (4)預期返回的數據類型，相當與ajax中的dataType
?$.get()方法/$.post()方法
| 參數名稱 | 類型 | 說明 |
| url | String | 請求HTML頁面的URL地址 |
| data（可選） | Object | 發送至服務器的key/value數據，會作為字符串憑接在url的后面 |
| callback（可選） | Function | 請求完成時的回調函數(只有當Response的返回狀態是success的時候，才調用該函數) |
| type （可選） | String | 服務器返回內容的格式，包括xml、html、script、json、text、_default |
?
4.$.getJSON()：通過Get的方式，請求JSON數據。
?
5.serialize()方法會將表單中所有的內容拼接成key=value&key=value這樣的字符串。
?
$("#form input[type='button']:eq(0)").on("click",function(){var str = $("form:eq(0)").serialize();console.log(str);});?
6.serializeArray()方法會將表單中所有的內容拼接成字符數組。
?
1 $("#form input[type='button']:eq(1)").on("click",function(){ 2 3 var arr = $("form:eq(0)").serializeArray(); 4 5 var obj = {}; 6 $.each(arr, function(index,item) { 7 var keys = item.name; 8 var value = item.value; 9 obj[keys] = item.value; 10 }); 11 12 console.log(JSON.stringify(obj)); 13 });?
使用JQuery插件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style type="text/css"> 8 .error{ 9 color: red; 10 } 11 </style> 12 13 <script src="js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script> 14 <script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script> 15 <script src="js/messages_zh.min.js" type="text/javascript" charset="utf-8"></script> 16 17 <script type="text/javascript"> 18 $(function(){ 19 20 $("form:eq(0)").validate({ 21 debug:true,//至驗證不提交表單 22 rules:{//規則 23 username:{ 24 required:true, 25 maxlength:16, 26 minlength:6 27 } 28 }, 29 messages:{//提示信息 30 username:{ 31 required:"必須輸入", 32 maxlength:"長度不能大于16", 33 minlength:"長度不能小于16" 34 } 35 }, 36 }); 37 38 }) 39 </script> 40 41 </head> 42 <body> 43 44 <form id="form"> 45 46 用戶名：<input type="text" name="username" /><br /> 47 密 碼：<input type="password" name="pwd" /><br /> 48 確認密碼：<input type="password" name="rpwd" /><br /> 49 郵 箱：<input type="text" name="email" /><br /> 50 51 <input type="submit" value="提交"/> 52 </form> 53 54 </body> 55 </html>?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的JQuery（三）-- AJAX的深入理解以及JQuery的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iview-admin框架运行步骤
- 下一篇： React组件实现越级传递属性