????//封裝jq版ajax請(qǐng)求
????//我們的目標(biāo):
????//?$.ajax({
????//???url:?'',
????//???type:?"post",
????//???data:?{
????//???},
????//???dataType:?'josn',
????//???async:?true,
????//???success:function(data){
????//???},
????//???error:function(err){
????//???}
????//?})
????jqAjax?(params)?{
??????var?$?=?{};??//模仿jq對(duì)象
??????$.ajax?=?function?(options)?{?//實(shí)現(xiàn)邏輯
????????//使用XMLHttpRequest
????????var?xhr?=?new?window.XMLHttpRequest();
????????//成功處理
????????var?ajaxSuccess?=?function?(data)?{
??????????options.success(data)
????????}
????????//失敗處理
????????var?ajaxError?=?function?(data)?{
??????????options.error(data)
????????}
????????//對(duì)象轉(zhuǎn)字符串
????????var?params?=?function?(obj)?{
??????????var?data?=?'';
??????????for?(var?key?in?obj)?{
????????????data?+=?key?+?"="?+?obj[key]?+?"&"
??????????}
??????????return?data.substring(0,?data.length?-?1);
????????}
????????//是否為異步請(qǐng)求?默認(rèn)是異步請(qǐng)求??特殊會(huì)使用同步
????????var?async?=?options.async???options.async?:?true;
????????xhr.open(options.type,?options.url,?async);
????????xhr.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
????????xhr.setRequestHeader("Accept",?"application/json");
????????xhr.onreadystatechange?=?function?()?{
??????????if?(xhr.readyState?!=?4)?return
??????????if?((xhr.status?>=?200?&&?xhr.status?<=?300)?||?xhr.status?==?304)?{
????????????ajaxSuccess(xhr.responseText)
??????????}?else?{
????????????ajaxError(xhr.statusText)
??????????}
????????}
????????console.log(options.data)
????????xhr.send(params(options.data));
??????}
1）open方法的第一個(gè)參數(shù)是請(qǐng)求類型：get软族、post埋嵌、head等卦绣，第二個(gè)參數(shù)是請(qǐng)求的接口地址端礼，第三個(gè)參數(shù)表示ajax請(qǐng)求是異步（true）還是同步（false）岗屏，如果是異步淤翔，在ajax發(fā)送完請(qǐng)求后js會(huì)繼續(xù)執(zhí)行蕴茴，不會(huì)等待服務(wù)器響應(yīng)玉罐，我們一般選擇異步，提高頁面的渲染效率岳锁；
2）send方法只有一個(gè)參數(shù)绩衷，表示向服務(wù)器發(fā)送的參數(shù)，一般是對(duì)象激率；
3）onreadystatechange是一個(gè)事件咳燕，它可以監(jiān)聽從請(qǐng)求開始到結(jié)束整個(gè)過程的狀態(tài)，狀態(tài)保存在xhr的readyState屬性中乒躺。
readyState狀態(tài)：
0代表未初始化招盲，open方法還未執(zhí)行；
1代表正在加載嘉冒，open已被執(zhí)行但send還未被執(zhí)行曹货；
2代表已經(jīng)加載完畢，send已被執(zhí)行讳推，請(qǐng)求已被發(fā)送顶籽；
3代表正在等待服務(wù)器響應(yīng)；
4代表響應(yīng)已經(jīng)完成娜遵。
從上面readyState狀態(tài)我們可以看出蜕衡，ajax只需要4的情況，其他狀態(tài)其實(shí)都是失斏枘狻慨仿！
另外，xhr的status屬性代表服務(wù)器返回的狀態(tài)碼纳胧，根據(jù)我們的經(jīng)驗(yàn)镰吆，狀態(tài)碼在400以上都是有問題的，要么是服務(wù)端問題跑慕，要么就是客戶端問題万皿！300到400之間好像都和重定向有關(guān)系摧找，但是有一個(gè)除外——304，如果你了解瀏覽器緩存牢硅，你肯定知道它和協(xié)商緩存有關(guān)系蹬耘，其實(shí)它代表請(qǐng)求成功！另外200以下的狀態(tài)都需要請(qǐng)求者繼續(xù)操作减余，也不符合要求综苔！總結(jié)一下，可用的狀態(tài)碼就是200到300之間位岔，加一個(gè)304如筛！
??????$.ajax(
????????{
??????????url:?'http://121.0.0.202:9008/api/v1/common/home/login',
??????????type:?"post",
??????????data:?{
????????????loginName:?"44",
????????????loginPwd:?"544"
??????????},
??????????async:?true,
??????????success:?function?(data)?{
????????????console.log(data,?"889")
??????????},
??????????error:?function?(err)?{
????????????console.log(err)
??????????}
????????}
??????)
????}
