資訊專欄INFORMATION COLUMN
摘要：作者后臺(tái)使用的是語(yǔ)言，所以這里以后臺(tái)為例子不影響學(xué)習(xí)一原生使用方法創(chuàng)建對(duì)象兼容處理處理低版本不兼容問題準(zhǔn)備發(fā)送請(qǐng)求方式接口參數(shù)名參數(shù)值異步執(zhí)行發(fā)送回調(diào)是表示數(shù)據(jù)解析完成，后臺(tái)處理完成了。是表示處理的結(jié)果是的。
作者后臺(tái)使用的是php語(yǔ)言，所以這里以php后臺(tái)Api為例子,不影響學(xué)習(xí)Ajax一、 javaScript原生使用Ajax 1.get方法
//1.創(chuàng)建對(duì)象 兼容處理
var xhr = null;
//處理低版本IE不兼容問題
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.準(zhǔn)備發(fā)送 請(qǐng)求方式 接口 參數(shù)名 參數(shù)值 異步
xhr.open("get","xxx.php?username=" + usernameValue ,true);
//3.執(zhí)行發(fā)送
xhr.send(null);
//4.回調(diào)
xhr.onreadystatechange = function () {
/*xhr.readyState == 4 是表示數(shù)據(jù)解析完成，后臺(tái)處理完成了。
xhr.status == 200 是表示處理的結(jié)果是OK的。響應(yīng)成功*/
if (xhr.readyState == 4){
if(xhr.status == 200){
//返回結(jié)果
var result = xhr.responseText;
console.log(result);
}
}
};
2.post方法
//#1.創(chuàng)建對(duì)象 兼容性
var xhr = null;
//處理低版本IE不兼容問題
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
//#2.準(zhǔn)備發(fā)送
xhr.open("post","xxx.php",true);
// 參數(shù)
var param = "phone=" + phoneValue;
//設(shè)置響應(yīng)頭
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//#3.執(zhí)行發(fā)送
xhr.send(param);
//#4.回調(diào)函數(shù)
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status ==200){
var result = xhr.responseText;
console.log(result);
}
}
}
open()方法后面的參數(shù)true和false,表示異步和同步，同步(false)就是先吃完飯才能看電視，異步(true)就是邊吃飯邊看電視**二、 jQuery中的使用Ajax 1.基本使用方法
$.ajax({
url: "xxx.php",
type: "get",
beforeSend: function(xhr){
console.log(xhr);
},
success: function (res) {
console.log(res);
},
error:function (xhr) {
console.log(xhr);
},
complete:function (xhr) {
console.log(xhr);
}
});
post方式只需把type值改成 get就行
2.快捷方式$.get("xxx.php",{id:1},function (res) {
console.log(res);
});
$.post("xxx.php",{id:1},function (res) {
console.log(res);
});
以上是get和post兩種方式3.解析Json格式
$.getJSON("xxx.php",{id:1},function (res) {
console.log(res);
});
或者在放置json格式文件的php中進(jìn)行申明頭部
"張三",
"age" => 18
);
//格式
header("Content-Type:application/json");
echo json_encode($zhangsan);
?>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/103731.html
摘要：原生與對(duì)的實(shí)現(xiàn)一定義里這么解釋異步的和。二原生實(shí)現(xiàn)所有現(xiàn)代瀏覽器以及均內(nèi)建對(duì)象。一般是正常未找到頁(yè)面，一般是錯(cuò)誤，或者后臺(tái)沒有創(chuàng)建相應(yīng)的內(nèi)部服務(wù)錯(cuò)誤，多為后臺(tái)錯(cuò)誤。基本上通過發(fā)送的數(shù)據(jù)及傳回的數(shù)據(jù)就能定位問題所在了。 原生JS與jQuery對(duì)AJAX的實(shí)現(xiàn) 一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...
摘要：在這里講解一下用原生如何實(shí)現(xiàn)。當(dāng)然，前面也說過，你可以給定固定回調(diào)函數(shù)名最后我已經(jīng)將和請(qǐng)求合并在一起了，下載鏈接原文鏈接原生實(shí)現(xiàn)如有問題，歡迎在下方留言 相信大多數(shù)前端開發(fā)者在需要與后端進(jìn)行數(shù)據(jù)交互時(shí)，為了方便快捷，都會(huì)選擇JQuery中封裝的AJAX方法，但是有些時(shí)候，我們只需要JQuery的AJAX請(qǐng)求方法，而其他的功能用到的很少，這顯然是沒必要的。 其實(shí)，原生JavaScript...
摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...
摘要：本文詳細(xì)講述如何使用原生和來實(shí)現(xiàn)。使用可以無刷新地向服務(wù)端發(fā)送請(qǐng)求接收服務(wù)端響應(yīng)，并更新頁(yè)面。分別要用到的方法和方法。，，都是現(xiàn)在和未來解決異步的標(biāo)準(zhǔn)做法，可以完美搭配使用。這也是使用標(biāo)準(zhǔn)一大好處。 本文詳細(xì)講述如何使用原生 JS、jQuery 和 Fetch 來實(shí)現(xiàn) AJAX。 AJAX 即 Asynchronous JavaScript and XML，異步的 JavaScript...
閱讀 1852·2021-08-19 11:12
閱讀 1426·2021-07-25 21:37
閱讀 990·2019-08-30 14:07
閱讀 1269·2019-08-30 13:12
閱讀 653·2019-08-30 11:00
閱讀 3531·2019-08-29 16:28
閱讀 995·2019-08-29 15:33
閱讀 2973·2019-08-26 13:40
