淺談ajax的使用以及一些實用方法
阿新 • • 發佈：2021-12-17
什麼是ajax
簡介:ajax是一種無需要載入整個網頁的情況下,能夠更新部分網頁的技術
ajax是一種用於建立快速動態網頁的技術,傳統的網頁(如果不使用ajax)如果需要更新內容,必須載入整個網頁頁面.
post和get的區別
get:請求是在位址列上,資訊不安全.傳資料流量小,一般限制在2k
建立請求物件
所有現代的瀏覽器均支援XHttpRequest物件(ie5和ie6使用ActiveXObject)
1 // IE 7 +, Firefox,Chrome, Opera, Safari 瀏覽器執行程式碼 2 let request = new XMLHttpRequest(); 34 // IE6, IE5 瀏覽器執行程式碼 5 let request = new ActiveXObject('Microsoft.XMLHTTP'); 6 //相容寫法 7 8 let http = null; 9 10 if(window.XMLHttpRequest){ 11 12 http = new XMLHttpRequest(); 13 14 }else{ 15 16 http = new ActiveXObject('Microsoft.XMLHTTP'); 17 18 }
向伺服器傳送請求
如果需將請求傳送到伺服器,我們使用 XMLHttpRequest 物件的 open() 和 send() 方法
method:請求的型別；GET 或 POST
url:檔案在伺服器上的位置
async: true（非同步）或 false（同步）
send(string):
string:僅用於 POST 請求
onreadystatechange:儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。
status: (200: "OK" 404: 未找到頁面)
當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：
let btn = document.querySelector('.btn');
btn.addEventListener('click', function(){
loadInfo();
});
function loadInfo(){
let http = null;
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
}else{
http = new ActiveXObject('Microsoft.XMLHTTP');
}
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
console.log(http.responseText);
}else{
console.log("請求失敗了");
}
}
http.open('GET','http://www.ysqorz.top:8888/api/private/v1/rights/list');
http.send();
}
案例（post請求登入）
let btn = document.querySelector('.btn');
let username = document.querySelector(".username");
let password = document.querySelector(".psd");
let value1 = '';
let value2 = '';
btn.addEventListener('click', function(){
value1 = username.value;
value2 = password.value;
// console.log(value1);
loadInfo();
});
//請求
function loadInfo(){
let http = null;
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
}else{
http = new ActiveXObject('Microsoft.XMLHTTP');
}
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
console.log(http.responseText);
}
}
http.open('POST','http://www.ysqorz.top:8888/api/private/v1/login');
http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http.send('username='+value1+'&'+'password='+value2);
}
ajax
ajax({ url:'http://www.ysqorz.top:8888/api/private/v1/login', type:"POST", data:{ username:"admin", password:123456 }, timeout:5000, //過期時間 success:function(res){ console.log(res); }, error:function(error){ // console.log("錯誤資訊"+error); } }) function ajax(obj){ obj = obj || {}; obj.type = (obj.type || "GET" ).toLowerCase(); //預設請求方式GET; //獲取請求引數 let params = formatParams(obj.data); //請求物件的相容 let http = null; if(window.XMLHttpRequest){ http = new XMLHttpRequest(); }else{ http = new ActiveXObject('Microsoft.XMLHTTP'); } //發起請求 if(obj.type == "get"){ http.open('GET',obj.url+"?"+params); http.send(null); }else if(obj.type == "post"){ http.open('POST',obj.url); http.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); http.send(params); } //超時處理 setTimeout(function(){ if(http.readyState != 4){ http.abort(); //終止請求 } },obj.timeout); http.onreadystatechange = function(){ if(http.readyState == 4 && http.status == 200){ obj.success && obj.success(JSON.parse(http.responseText)); }else{ obj.error && obj.error(http); } } } //格式化引數 function formatParams(objParams){ let newArr = []; for(let name in objParams){ newArr.push(name+"="+objParams[name]); } return newArr.join("&"); }
這裡還為總結了一下,通用ajax格式
function ajaxs(url,type,data,dataType,sCallback,fCallback){ $.ajax({ type:type, url:url, async:true, contentType : "application/json; charset=utf-8", data:data, jsonp:'jsoncallback', dataType:dataType, success:function(jsondata){ sCallback && sCallback(jsondata); }, error:function(e){ fCallback && fCallback(); } }); }
function ajaxData(){
ajaxs('http://.....','post',jsons,'jsonp',function(data){
console.log(data);
},function(e){alert('失敗'+e)});
}
ajax請求資料，返回文字格式
$.ajax({ type: "POST", url: "請求地址", data : { username : '引數1' }, dataType: "text",//請求引數的格式為json.另外還有text等 async: false,//這裡預設為false，即非同步請求，如果為true就是同步 success: function(data){ //成功返回資訊 console.log(data); }, error: function (message) { //錯誤返回資訊 } });
ajax請求資料，返回JSON格式
//資料格式 [{"ID":0,"title":"4220"},{"ID":0,"title":"4220"}] $.ajax({ type: "POST", url: "請求地址", data : { username : '引數1' }, contentType: "application/json; charset=utf-8", dataType: "json",//請求引數的格式為json.另外還有text等 async: false,//這裡預設為false，即非同步請求，如果為true就是同步 success: function(data){ //成功返回資訊 var obj = eval(data); //注意：使用eval來解析JSON格式字串的時候，會將{}解析為程式碼塊，而不是物件的字面量 //1.在JSON格式的字串前面拼接上 "var o =" //2.把JSON格式的字串使用()括起來，就不會將{}解析為程式碼塊，而是表示式 console.log("MY:" + obj[0].title); }, error: function (message) { //錯誤返回資訊 } });
json常用的方法
JSON.parse() :
JSON 通常用於與服務端交換資料,在接收伺服器資料時一般是字串。我們可以使用 JSON.parse() 方法將資料轉換為 JavaScript 物件。
JSON.stringify():
JSON 通常用於與服務端交換資料,在向伺服器傳送資料時一般是字串,我們可以使用 JSON.stringify() 方法將 JavaScript 物件轉換為字串。