今天這篇文章呢，主要講的就是關於HTTP協議、Ajax請求以及一些相關的小知識點。雖然內容不算多，可是是很重點的東西~
HTTP協議
1. http:超文本傳輸協議。簡單、快速、靈活、無狀態、無連接。
2. url:統一資源定位符。
組成部分：協議名://主機名(主機ip):端口號/項目資源地址?傳遞參數的鍵值對#錨點
eg: http://192.168.5.151:8080/js/index.php?name=zhangsan#top
① ip地址在同一網段是唯一的。如果是在公網中，整個公網的i是唯一的。
② 端口號默認是:80，可以省略不寫。常見的端口號: 80 Apache 8080 tomcat
③ 本機ip：localhost 或者 127.0.0.1
【JSON 對象與JSON字符串】
1. JSON對象：JSON對象就是鍵值對的集合，鍵與值之間用:分隔，多對鍵值對之間用,分隔。
注意：JSON對象，要求鍵必須使用""包裹的字符串。''無效！！！
2. JSON字符串：將JSON對象，用字符串的形式進行包裹。可用單引號也可用雙引號;
如果用""包裹，里面用""包裹的鍵的雙引號要用\轉義符轉移。
var jsonObj='{"name" : "zhangsan",age: 12,sex : "男"}'; //報錯，不能不用雙引號包起來
var jsonObj="{'name' : 'zhangsan','age': 12,'sex' : "男"}"; //報錯，鍵必須用雙引號包起來
var jsonObj="{'name' : 'zhangsan',age: 12,sex : "男"}"; //報錯，不能單引號包着雙引號
3. JSON對象與JSON字符串的相互轉換：
① 對象轉字符串：JSON.stringify(obj)
② 字符串轉對象：JSON.parse(jsonObj)
JQuery也提供了字符串轉對象的方法：$.parseJSON(jsonObj)
console.log($.parseJSON(jsonObj)); //JSON對象轉為字符串
var jsonObj='{"name" : "zhangsan","age": 12,"sex" : "男"}'; console.log(jsonObj);//本身打印出來是個字符串
var obj=JSON.parse(jsonObj); //字符串轉對象
console.log(obj); var str=JSON.stringify(obj); //對象轉字符串
console.log(str);
4. JSON數組：將多個JSON對象組成數組的形式存放，稱為JSON數組。
JSON數組可以和JSON對象相互嵌套，也就是說，JSON對象的值可以是JSON數組。
//可以直接接收數組，數組內部有多個對象
var jsonArr=[ { "name":"zhangsan", "hobby":[{"吃":"水果","玩":"游戲"}] }, { "name":"zhangsan", "hobby":[{"吃":"水果","玩":"游戲"}] }, { "name":"zhangsan", "hobby":[{"吃":"水果","玩":"游戲"}] } ]; var strArr=JSON.stringify(jsonArr); //JSON對象轉數組
console.log(strArr); var jsonArr1=JSON.parse(strArr); //JSON數組轉為對象
console.log(jsonArr1)
后台請求數據的方法
1. $.load():選中當前界面的一個DOM節點。並在當前DOM節點中加載一塊HTML代碼片段；
接受的參數：
① 可以是一個html文件的地址，表示將整個的html文件加載到當前區域；
$("#div1").load("test.html");
② 可以是一個html文件+各種選擇器，表示選擇該頁面的指定區域進行加載。
$("#div1").load("test.html #ul");
2. $.ajax():是JQuery中最底層的ajax函數。
參數接收一個大對象，用對象的鍵值對表示ajax請求的相關設置：
① type:表示Ajax請求的方法，可以是get和post
② url:表示請求的后台url地址。
③ success：表示請求成功的回調函數。回調函數將接受三個參數，其中第一個參數是請求成功返回的數據。后兩個不用管不重要。
使用數據時，需注意返回的數據是JSON字符串還是JSON對象。
④ error:當請求失敗時執行的回調函數。
⑤ complete:請求完成后，無論成功或者失敗都會執行的回調函數.。
⑥ statusCode:接收一個對象，對象的鍵是各種status狀態碼，對象的值表示每種狀態碼對應的回調函數。
⑦ async:設為true表示異步請求(默認)；設為false表示同步請求。
⑧ data：請求時，向后台請求的數據，是一個對象類型，以鍵值對的形式分別表示 name:value。非常常用！！！！！
⑨ dataType：與其返回的數據類型格式。常見的有 JSON/text/html
⑩ timeout：設置請求超時時間。
$.ajax({ type:"get", url:"java1801.json?age=14", //往后台傳參(小數據)，也可以在后面加上?age=14
async:true, //是否進行異步請求，不寫默認是異步
data:{ //往后台傳參，以對象形式。發送到服務器的數據，將自動轉換為請求字符串格式。
"name":"zhangsan" }, dataType:"text", timeout:1,//設置請求超時時間。默認就行，不用寫
success:function(data,textStatus,jqXHR){ //請求成功返回的回調函數
console.log(data); //返回一個對象
console.log(textStatus);//請求成功返回success
console.log(jqXHR); //jqXHR對象
console.log(jqXHR.responseText) //返回字符串
console.log(jqXHR.responseJSON) //返回對象
}, error:function(XMLHttpRequest,textStatus,errorThrown){// 請求失敗返回的回調函數
console.log(XMLHttpRequest); //XMLHttpRequest對象
console.log(textStatus); //錯誤信息：error、timeout
console.log(errorThrown); //捕獲的異常對象：Not Found
}, complete:function(XHR,TS){ //返回success或者error ，不管請求成不成功都會執行
console.log(XHR); console.log(TS); }, statusCode:{ //請求成功或失敗的狀態碼
200:function(){ console.log("請求成功！") }, 404:function(){ console.log("頁面沒有找到") } }
【檢測頁面中所有Ajax狀態】
執行回調函數。可做了解。。。
$(document).ajaxStart(function(){ //Ajax請求開始時執行函數
console.log(ajaxStart); }); $(document).ajaxError(function(){ //Ajax請求發生錯誤時執行函數
console.log(ajaxError); }); $(document).ajaxSend(function(){ //Ajax請求發送前執行函數
console.log(ajaxSend); }); $(document).ajaxStop(function(){ //Ajax請求結束時執行函數
console.log(ajaxStop); }); $(document).ajaxSuccess(function(){ //Ajax請求成功時執行函數
console.log(ajaxSuccess); });
3. $.get():在$.ajax()的基礎上，進行封裝，默認使用get請求。
接受四個參數：
① 請求的后台url；
② 傳遞給后台的數據，對象類型。相當於ajax中的data屬性；
③ 請求成功的回調函數，相當於ajax中的success；
④ 預期返回的數據類型，相當於ajax中的dataType；
4. $.post():使用方法同$.get()
5. $.getJSON():通過get方式，請求JSON數據。
$.get("java.json",function(data){ console.log(data); },"text"); $.post("java.json",function(data){ console.log(data); },"json"); $.getJSON("java.json",function(data){ console.log(data); });
【Ajax請求三大過程】
同步：頁面代碼在遇到JS代碼時被阻斷，等待JS代碼請求完全完成后繼續執行。
異步：頁面代碼在遇到JS代碼時不會被阻斷，等待JS代碼請求完成后立即插入繼續執行。
<script src="js/jquery-1.10.2.js" async="async"></script> //異步
延遲：頁面代碼在遇到JS代碼時不會被阻斷，等到JS代碼請求完成后再等到頁面代碼加載完成后才能執行。
<script src="js/jquery-1.10.2.js" defer="defer"></script> //延時
常見的狀態碼
200-請求成功
202-服務器接受請求
400-代碼錯誤
403-訪問被拒絕
404-頁面沒找到
500-服務器錯誤
501-服務器不支持請求的功能
505-服務器不支持
以下我附上HTTP狀態碼詳解的鏈接，里面有更加清楚的解釋，大家可以自行查看：http://tool.oschina.net/commons?type=5