前言
學習JavaScript的同學都知道, AJAX (async javascript and
xml)翻譯叫做異步的JavaScript和XML , 在原生js中使用發送網絡請求也是一件麻煩事,每次都是那幾個步驟.
我們先來回顧一下在原生js中如何發送一個 ajax 網絡請求
經典4步曲
1.原生js的ajax網絡請求
// IE9及以上
// const xhr = new XMLHttpRequest()
// IE9以下
// const xhr = new ActiveXObject("Mricosoft.XMLHTTP")
// 對于這個兼容寫法我們可以用一個函數來封裝
function createXHR() {
var req = null;
if (window.XMLHttpRequest) {
// 如果有這個XMLHttpRequest對象就直接使用
req = new XMLHttpRequest();
} else {
// 否則就使用IE8一下的寫法
req = new ActiveXObject("Microsoft.XMLHTTP");
}
return req;
}
// 第一步:創建ajax對象
var xhr = createXHR(); //這樣就拿到了一個ajax對象
// 第二步:配置網絡請求信息
xhr.open("get", "./demo.php", true)
// xhr.open("get/post","要發送網絡請求去哪個地址",同步還是異步默認 true 表示異步，false 表示同步)
// 如果是get請求有參數需要拼接在地址后面,例如"./demo.php?id=2&name=sanqi"
// 如果是post請求,參數就要放在send()里面,例如:xhr.send("id=2&name=sanqi")
// 第三步:發送網絡請求
xhr.send() //
// 第四部:判斷響應狀態拿到數據
xhr.onreadyStateChange = function () {
// 每次 readyState 改變的時候都會觸發該事件
// 我們就在這里判斷 readyState 的值是不是到 4
// 并且 http 的狀態碼是不是 200 ~ 299
if (xhr.readyState === 4 && /^2d{2|$/.test(xhr.status)) {
// 這里表示驗證通過
// 我們就可以獲取服務端給我們響應的內容了
console.log(xhr.response);
}
}
這里補充一下readyState的5個狀態
- readyState --> 0： 表示未初始化完成，也就是 open 方法還沒有執行
- readyState --> 1： 表示配置信息已經完成，也就是執行完 open 之后
- readyState --> 2： 表示 send 方法已經執行完成
- readyState --> 3： 表示正在解析響應內容
- readyState --> 4： 表示響應內容已經解析完畢，可以在客戶端使用了
上面就是原生的js發送一個ajax網絡請求
2.關于使用jQuery的ajax網絡請求
我們在學習jquery,就了解到,大家都在說,什么 jq 都給我們封裝好啦,這些網絡請求都不用我們去寫啦,雖說如此,但是也還是不能盲目,還是 要具體了解之后才會使用.
(1).利用jquery發送get請求
下面統一后端代碼使用文件名為: test.php 這個文件
<?php
header("content-type:text/html;charset=utf-8;");
$id = $_REQUEST["id"];
$name = $_REQUEST["name"];
$arr = [
"id" => $id,
"name" => $name
];
echo json_encode($arr);
?>
使用jquery發送get請求
$.get("./test.php","id=999&name=三七安",function (res) {
//第一個參數是請求的地址
//第二個參數是要發送給服務器的數據
//第三個參數是成功時的回調函數,里面包含服務返回給我們的數據
//第四個參數是我們希望拿到的數據格式:有幾種選擇:json,text,html,xml,script
console.log(res);
},"json")
可以看到請求是發送成功了的
(2) 利用jquery發送post請求
$.post("./test.php",{id:123,name:"post請求"},function (res) {
//這里其他參數和get請求一致的
//注意,這里的傳輸數據我用 對象的格式來寫,也能發送請求成功,也就是說
//無論是get請求還是post請求,想服務端傳數據,既可以使用字符串格式也可以使用對象格式
console.log(res);
},"json")
這是請求成功的的頁面
(3)利用jquery發送綜合發送 ajax 請求
先來瀏覽一下語法
// 使用 $.ajax 方法
// 只接受一個參數，是一個對象，這個對象對當前的請求進行所有的配置
$.ajax({
url: "./ajax", // 必填，請求的地址
type: "GET", // 選填，請求方式，默認是 GET（忽略大小寫）
data: {}, // 選填，發送請求是攜帶的參數
dataType: "json", // 選填，期望返回值的數據類型，默認是 string
async: true, // 選填，是否異步，默認是 true
success() {}, // 選填，成功的回調函數
error() {}, // 選填，失敗的回調函數
cache: true, // 選填，是否緩存，默認是 true
context: div, // 選填，回調函數中的 this 指向，默認是 ajax 對象
status: {}, // 選填，根據對應的狀態碼進行函數執行
timeout: 1000, // 選填，超時事件
})
好像每次都要填好多參數,但其實大部分參數都是選填的,我們只要看實際情況來填寫
在編譯器里面,直接輸入ajax也可以快捷生成部分代碼
發送ajax請求代碼
$.ajax({
type: "get",
url: "./test.php",
data: {
id:000,
name:"發送$.ajax請求的演示"
},
dataType: "json",
success: function (response) {
console.log(response);
}
});
打開網頁就可以看到我們從后端拿回來的數據
下面補充幾個Ajax的全局函數,也叫鉤子函數,也就是在Ajax整個請求過程中的某一個階段執行的函數,而且是任意一個Ajax請求都會觸發.
1. ajaxStart, 任意一個請求開始的時候都會觸發這個函數
$(window).ajaxStart(function () {
console.log("有一個請求開始了")
})
2. ajaxSend , 任意一個 請求準備send之前都會觸發這個請求.
$(window).ajaxSend(function () {
console.log("有一個要發送出去了")
})
3.ajaxSuccess, 任意一個 請求成功的時候都會觸發這個函數.
$(window).ajaxSuccess(function () {
console.log("有一個請求成功了")
})
4.ajaxError , 任意一個 請求失敗的時候就會觸發這個函數.
$(window).ajaxError(function () {
console.log("有一個請求失敗了")
})
5.ajaxComplete , 任意一個 請求完成的時候就會觸發這個函數
$(window).ajaxComplete(function () {
console.log("有一個請求完成了")
})
6.ajaxStop , 任意一個 請求結束的時候就會觸發這個函數
$(window).ajaxStop(function () {
console.log("有一個請求結束了")
})
總結
到此這篇關于jQuery中ajax的相關知識點匯總的文章就介紹到這了,更多相關jQuery ajax知識點內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_43314255/article/details/114444344
