ajax—非同步javascript xml
阿新 • • 發佈：2018-12-17
概念
ajax(非同步javascript xml) 能夠重新整理區域性網頁資料而不是重新載入整個網頁
優點
1.可以實現非同步通訊效果，實現頁面區域性重新整理，帶來更好的使用者體驗 2.按需獲取資料，節約頻寬資源
分類
分為 原生ajax 和 jQuery 中的 ajax ， 其中原生ajax是核心
原生ajax
過程如下：
- 1. 例項化XHR物件
let xhr = new XMLHttpRequest();- 2. 開啟請求（設定請求行）
xhr.open(method,url);- 3.設定請求頭資訊
xhr.responseType = 'json'; xhr.setRequestHeader('Content-type','application/json');
- 4.設定監聽
xhr.onreadystatechange = function(){
if(this.readyState = 4){
if(this.status == 200){
響應成功
this.response
} else {
失敗
}
}
}- 5.傳送請求（請求體）
xhr.send(JSON.stringify(data));提交的資料型別分為：查詢字串 、 json
- 引數型別為查詢字串
1.Content-Type
x-www-form-urlencoded
2.send()
如果要傳送的資料格式為：
var obj = {
name:'xpf',
age:'22'
}
那麼在傳送的時候一定要將obj轉換為查詢字串，send(qs.stringify(obj)); qs必須在ES6模組程式碼下才能用，也可以手動封裝
- 引數型別為json
1.Content-Type
application/json
2.send()
var obj = {
name:'xpf',
age:'22'
}
在傳送的時候一定要將obj轉換為json字串，send(JSON.stringify(obj));
例子如下：
- 引數為查詢字串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生ajax</title>
<script>
var url = 'http://120.78.164.247:8099/manager/category/saveOrUpdateCategory';
var method = 'POST';
var successHandler = function(){
alert('請求成功');
console.log(this.response);
}
var errorHandler = function(){
alert('請求失敗');
console.log(this.response);
}
var xhr = new XMLHttpRequest();
xhr.open(method,url);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
successHandler.call(this);
} else{
errorHandler.call(this);
}
}
}
xhr.send('name=xpf&comment=thisIsTest&no=1010');
</script>
</head>
<body>
</body>
</html>結果如下：
- 引數為json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生Ajax</title>
<script>
var url = 'http://120.78.164.247:8099/manager/category/findAllCategory';
var method = 'GET';
var successHandler = function(){
alert('請求成功');
console.log(this.response);
}
var errorHandler = function(){
alert('請求失敗');
console.log(this.response);
}
var xhr = new XMLHttpRequest();
xhr.open(method,url);
xhr.setRequestHeader('Content-type','application/json');
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
successHandler.call(this);
} else{
errorHandler.call(this);
}
}
}
xhr.send();
</script>
</head>
<body>
</body>
</html>結果如下：
查詢欄目時請求體沒有引數
jQuery 中的 ajax
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var url = 'http://120.78.164.247:8099/manager/category/saveOrUpdateCategory';
var obj = {
name:"test02",
comment:"thisIsTest02",
no:1002
}
$.post(url,obj,function(data){
alert('成功');
console.log(data);
});
</script>
</head>
<body>
</body>
</html>結果如下:
