這篇文章主要為大家詳細介紹了jQuery中的ajax使用方法,文中示例代碼介紹的非常詳細,零基礎(chǔ)也能參考此文章,感興趣的小伙伴們可以參考一下。
創(chuàng)新互聯(lián)建站服務(wù)項目包括歷下網(wǎng)站建設(shè)、歷下網(wǎng)站制作、歷下網(wǎng)頁制作以及歷下網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,歷下網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到歷下省份的部分城市,未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
ajax --前后臺分離開發(fā) api(程序應(yīng)用集---數(shù)據(jù)接口)
局部刷新技術(shù)
異步請求(請求和后續(xù)代碼同時執(zhí)行) 同步請求(等待請求執(zhí)行完成在執(zhí)行后續(xù)代碼)
專門做后臺數(shù)據(jù)的訪問的
先學習原生js的ajax 對象 XMLhttprequest 對象 后臺數(shù)據(jù)訪問的對象
原生js在訪問后臺數(shù)據(jù)的時候?qū)iT寫
1.實例化對象
2.open 連接遠程服務(wù)器 參數(shù): method 請求的方式 get post url:請求的服務(wù)器路徑
async 當前的請求是同步還是異步 true 異步 false 同步 user 用戶名 password 密碼
send() 發(fā)送請求
4.響應(yīng)事件onreadystatechange
5.渲染界面
var http = new XMLHttpRequest();
//2.建立服務(wù)器連接
http.open("get", "./data/student.txt");
//3.發(fā)送請求
http.send();
//4.服務(wù)器響應(yīng)
http.onreadystatechange = function () {
//5.界面的渲染
//判斷 獲取最終讀取完成狀態(tài)
if (http.readyState == 4) {
//返回的數(shù)據(jù)都是string
//console.log(typeof http.responseText);
console.log(http.response);
//字符串類型的json數(shù)據(jù)轉(zhuǎn)化為對象型json JSON.parse()
var data = JSON.parse(http.response);
console.log(data);
//對象json轉(zhuǎn)化為string json JSON.stringify
//var strdata=JSON.stringify(data);
//console.log(strdata);
}
}
//原生ajax的封裝
function method(meth, url, data, async, callback) {
//對象的創(chuàng)建
var http = new XMLHttpRequest();
//判斷
if (meth == "get") {
//get 傳遞的數(shù)據(jù)在路徑的后邊 www.baidu.com?name=1&s=2
if (data) {
url += "?";
url += data;
}
http.open(meth, url, async);
http.send();
}
else {
http.open(meth, url, async);
//判斷是否有數(shù)據(jù)
if (data) {
http.send(data);
}
else {
http.send();
}
}
//響應(yīng)
http.onreadystatechange = function () {
//狀態(tài)的判斷
//狀態(tài)碼 200 success 500 服務(wù)器報錯 404 服務(wù)器端頁面丟失
if (http.readyState == 4 && http.status == 200) {
//將請求的數(shù)據(jù)返回
callback(http.response);
}
}
}
//域名解析就是localhost 沒有寫端口號默認80端口
//協(xié)議不一致會產(chǎn)生跨域
//端口不一致也會導致跨域
//域名不一致也會產(chǎn)生跨域
/*
* http://www.maodou.com/mao/list.html
* https://www.maodou.com/mao/list.html
* http://www.maodou.com:8080/mao/list.html
* http://www.dou.com/mao/list.html
* */
//跨域怎樣解決
//cros 資源共享 在后端進行配置 配置完成之后 可以直接訪問
//例如php 在后端文件里面寫入一句話 header("Access-Control-Allow-Origin:"); 代表所有
//jsonp 跨域 在原生js里面叫src跨域 直接使用路徑
//src可以連接遠程路徑
//直接使用script src屬性直接連接后臺的api進行遠程訪問
//在路徑的后邊帶一個回調(diào)函數(shù) 就好了 后臺的處理傳回的回調(diào)函數(shù)
//下面演示jsonp 跨域的問題
//jsonp跨域原理是 在前端上使用src進行跨域 在接口上傳入要執(zhí)行的回調(diào)函數(shù) (后臺一定要處理回調(diào)函數(shù) 這樣 前臺的函數(shù)才有響應(yīng))
2.jquery里面的ajax請求
$.ajax({
method:"get",//請求的方式 type
url:"", //路徑
data:{},//傳遞的參數(shù)
dataType:"",//數(shù)據(jù)類型
jsonpCallback:"",//jsonp 跨域的
success:function (res){
//成功
},
error:function (){
//請求失敗
},
async:true//設(shè)置同步異步的
});