AJAX 详解 -----Jane Eyre

AJAX：

1. 概念： ASynchronous JavaScript And XML	异步的JavaScript 和 XML
	1. 异步和同步：客户端和服务器端相互通信的基础上
		* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
		* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
	（1）它是一种什么技术？
		Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
	（2）它能解决什么问题 ？
		通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
		传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
	（3）它的作用是什么？
		提升用户的体验
	（4）它的优缺点有哪些？
			优点：
				1.最大的优点就是能在不更新整个页面的前提下维护数据，在页面内与服
				  务器通信，给用户的体验非常好。
				2.使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的
				  响应能力。
				3.可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能
				  力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本，并且
				  减轻服务器的负担。
				  ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对
				  服务器造成的负担。
				4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
			缺点：
				AJAX的一个缺点就是它可能破坏浏览器的后退与加入收藏书签功能。
				在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器
				仅能记下历史记录中的静态页面。
					解决方案：
						a:HTML5之前的一种方式是使用URL片断标识符（通常被称为锚
						  点，即URL中#后面的部分）来保持追踪，允许用户回到指定的
						  某个应用程序状态。通过创建或使用一个隐藏的IFRAME来重现
						  页面上的变更。
						b:HTML5以后可以直接操作浏览历史，并以字符串形式存储网页
						  状态，将网页加入网页收藏夹或书签时状态会被隐形地保留。
	（5）它有哪些应用场景
			场景1. 用Ajax进行数据验证
				在填写表单内容时，有时需要保证数据的唯一性，如新用户注册填写的用户
				名，因此必须对用户输入的内容进行数据验证。
				使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的
				HTTP响应判断验证是否成功。
				整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又
				不加重服务器负担。
			场景2. 按需取数据
				Ajax改进分类树的实现机制。在初始化页面时，只获取第一级子分类的数
				据并且显示；
				当用户点开一级分类的第一节点时，页面会通过Ajax向服务器请求当前分
				类所属的二级子分类的所有数据；
				如果再请求已经呈现的二级分类的某一节点时，再次向服务器请求当前分类
				所属的三级子分类的所有数据，以此类推。
			场景3. 自动更新页面
				页面加载以后，会通过Ajax引擎在后台进行定时的轮询，向服务器发送请
				求，查看是否有最新的消息。
				如果有则将新的数据（而不是所有数据）下载并且在页面上进行动态的更
				新，通过一定的方式通知用户

2. 实现方式：
	1. 原生的JS实现方式（了解）
				 //1.创建核心对象
	            var xmlhttp;
	            if (window.XMLHttpRequest)
	            {// code for IE7+, Firefox, Chrome, Opera, Safari
	                xmlhttp=new XMLHttpRequest();
	            }
	            else
	            {// code for IE6, IE5
	                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	            }
	
	            //2. 建立连接
	            /*
	                参数：
	                    1. 请求方式：GET、POST
	                        * get方式，请求参数在URL后边拼接。send方法为空参
	                        * post方式，请求参数在send方法中定义
	                    2. 请求的URL：
	                    3. 同步或异步请求：true（异步）或 false（同步）
	
	             */
	            xmlhttp.open("GET","ajaxServlet?username=tom",true);
	
	            //3.发送请求
	            xmlhttp.send();
	
	            //4.接受并处理来自服务器的响应结果
	            //获取方式 ：xmlhttp.responseText
	            //什么时候获取？当服务器响应成功后再获取
	
	            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
	            xmlhttp.onreadystatechange=function()
	            {
	                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
	                if (xmlhttp.readyState==4 && xmlhttp.status==200)
	                {
	                   //获取服务器的响应结果
	                    var responseText = xmlhttp.responseText;
	                    alert(responseText);
	                }
	            }
	2. JQeury实现方式
		1. $.ajax()
			* 语法：$.ajax({键值对});
			 //使用$.ajax()发送异步请求
	            $.ajax({
	                url:"ajaxServlet1111" , // 请求路径
	                type:"POST" , //请求方式
	                //data: "username=jack&age=23",//请求参数
	                data:{"username":"jack","age":23},
	                success:function (data) {
	                    alert(data);
	                },//响应成功后的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },//表示如果请求响应出现错误，会执行的回调函数
	
	                dataType:"text"//设置接受到的响应数据的格式
	            });
		2. $.get()：发送get请求
			* 语法：$.get(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型

		3. $.post()：发送post请求
			* 语法：$.post(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型