Ajax

一、http請(qǐng)求的7個(gè)步驟

1.建立tcp連接

2.web瀏覽器向web服務(wù)器發(fā)送請(qǐng)求命令

3.瀏覽器發(fā)送請(qǐng)求頭

4.服務(wù)器應(yīng)答

5.服務(wù)器發(fā)送應(yīng)答頭信息

6.服務(wù)發(fā)送數(shù)據(jù)

7.服務(wù)器斷開tcp

二、get與post區(qū)別

get形式請(qǐng)求數(shù)據(jù),參數(shù)會(huì)以明文的形式拼接在url地址的后面,請(qǐng)求的長(zhǎng)度受到url地址格式的限制。

post形式請(qǐng)求數(shù)據(jù),參數(shù)會(huì)打包到請(qǐng)求對(duì)象中進(jìn)行傳遞,不會(huì)顯示在url地址中。數(shù)據(jù)請(qǐng)求的安全性比較get而言更加神秘。

get方式請(qǐng)求數(shù)據(jù)的效率相比post方式較高!

參數(shù)長(zhǎng)度有一定的限制的情況下請(qǐng)求常規(guī)數(shù)據(jù),使用get方式。

參數(shù)長(zhǎng)度沒有限制或者包含二進(jìn)制數(shù)據(jù)或者包含安全要求的數(shù)據(jù)等,請(qǐng)求的數(shù)據(jù)涉及到安全性的情況下,使用post方式。

三、ajax(異步JAvaScript和XML)

如何實(shí)現(xiàn)ajax?

(1)創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.

(2)創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息.

(3)設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù).

(4)發(fā)送HTTP請(qǐng)求.

(5)獲取異步調(diào)用返回的數(shù)據(jù).

(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.

1.創(chuàng)建一個(gè)XMLHttpRequest對(duì)象

創(chuàng)建語法

var?xhr?=?new?XMLHttpRequest();

打開鏈接

xhr.open(“GET/POST”,“url?Params1=some?ms2=some2”,true);

發(fā)送send

get:send()

post:

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

xhr.send(“name=”+uname.value);

監(jiān)聽

xhr.onreadystatechange=function(){

if(xhr.status?==?200?&&?xhr.readyState?==?4){

Console.log(xhr.responseText);

}

}

2.readyState值含義

0--------未初始化,尚未調(diào)用open。

1--------初始化,尚未調(diào)用send。

2--------發(fā)送數(shù)據(jù),已經(jīng)調(diào)用send。

3--------數(shù)據(jù)傳送中。

4--------完成。

3.status值

200---------OK,服務(wù)器成功返回了頁面。

400---------Bad?Request??語法錯(cuò)誤導(dǎo)致服務(wù)器不識(shí)別。

401---------Unauthorized???請(qǐng)求需要用戶認(rèn)證。

404---------Not?Found??指定的url在服務(wù)器上找不到

500---------Internal?Server?Error??服務(wù)器遇到意外錯(cuò)誤,無法完成請(qǐng)求。

503---------ServiceUnavailable??由于服務(wù)器過載或維護(hù)導(dǎo)致無法完成請(qǐng)求。

4.$.get()和$.post()

$.get語法:

$.get(url,[data],[callback],[type])

url:必需,待載入頁面的url地址。

data:可選,待發(fā)送key/value參數(shù)。

callback:可選,載入成功時(shí)回調(diào)函數(shù)。

type:可選,返回內(nèi)容格式,xml,html,script,jason,text,_default。

區(qū)別:

get請(qǐng)求是通過URL提交的,post請(qǐng)求則是http消息實(shí)體提交的。

get提交大小有限制(2KB),而post方式不受限制。

get方式會(huì)被緩存下來,可能有安全性問題,而post沒有這個(gè)問題。

get方式通過$_get[]獲取,post方式通過$_post[]獲取。

$.post語法:

$.post(URL,data,callback)

url:必需,希望請(qǐng)求的url。

data:可選,規(guī)定連同請(qǐng)求發(fā)送的數(shù)據(jù)。

callback:可選,請(qǐng)求成功后所執(zhí)行的函數(shù)名。

5.$.getScript()和$.getJson()

$.getScript()用于加載特定的JS文件;$.getJson()用于

專門加載Json文件。?(如果我們希望能在特定的情況再加載js文件,而不是一開始把所有jS文件都加載,這時(shí)使用$.getScript())。

$.getScript(url,callback)

url:為服務(wù)器的請(qǐng)求地址。

callback:數(shù)據(jù)請(qǐng)求成功后,執(zhí)行的回調(diào)函數(shù)。

$.getJson(url,[data],callback)

url:請(qǐng)求加載json格式文件的服務(wù)器地址。

data:請(qǐng)求時(shí)發(fā)送的數(shù)據(jù)。

callback:數(shù)據(jù)請(qǐng)求成功后,執(zhí)行的回調(diào)函數(shù)。

6.$.ajax()

語法:$.ajax({name:value,name:value,.....})

只有一個(gè)參數(shù),傳遞一個(gè)各個(gè)功能鍵值對(duì)的對(duì)象。

url:string類型,發(fā)送請(qǐng)求的地址。

data:Object或string類型,發(fā)送到服務(wù)器的數(shù)據(jù),鍵值對(duì)字符串或?qū)ο蟆?/p>

dataType:string類型,返回的數(shù)據(jù)類型,比如html、xml,json等。

beforeSend:function類型,發(fā)送請(qǐng)求前可修改XMLHttpRequest對(duì)象的函數(shù)。

complete:function類型,請(qǐng)求完成后調(diào)用的回調(diào)函數(shù)。

success:function類型,請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)。

error:function類型,請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)。

常用代碼塊:

獲取評(píng)論:

$.ajax({

type:"get",url:"https://club.jd.com/discussion/getProductPageImageCommentList.action?productId=2608433",

async:true,

dataType:"jsonp",

success:function(res){

....................

})

}

});

登錄注冊(cè):

$("#shouye").click(function(){$.get("http://datainfo.duapp.com/shopdata/userinfo.php?status=login&userID="+$("#nam").val()+"&password"+$("#pwd").val(),function(res,status,xhr){

if(status=="success"){

if(res==0){

alert("用戶名不存在");

}else?if(res==2){

alert("用戶名或密碼錯(cuò)誤");

}else{

window.location.href?=?"index.html";

}

}

});

});

});

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容