爱前端jQuery分享系列第六讲.pptx

主讲：吕大豹 第六讲：ajax全面解析 爱前端jQuery系列分享 Contents 目 录 ajax基础知识 01 1.1 ajax是什么？ Asynchronous javascript And XML 异步的 javascript 和 XML ajax 1.2 什么是同步？什么是异步？ 同步： javascript是单线程的，代码始终自上往下依次执行。 可以异步执行的代码：ajax、setTimeout、setInterval 异步： 任务1 任务2 任务1 任务2 任务2的回调函数 任务1和任务2同时执行 看个例子 1.3 异步请求有什么用途？ 制作单页面应用，用户操作不进行跳转，每次只更新局部内容 表单即时校验，如文本框失去焦点立即校验 进行前后端分离，后端只关注数据 定时异步请求（轮询），实现伪实时效果。如在线聊天室 异步加载多级数据，如树形结构、多级联动菜单、分页 。。。 1.4 异步请求的优缺点 优点： 不会阻塞当前正在进行的任务 局部刷新，避免页面跳转，用户体验更好 减少请求数据的大小，加载更快 有利于前后端分离，后端只关注数据 缺陷： 毁坏了浏览器前进后退按钮的功能 不利于SEO 无法跨域 1.5 认识XMLHttpRequest对象 var xhr = new XMLHttpRequest(); console.log(xhr); 1.6 原生ajax写法 请求的5个阶段： 对应readyState的值 0：未初始化，send方法未调用 1：正在发送请求，send方法已调用 2：请求发送完毕，send方法执行完毕 3：正在解析响应内容 4：响应内容解析完毕 看示例 兼容低版本IE的写法 jQuery中的ajax 02 2.1 jQuery中的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请求，就会触发 ajaxStart ajaxSend ajaxStop ajaxError ajaxSuccess ajaxComplete 查看示例 序列化数据 4 Part 4.1 表单数据序列化 作用： 异步提交表单，免去跳转 快速获取表单数据 serialize() //序列化为字符串 serializeArray() //序列化为数组 JSON.parse() //json字符串转化为json对象 JSON.stringify() //json对象转化为json字符串 查看示例 5 实际应用 踩过的坑 ONE 5.1 想要return异步数据 查看示例 5.2 同步ajax引起的UI线程阻塞 查看示例 5.3 为ajax设置超时时间 设置timeout参数，单位毫秒