今天小編給大家分享一下原生ajax和Jquery的ajax有什么不同的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
原生ajax
Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
傳統請求（同步方式）的問題
當網速比較慢或服務器太忙時，客戶端(瀏覽器)在沒有收到服務端返回的響應之前一直處在線等待狀態，用戶體驗不好。
Ajax優勢和作用
使用ajax技術后用戶體驗好，同時可以減輕服務端的壓力。
ajax的應用場景：百度搜索框、百度地圖、檢查用戶是否注冊過、頁面的局部刷新等。
Ajax請求與傳統請求的區別：
傳統方式請求：
ajax方式請求
ajax原理（方法，屬性 ）
XMLHttpRequest
let xhr =new XMLHttpRequest();
描述：創建 ajax對象
open
xhr.open('請求方式','請求地址',true/false); //true：表示異步 false:表示同步
描述：創建請求給ajax對。
send
語法：
xhr.send(string)
描述：ajax對象將請求發送到服務器。string：僅用于 POST 請求
屬性
readyState
xhr.readyState
描述：在創建ajax對象，配置ajax對象，發送請求，以及接收完服務器端響應數據，這個過程中的每一個步驟都會對應一個數值，這個數值就是ajax狀態值。
包含的狀態值：
(1)0：請求未初始化，還沒有調用open
(2)1：請求已經建立，但是還沒有發送send
(3)2：請求已經發送
(4)3：請求正在處理中，通常響應中已經有部分數據可以用了
(5)4：響應已經完成，可以獲取并使用服務器的響應
tatus
語法：
xhr.status
描述：無論AJAX訪問是否成功，由HTTP協議根據所提交的信息，服務器所返回的HTTP頭信息代碼，該信息使用“ajax.status”所獲得；（由數字1XX,2XX三位數字組成)
常見狀態碼：200，304，404，500
responseText
語法：
xhr.responseText
描述：獲得來自服務器的響應
事件
語法：
xhr.onreadystatechange = callback
描述：當請求被發送到服務器時，每當 readyState 改變時，就會觸發 onreadystatechange 事件處理服務端返回的響應
ajax實現步驟
(1)創建Ajax對象
(2)Ajax請求的地址與請求方式
(3)發送請求
(4)獲取服務器響應給客戶端的數據
(5)處理服務器響應數據JSON.parse和JSON.stringify
ajax的get和post傳參
get
語法：
xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')
描述：get傳參只需要在url地址后按照?key=value格式進行傳遞
服務端代碼如下：
const experss = require('express');
const path = require('path');
const app = experss();
app.listen(3000, () => {
console.log(——web服務器工作在3000端口——);
});
//設置ejs:
app.set('view engine', 'ejs'); //設置模板引擎為ejs
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').__express);
//注冊用戶界面：
app.get('/zhuce', (req, res) => {
res.render('zhuce.html');
});
//檢查用戶是否注冊過：
app.get('/checkuser', (req, res) => {
//獲取用戶：
let uname = req.query.uname ? req.query.uname : '';
if (uname == 'demo') { //已注冊
res.send({ "msg": "用戶已注冊", "status": 500 });
} else { //未注冊
res.send({ "msg": "用戶可用", "status": 200 });
}
});
zhuce.html文件代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>帳號：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div>
<div>密碼：<input type="password" name="pwd" id="pwd"></div>
<div>密碼：<input type="password" name="repwd" id="repwd"></div>
<div><input type="submit" value="注冊"></div>
<script>
let usrObj = document.getElementById('usr');
let spanObj = document.getElementById('usrmsg');
//第一步：創建ajax對象：new XMLHttpRequest()
let xhr = new XMLHttpRequest();
usrObj.onblur = function() {
//獲取用戶輸入的帳號：
let usrval = usrObj.value;
// alert(usrval);
//true:表示異步 false:表示同步
//第二步：創建請求給ajax對象：xhr.open('get/post','請求資源',true/false)
xhr.open('get', ——/checkuser?uname=${usrval}——, true);
//注冊事件：處理服務器返回的響應
xhr.onreadystatechange = mytest;
//第三步：ajax對象發送請求給服務器: xhr.send([參數])
xhr.send();
}
function mytest() {
// alert(xhr.readyState);
//第四步：服務端處理完請求并返回響應給ajax對象
if (xhr.readyState == 4) {
//200:為http協議狀態碼
if (xhr.status == 200) { //表示ajax對象與服務端交互是正常的
//第五步：ajax對象獲取返回的響應并填充到頁面相關位置
// alert(xhr.responseText);
let resObj = JSON.parse(xhr.responseText);
spanObj.innerHTML = resObj.msg;
if (resObj.status == 200) {
spanObj.style.color = 'green';
} else {
spanObj.style.color = 'red';
}
}
}
}
</script>
</body>
</html>
以上就是“原生ajax和Jquery的ajax有什么不同”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
