ajax的简单使用和常见问题


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


发表评论