愛前端jQuery分享系列第六講

主講：呂大豹第六講：ajax全面解析愛前端jQuery系列分享Contents目錄ajax基礎知識011.1ajax是什么？AsynchronousjavascriptAndXML異步的javascript和XMLajax1.2什么是同步？什么是異步？同步：javascript是單線程的，代碼始終自上往下依次執行?？梢援惒綀绦械拇a：ajax、setTimeout、setInterval異步：任務1任務2任務1任務2任務2的回調函數任務1和任務2同時執行看個例子1.3異步請求有什么用途？制作單頁面應用，用戶操作不進行跳轉，每次只更新局部內容表單即時校驗，如文本框失去焦點立即校驗進行前后端分離，后端只關注數據定時異步請求（輪詢），實現偽實時效果。如在線聊天室異步加載多級數據，如樹形結構、多級聯動菜單、分頁。。。1.4異步請求的優缺點優點：不會阻塞當前正在進行的任務局部刷新，避免頁面跳轉，用戶體驗更好減少請求數據的大小，加載更快有利于前后端分離，后端只關注數據缺陷：毀壞了瀏覽器前進后退按鈕的功能不利于SEO無法跨域1.5認識XMLHttpRequest對象varxhr=newXMLHttpRequest();console.log(xhr);1.6原生ajax寫法請求的5個階段：對應readyState的值0：未初始化，send方法未調用1：正在發送請求，send方法已調用2：請求發送完畢，send方法執行完畢3：正在解析響應內容4：響應內容解析完畢看示例兼容低版本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:{},//發送的數據

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

dataType:‘json/xml/html/script/json/jsonp/text’,//返回的數據格式

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

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

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

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

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