愛前端jQuery分享系列第六講

主講：呂大豹第六講：ajax全面解析愛前端jQuery系列分享Contents目錄ajax基礎(chǔ)知識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同時執(zhí)行看個例子1.3異步請求有什么用途？制作單頁面應用，用戶操作不進行跳轉(zhuǎn)，每次只更新局部內(nèi)容表單即時校驗，如文本框失去焦點立即校驗進行前后端分離，后端只關(guān)注數(shù)據(jù)定時異步請求（輪詢），實現(xiàn)偽實時效果。如在線聊天室異步加載多級數(shù)據(jù)，如樹形結(jié)構(gòu)、多級聯(lián)動菜單、分頁。。。1.4異步請求的優(yōu)缺點優(yōu)點：不會阻塞當前正在進行的任務(wù)局部刷新，避免頁面跳轉(zhuǎn)，用戶體驗更好減少請求數(shù)據(jù)的大小，加載更快有利于前后端分離，后端只關(guān)注數(shù)據(jù)缺陷：毀壞了瀏覽器前進后退按鈕的功能不利于SEO無法跨域1.5認識XMLHttpRequest對象varxhr=newXMLHttpRequest();console.log(xhr);1.6原生ajax寫法請求的5個階段：對應readyState的值0：未初始化，send方法未調(diào)用1：正在發(fā)送請求，send方法已調(diào)用2：請求發(fā)送完畢，send方法執(zhí)行完畢3：正在解析響應內(nèi)容4：響應內(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:‘請求地址’,

type:‘GET/POST’,

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

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

timeout:‘5000’,//超時時間

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

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

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

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

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

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