爱前端jQuery分享系列第六讲

主讲：吕大豹第六讲：ajax全面解析爱前端jQuery系列分享Contents目录ajax基础知识011.1ajax是什么？AsynchronousjavascriptAndXML异步的javascript和XMLajax1.2什么是同步？什么是异步？同步：javascript是单线程的，代码始终自上往下依次执行。可以异步执行的代码：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错