愛前端jQuery分享系列第六講

1、主講：呂大豹 第第六六講：講：ajaxajax全面解析全面解析 Contents 目目錄錄 a ajaxjax基礎(chǔ)知識(shí) 01 1.1 ajax1.1 ajax是什么？ Asynchronous javascript And XML 異步的 javascript 和 XML ajax 1.2 1.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 1.3 異步請(qǐng)求有什么用途？

2、1.制作單頁(yè)面應(yīng)用，用戶操作不進(jìn)行跳轉(zhuǎn)，每次只更新局部?jī)?nèi)容 2.表單即時(shí)校驗(yàn)，如文本框失去焦點(diǎn)立即校驗(yàn) 3.進(jìn)行前后端分離，后端只關(guān)注數(shù)據(jù) 4.定時(shí)異步請(qǐng)求（輪詢），實(shí)現(xiàn)偽實(shí)時(shí)效果。如在線聊天室 5.異步加載多級(jí)數(shù)據(jù)，如樹形結(jié)構(gòu)、多級(jí)聯(lián)動(dòng)菜單、分頁(yè) 6.。 1.4 1.4 異步請(qǐng)求的優(yōu)缺點(diǎn) 優(yōu)點(diǎn)： 1.不會(huì)阻塞當(dāng)前正在進(jìn)行的任務(wù) 2.局部刷新，避免頁(yè)面跳轉(zhuǎn)，用戶體驗(yàn)更好 3.減少請(qǐng)求數(shù)據(jù)的大小，加載更快 4.有利于前后端分離，后端只關(guān)注數(shù)據(jù) 缺陷： 1.毀壞了瀏覽器前進(jìn)后退按鈕的功能 2.不利于SEO 3.無法跨域 1.5 1.5 認(rèn)識(shí)XMLHttpRequestXMLHttpRequest對(duì)

3、象 var xhr = new XMLHttpRequest(); console.log(xhr); 1.6 1.6 原生ajaxajax寫法 請(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中的ajax 02 2.1 jQuery2.1 jQuery中的ajaxajax $.get(url, data, callback, type) $.post(url, data, callback, ty

4、pe) $.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 : fun

5、ction(data, textStatus, jqXHR), /請(qǐng)求成功 error : function(xhr, textStatus), /請(qǐng)求失敗 complete : function(xhr, testStatus), /請(qǐng)求結(jié)束 ) JSONP 查看示例 3. jQuery全局設(shè)置和全局事件 3.13.1全局設(shè)置 $.ajaxSetup( type: POST, timeout : 6000, dataType : json, beforeSend : function() console.log(loading.); , error : function() alert(請(qǐng)求

6、失敗，請(qǐng)重試！); ); ajax的所有配置項(xiàng)均可進(jìn)行全局設(shè)置 常用的全局設(shè)置： 查看示例 3.2 3.2 全局事件 只要頁(yè)面發(fā)生ajax請(qǐng)求，就會(huì)觸發(fā) ajaxStart ajaxSend ajaxStop ajaxError ajaxSuccess ajaxComplete 查看示例 序列化數(shù)據(jù)序列化數(shù)據(jù) 4Part 4.1 表單數(shù)據(jù)序列化 作用： 1.異步提交表單，免去跳轉(zhuǎn) 2.快速獲取表單數(shù)據(jù) serialize() /序列化為字符串 serializeArray() /序列化為數(shù)組 JSON.parse() /json字符串轉(zhuǎn)化為json對(duì)象 JSON.stringify() /json對(duì)象轉(zhuǎn)化為json字符串 查看示例 5 實(shí)際應(yīng)用 & 踩過的坑 ONE 5.1 5.1 想要returnreturn異步數(shù)據(jù) 查看示例 5.2 5.2 同步ajaxajax引起的UIUI線程阻塞 查看示例 5.3 5.3 為ajaxajax設(shè)置超時(shí)時(shí)間 設(shè)置timeout參數(shù)，單位毫秒 查看示例 5.45.4判斷errorerror類型 error的類型可能有： timeout 超時(shí) error 獲取不到具體錯(cuò)誤 notmodified 返回304 parsererror 解析xml或j