一、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";
}
}
});
});
});