编 写：袁 亮
时 间：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请求，正常情况下是会被浏览器缓存中的，所以请加随机数防止