原生js封裝a和jQurey版ajax介紹
一.為什麼要封裝?
發現很多地方都要用ajax請求，但是大部分代碼都是一樣的，所以根據封裝的思想，相同的代碼封裝成函數，在需要用的地方來調用,這樣會很方便.
二.js封裝ajax過程:
1.先了解結構代碼和後台代碼:
結構:
後台:
3.開始封裝函數
//開始封裝函數
function ajax(params){
/* * params.type:請求方式
* params.url：請求路徑
* params.data:提交給伺服器的數據
* params.success: 響應完成時調用的回調函數
* params.dataType: 用來告訴我響應體是什麼類型的，我就幫你轉成對應的對象 */
//1.創建請求對象
var xhr=new XMLHttpRequest();
//不管你傳過來的是大寫還是小寫.統一先轉換成小寫
params.type=params.type.toLowerCase();
//判斷請求體是不是get並且有寫值,如果是的話拼接url
if(params.type=="get"&& params.data!=undefined){
params.url+="?"+params.data;
}
//2.設置請求行
xhr.open(params.type,params.url)
//判斷是不是get請求,是的話不需要第3步的設置請求頭,直接發送請求
if(params.type=="get"){
//4.發送請求
xhr.send();
}else{//說明是post請求
//3.需要設置請求頭,這句話很長,直接複製就好
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.發送請求,在方法裡面加上要提交給伺服器的數據
xhr.send(params.data);
}
//5.監聽響應完成事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//這裡寫響應完成事件
/*考慮到之前的封裝有一個問題:我希望如果我告訴你響應體是JSON，
你就自動幫我做轉換，我告訴你是XML，你也幫我轉成XML
解決辦法:在回調函數後面又多加一個參數叫res
具體做法:
1.在響應完成那裡，先聲明一個變數res = xhr.resonseText;
2.判斷dataType是否等於JSON,如果是把res重新賦值為轉換為JSON對象的值;
3.繼續判斷(else if)dataType是否等於XML，如果是，
把res重新賦值為轉換為XML對象的值;
4.調用回調函數，傳入res
*/
//先默認賦值為字元串的響應體
var res =xhr.responseText;
if(params.dataType=="json"){
//按JSON方法來轉換成js對象
res=JSON.parse(xhr.responseText);
}else if(params.dataType=="xml"){
var parser=new DOMParser();
res=parser.parseFromString(xhr.responseText,"text/xml");
/*上面兩句話的補充說明:後台傳入的是xml數據,如果直接用xhr.responseXML拿不到
響應體,這時就我們需要轉換
天氣預報案例演示:
console.log(xhr.responseXML);//得到null,因為XML的數據我們無法直接獲取
響應體,這時我們需要手動轉換
//這時候我們就需要自己手動把它轉成XML對象
//第一步:創建一個文檔轉換對象
var parser = new DOMParser();
//第二步:把響應體轉成xml對象
var xml = parser.parseFromString(xhr.responseText,"text/xml");
console.log(xml);//列印<resp>...<resp>,即成功得到xml對象
*/
}
params.success(res);//函數調用
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
4.函數調用:
//按鈕點擊事件
document.getElementById("btn").onclick = function () {
//調用函數
ajax({
type: "get",
url: "getJSON.php",
dataType: "json",
success: function (obj) {//回調函數,需要執行的響應體事件代碼寫在這裡就好
console.log(obj);//成功拿到後台的傳過來的數據,{name: "jack", age: 16}
}
})
}
1
2
3
4
5
6
7
8
9
10
11
12
三.jQuery中的ajax
jQuery中用來發ajax請求的方法，跟我們封裝的方法類似，但是功能更強大.
使用語法:
//裡面傳入一個對象
$.ajax({
//請求網址
url: "./data.php",
//請求類型
type: "post",
//伺服器響應數據類型，如果是跨域，可以改成jsonp
dataType: "json",
//發送給伺服器的數據（請求體）,如果是get請求數據寫在url,如果是post才寫data屬性
data: { id: 1 },
//回調函數：響應回來調用的函數
success: function (data) {
console.log(data)
},
//請求失敗觸發
error: function (err) {
console.log(err)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
另外, $.get()：跟上面一樣的，只是不用寫type屬性，因為它就是發get請求的;
$.post()：跟上面一樣的，只是不用寫type屬性，因為它就是發post請求的.
四.jQuery裡面的表單序列化
特點：能找到這個表單下面所有帶name屬性的表單元素（file除外），能把它們自動拼接成key=value形式的字元串，key就是它們的name，value就是它們自己輸入的內容或者選擇的內容.
使用案例:
<script>
$("#btn").click(function(){
/*表單的序列化，它能找到這個表單下面所有帶name屬性的表單元素(文件是拿不到的)，
並取到它們的值，做成key=value形式的字元串，key是它們的name，
值就是它們輸入或者選中的內容*/
var res = $("form").serialize();
console.log(res);
});
</script>
※如何玩轉微服務
※golang查看channel緩衝區的長度
TAG:程序員小新人學習 |