WEB前端（四）--Ajax
Ajax
Ajax 即「Asynchronous Javascript And XML」（異步 JavaScript 和 XML），是指一種建立交互式、快速動態網頁應用的技術。早期只有同步的方式，多個請求，只能順序執行，只能等待執行。有了ajax異步技術，能夠無需等待上一個請求執行完成，就能夠直接發起請求。服務端返回後，ajax經過回調技術通知客戶端程序，把響應的結果傳遞給用戶事先寫好的回調函數。經過在後臺與服務器進行少許數據交換，Ajax 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁進行局部更新，提高網頁的效率，用戶無需等待頁面的刷新，嗖的一下內容就變化了。改變原有整個頁面刷新，形成頁面晃眼的現象。因此這項技術一出現，就獲得業界的推崇。
關鍵字：異步、回調、局部刷新。javascript
XHR對象：
XMLHttpRequest對象方法以下：
about() 中止當前的請求。
getAllResponseHeaders() 把HTTP請求的全部響應首部做爲鍵/值對返回
getResponseHeader("header") 返回指定首部的串值
open("method","URL",[asyncFlag]) ：創建對服務器的調用。method參數能夠是GET、POST。url參數能夠是相對URL或絕對URL。這個方法還包括可選的參數，是否異步(true或者false)。
send(content) 向服務器發送請求。send接收一個參數，即做爲請求主體發送的數據。若是不須要經過請求主體發送數據，則必須傳入null，由於這個參數對有些瀏覽器來講是必須的。調用send()以後，請求就會分派到服務器。
setRequestHeader("header", "value")： 把指定首部設置爲所提供的值。在設置任何首部以前必須先調用open()。設置header並和請求一塊兒發送 ('post'方法必定要 )html
XMLHttpRequest 對象屬性描述：
onreadystatechange：狀態改變的事件觸發器，每一個狀態改變時都會觸發這個事件處理器.
readyState: 請求的狀態。有5個可取值：vue
- 0: 未初始化。還沒有調用open()方法。
- 1：啓動。已經調用open()方法，但還沒有調用send()方法。
- 2：發送。已經調用send()方法，readyState上面的值就是HEADERS_RECEIVED,已經發送而且已經接收到響應頭和響應狀態了。
- 3：接收。已經接收到部分相應數據。
- 4：完成。已經接收到所有相應數據，並且已經能夠在客戶端使用了。
responseText： 服務器的響應，返回數據的文本。
responseXML：服務器的響應，返回數據的兼容DOM的XML文檔對象 ，這個對象能夠解析爲一個DOM對象。
status：服務器的HTTP狀態碼（如：404 = "文件末找到" 、200 ="成功" ，等等）
statusText: 服務器返回的狀態文本信息 ，HTTP狀態碼的相應文本（OK或Not Found（未找到）等等。java
Json
JSON(JavaScript Object Notation, JS 對象簡譜) 起名不咋地，很是拗口，咱們就記住它是一種輕量級的數據交換格式便可。它基於 ECMAScript (js規範)的一個子集，採用徹底獨立於編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成爲理想的數據交換語言。是xml的終結者，成爲主流開發方式（ajax異步請求，json返回）。
關鍵字：ES標準、JSON、XML
例京東網頁獲取一個商品信息：mysql
[{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}]
結構特色：ios
- 數組[]
- 一條記錄{}，多條記錄用逗號隔開 {},{}，最後一條沒有逗號
- 鍵值對 "p":"2099.00"，kv用雙引號括，多個用逗號隔開，最後一個沒有逗號
網頁實現局部刷新
技術棧：
javascript、jQuery、http協議（請求request、響應response）、Web中間件(tomcat)、mysql數據庫，json傳輸。ajax
實現Ajax
原生js實現Ajax
- 建立XHR對象
- 設置狀態監聽
- 創建與服務端的鏈接
- 發送請求
GET請求：sql
<script>
//js當中排錯的方式：斷點(debugger)，console.log，排除法
function doAjaxGet(){//這個方法運行與瀏覽器進程內部的主線程（main）中
debugger;
//1.建立XHR對象（此對象時ajax技術應用的入口對象，發送異步請求，處理響應結果都是經過此對象實現）
var xhr=new XMLHttpRequest();
//2.設置狀態監聽
xhr.onreadystatechange=function (){//事件監聽函數（處理客戶端與服務端經過過程產生的數據）
if(xhr.readyState==4&&xhr.status==200){
//readyState的值0，1，2，3，4
//0，表示還未執行open方法
//1，表示已執行open方法但還未執行send方法
//2，表示已執行send方法
//3，表示客戶端正在接收服務端響應的數據
//4，表示客戶端已經完成響應數據的接收
//xhr.status==200表示服務端處理過程時OK的
var result=xhr.responseText;//獲取服務端響應的文本數據
document.getElementById("resultId").innerHTML=result;
}
};
//3.創建與服務端的鏈接
xhr.open("GET","http://127.0.0.1/doAjaxGet",true);//true表明異步請求；false表明同步請求
//127.0.0.1 可能存在跨域問題 須要在控制層加註解@CrossOrigin
//4.發送請求
xhr.send(null);//將請求交給ajax引擎
console.log("do other ....");//run main thread
}
</script>
POST請求：數據庫
<script>
function doSave(){//發送異步請求，檢查name是否存在
//1.建立xhr對象(Ajax技術應用的入口)
let xhr=new XMLHttpRequest();
//2.設置狀態監聽（不是必須的，可是假如要獲取服務端響應的結果並進行處理就要進行狀態監聽）
xhr.onreadystatechange=function (){
if (xhr.readyState==4&&xhr.status==200){
document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
}
};
//3.創建POST鏈接(POST請求傳參數，不將參數拼接到url中)
let name=document.forms[0].name.value;//獲取表單中name對應的value屬性值
let name1=document.forms[0].name.value;console.log("name",name);
let url="http://localhost/doSave1";
xhr.open("POST",url,true);
//post請求假如須要像服務端傳遞參數，則必須在open以後設置請求頭
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.發送異步請求（經過send() 傳參）
// xhr.send("name="+name);
xhr.send(`name=${name}&name1=${name1}`);
// xxx?a=abc&b=bcd
}
</script>
將請求函數封裝，使用時引入js便可
js文件:編程
function doAjaxGet(url,params,callback){
debugger;
//1.建立xhr對象(Ajax技術應用的入口)
let xhr=new XMLHttpRequest();
//2.設置狀態監聽（不是必須的，可是假如要獲取服務端響應的結果並進行處理就要進行狀態監聽）
xhr.onreadystatechange=function (){
if (xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);
}
};
//3.創建Get鏈接(get請求傳參數，要將參數拼接到url中)
xhr.open("GET",`${url}?${params}`,true);
//4.發送異步請求
xhr.send(null);
};
function doAjaxPost(url,params,callback){//封裝共性，提取特性（可能會常常變化的）
debugger;
//1.建立xhr對象(Ajax技術應用的入口)
let xhr=new XMLHttpRequest();
//2.設置狀態監聽（不是必須的，可是假如要獲取服務端響應的結果並進行處理就要進行狀態監聽）
xhr.onreadystatechange=function (){
if (xhr.readyState==4&&xhr.status==200){
//callback是形參，接收一個函數，經過這個有參函數去回調這個函數中的具體函數體
callback(xhr.responseText);//處理響應響應數據
}
};
//3.創建POST鏈接(POST請求傳參數，不將參數拼接到url中)
xhr.open("POST",url,true);
//post請求假如須要像服務端傳遞參數，則必須在open以後設置請求頭
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.發送異步請求（經過send() 傳參）
xhr.send(params/*{"name":'zh',"age":20}*/);
};
引入js調用：
<script src="js/ajax.js"></script>
<script>
function doSave(){//發送異步請求，檢查name是否存在
debugger;
//1.定義請求url
let url="http://localhost/doSave";
//2.定義請求參數
let name=document.forms[0].name.value;
let params=`name=${name}`;
//3.發送一部請求並處理響應結果
doAjaxPost(
url,
params,
function (result){
document.getElementById("result").innerText=result;
}
//這一整個函數是一個參數，傳遞過去執行
)
};
function doCheck(){//發送異步請求，檢查name是否存在
debugger;
//1.頂以請求url
let url="http://localhost/doCheck";//經過模板字符串``和${}表示拼接url
//2.定義請求參數
let name=document.forms[0].name.value;//獲取表單中name對應的value屬性值
let params=`name=${name}`;
// let params=`name=${name}&name1=${name1}`;
//3.發送異步請求並處理響應結果
doAjaxGet(url,params,function (result){
document.getElementById("result").innerHTML=result;
})//底層仍是藉助XmlHttpRequest對象發送請求
}
</script>
模擬jQuery封裝
使用函數自調用，提供訪問對象
(function (){
var ajax=function (){}
ajax.prototype={
doGet:function (url,params,callback){
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function (){
if (xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);
}
};
xhr.open("GET",`${url}?${params}`,true);
xhr.send(null);
},
doPost:function(url,params,callback){
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function (){
if (xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);
}
};
xhr.open("POST",url,true);
xhr.send(`${params}`);
}
}
window.Ajax=new ajax()
})()
調用js：
<script src="js/ajax2.0.js"></script>
<script>
function doSave(){//發送異步請求，檢查name是否存在
debugger;
//1.定義請求url
let url="http://localhost/doSave";
//2.定義請求參數
let name=document.forms[0].name.value;
let params=`name=${name}`;
//3.發送一部請求並處理響應結果
Ajax.doPost(url, params, function (result){
document.getElementById("result").innerText=result;
}
//這一整個函數是一個參數，傳遞過去執行
)
};
function doCheck(){//發送異步請求，檢查name是否存在
debugger;
//1.頂以請求url
let url="http://localhost/doCheck";//經過模板字符串``和${}表示拼接url
//2.定義請求參數
let name=document.forms[0].name.value;//獲取表單中name對應的value屬性值
let params=`name=${name}`;
// let params=`name=${name}&name1=${name1}`;
//3.發送異步請求並處理響應結果
Ajax.doGet(url,params,function (result){
document.getElementById("result").innerHTML=result;
})//底層仍是藉助XmlHttpRequest對象發送請求
}
</script>
jQuery實現Ajax
<script>
$(document).ready(function() {
$.ajax({
type: "POST",
url: "https://p.3.cn/prices/mgets",
contentType: "application/json;charset=utf-8",
data: { //拼接的參數
"skuIds": "J_100003717483"
},
dataType: "jsonp",
success: function(data) { //返回的結果
$('#rtnData').text("返回數據：" + JSON.stringify(data));
$('#itemId').text("商品編號：" + data[0].id);
$('#itemPrice').html("商品價格：<span style='color:red'>" + data[0].p +"</span>");
},
error: function(data) {
alert("提交失敗" + JSON.stringify(data));
}
});
});
</script>
Vue實現Ajax
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script type="text/javascript">
var config={
el:"#app",
data:{
goodsList:[],
},
mounted:function (){
this.selectAll();
},
methods:{
selectAll:function (){
var serverUrl="/goods/doGoodsUI";
axios.get(serverUrl).then(function (res) {
this.vue.goodsList=res.data;
}).catch();
},
deleteById:function (id){
var serverUrl="/goods/doDeleteById/"+id;
axios.get(serverUrl).then(function (res) {
window.alert(res.data);
this.vue.selectAll();
}).catch();
},
},
};
var vue = new Vue(config);
</script>
擴展
json和jsonp的區別
json請求返回就是json格式，而jsonp請求返回是fun(json)格式。
json和js對象的區別
json字符串: { "id":"100","name":"tony","salary":"30000" }
js對象：{ "id":100,"name":"tony","salary":30000 }
- 含義不一樣，json是一種數據格式，js表示類的實例
- 傳輸：json用於跨平臺、跨網絡傳輸，速度快；js不能傳輸
- 展示：json鍵值對方式，值是字符串不能是對象方法函數；js值不必定加雙引號，值能夠是對象、函數、字符串等
- 轉換：JSON.parse(jsonStr) JSON已經做爲瀏覽器內置對象，eval(json)；JSON.stringify(obj)
相關文章
- 1. web前端----ajax
- 2. 前端小白--web前端ajax請求
- 3. WEB前端-AJAX-初識
- 4. Web前端學習筆記——Ajax
- 5. web前端開發——AJAX入門
- 6. web前端技術 js\jQuery\Ajax
- 7. Web前端-Ajax基礎技術(上)
- 8. Web前端-Ajax基礎技術(下)
- 9. 前端之AJAX
- 10. 前端Ajax
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • AJAX 簡介 - PHP教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • RxJava操作符（四）Combining
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. web前端----ajax
- 2. 前端小白--web前端ajax請求
- 3. WEB前端-AJAX-初識
- 4. Web前端學習筆記——Ajax
- 5. web前端開發——AJAX入門
- 6. web前端技術 js\jQuery\Ajax
- 7. Web前端-Ajax基礎技術(上)
- 8. Web前端-Ajax基礎技術(下)
- 9. 前端之AJAX
- 10. 前端Ajax