愛前端jQuery分享系列第六講

主講：呂大豹第六講：ajax全面解析愛前端jQuery系列分享Contents目錄ajax基礎(chǔ)知識(shí)011.1ajax是什么？AsynchronousjavascriptAndXML異步的javascript和XMLajax1.2什么是同步？什么是異步？同步：javascript是單線程的，代碼始終自上往下依次執(zhí)行?？梢援惒綀?zhí)行的代碼：ajax、setTimeout、setInterval異步：任務(wù)1任務(wù)2任務(wù)1任務(wù)2任務(wù)2的回調(diào)函數(shù)任務(wù)1和任務(wù)2同時(shí)執(zhí)行看個(gè)例子1.3異步請(qǐng)求有什么用途？制作單頁面應(yīng)用，用戶操作不進(jìn)行跳轉(zhuǎn)，每次只更新局部內(nèi)容表單即時(shí)校驗(yàn)，如文本框失去焦點(diǎn)立即校驗(yàn)進(jìn)行前后端分離，后端只關(guān)注數(shù)據(jù)定時(shí)異步請(qǐng)求（輪詢），實(shí)現(xiàn)偽實(shí)時(shí)效果。如在線聊天室異步加載多級(jí)數(shù)據(jù)，如樹形結(jié)構(gòu)、多級(jí)聯(lián)動(dòng)菜單、分頁。。。1.4異步請(qǐng)求的優(yōu)缺點(diǎn)優(yōu)點(diǎn)：不會(huì)阻塞當(dāng)前正在進(jìn)行的任務(wù)局部刷新，避免頁面跳轉(zhuǎn)，用戶體驗(yàn)更好減少請(qǐng)求數(shù)據(jù)的大小，加載更快有利于前后端分離，后端只關(guān)注數(shù)據(jù)缺陷：毀壞了瀏覽器前進(jìn)后退按鈕的功能不利于SEO無法跨域1.5認(rèn)識(shí)XMLHttpRequest對(duì)象varxhr=newXMLHttpRequest();console.log(xhr);1.6原生ajax寫法請(qǐng)求的5個(gè)階段：對(duì)應(yīng)readyState的值0：未初始化，send方法未調(diào)用1：正在發(fā)送請(qǐng)求，send方法已調(diào)用2：請(qǐng)求發(fā)送完畢，send方法執(zhí)行完畢3：正在解析響應(yīng)內(nèi)容4：響應(yīng)內(nèi)容解析完畢看示例兼容低版本IE的寫法jQuery中的ajax022.1jQuery中的ajax$.get(url,[data],[callback],[type])$.post(url,[data],[callback],[type])$.getJSON(url,[data],[callback])$.getScript(url,[callback])$.fn.load(url,[data],[callback])$.ajax(

{

url:‘請(qǐng)求地址’,

type:‘GET/POST’,

async:true/false,//是否異步

data:{},//發(fā)送的數(shù)據(jù)

timeout:‘5000’,//超時(shí)時(shí)間

dataType:‘json/xml/html/script/json/jsonp/text’,//返回的數(shù)據(jù)格式

beforeSend:function(xhr){},//發(fā)送請(qǐng)求前

success:function(data,textStatus,jqXHR){},//請(qǐng)求成功

error:function(xhr,textStatus){},//請(qǐng)求失敗

complete:function(xhr,testStatus){},//請(qǐng)求結(jié)束})JSONP查看示例3.jQuery全局設(shè)置和全局事件3.1全局設(shè)置$.ajaxSetup({ type:'POST', timeout:'6000', dataType:'json', beforeSend:function(){ console.log('loading...'); }, error:function(){ alert('請(qǐng)求失敗，請(qǐng)重試！'); }});ajax的所有配置項(xiàng)均可進(jìn)行全局設(shè)置常用的全局設(shè)置：查看示例3.2全局事件只要頁面發(fā)生ajax請(qǐng)求，就會(huì)觸發(fā)ajaxStartajaxSendajaxStopajaxErrorajaxSuccessajaxComplete查看示例序列化數(shù)據(jù)4Part4.1表單數(shù)據(jù)序列化作用：異步提交表單，免去跳轉(zhuǎn)快速獲取表單數(shù)據(jù)serialize()//序列化為字符串serializeArray()//序列化為數(shù)組JSON.parse()//json字符串轉(zhuǎn)化為json對(duì)象JSON.stringify()//json對(duì)象轉(zhuǎn)化為json字符串查看示例5實(shí)際應(yīng)用&踩過的坑ONE5.1想要return異步數(shù)據(jù)查看示例5.2同步ajax引起的UI線程阻塞查看示例

5.3為ajax設(shè)置超時(shí)時(shí)間設(shè)置timeout參數(shù)，單位毫秒查看示例5.4判斷error類型error的類型可能有：timeout超時(shí)error獲取不到具體錯(cuò)誤notmodified返回304parsererror解析xml或json錯(cuò)