编 写:袁 亮 时 间:2015-01-16 说 明:ajax的简单使用和常见问题 一、介绍 1、异步js和xml 2、在不刷新整个网页的情况下,异步的请求服务器改变部分页面数据 二、简单使用范例 1、一般我们直接使用jquery封装好的方法直接调用,原生的实现,可以参考w3c教程 2、范例 function addPost(f){ var title = f.title.value; var uid = 1535917; if(title.length<2){ alert('标题最少2个字'); f.title.focus(); return false; } //$.get("sub/post_add_sub.php?rid="+Math.random(),{title:title,user_id:uid},function(data){ $.post("sub/post_add_sub.php?rid="+Math.random(),{title:title,user_id:uid},function(data,state){ console.log("b"); if(data == '1'){ //成功后的处理,显示 }else{//失败后的提示处理等 alert(data); } }); console.log("a"); return false;//不能少 } 3、简单说明 1、get和post方法使用方法一样 2、第一个参数代表的是你访问的网址是什么,后面加了一个参数rid,是因为浏览器会对js的请求进行缓存 我们使用ajax的请求,不希望被缓存,所以加了一个随机数 2、第二个参数{title:title,user_id:uid} title是传给post_add_sub.php页面的参数名,第二个title是js的变量,传递值 user_id:uid同理 3、第三个参数,这是一个回调函数 data是post_add_sub.php的返回值,string类型的(类似于post请求到那边,页面输出的源代码) state:表示的是这次请求的状态,是否成功等,简化使用的时候我们没有判断该参数 function(data,state){ } 4、设置了两个console.log,一半来说a会比b先写进去 ajax请求是一个异步的,发出这个请求,不管有没有成功,继续执行下面的代码,console.log("a"); 异步的请求执行完之后,才会执行到回调函数中console.log("b"); 因此一般的网络请求,都会是a先触发,后触发的b 三、适用场景 1、异步提交数据 填写了一个表单,写了一堆东西,结果提交过去之后,因为某些错误,返回重写,导致之前的努力全部白费 这个时候非常需要异步提交,增强用户体验 2、局部刷新页面数据 页面只有一小部分数据需要刷新,有改动的情况 比如说:投完票,我需要实时的查看现在的票数 比如说,删除了一行数据 或者一个很大的页面,其中一小块的数据需要进行分页等等 3、性能 一个页面如果有非常多的数据量,如果一次全部取出来,加载的话,会非常卡,而且有很多无效的查询和请求 这个时候,可以有个简单的优化办法,按需加载 比如页面滚动的时候,加载相应数据、图片等 四、缺点 1、实现会比之前的稍微复杂些 2、后加载的内容对搜索引擎不友好,搜索引擎抓取不到 也有办法解决,就是会很麻烦 3、复制链接给其他用户或者自己收藏的时候,下次打开发现跟预期的不一样 可以通过锚点解决这个问题,可以百度看下相关资料 五、调试方法 1、可以通过firebug,或者chrome的F12查看相应的network状态 http请求的具体知识,请查看相应文档 2、先使用get请求的方法访问,调试 在新窗口中打开该请求,刷新页面调试即可,与正常网页一样 3、使用抓包工具Fiddler2抓取请求包分析 六、常见问题 1、编码 只认utf-8编码,sub那边的返回数据必须设置编码格式 2、跨域 js不允许post跨域,浏览器同源安全策略 get跨域,跨域通过jsonp方法解决(jquery的getJson方法) 也可以采用本域中转页面,然后发起一个服务端到服务端的请求,从而绕过跨域限制 3、缓存 ajax请求,正常情况下是会被浏览器缓存中的,所以请加随机数防止