问题：
目前来，所有的请求的发送都是通过浏览器自己直接进行发送，响应是浏览器在接收到，响应信息后自主的将响应数据覆盖当前页面显示。现在，要求在保留原有页面内容的情况下显示新的响应内容。
解决：
AJAX技术
AJAX简介及原理
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
请求由ajax引擎对象发送，响应数据，浏览器不会直接进行处理，而是流转给发请求的ajax引擎对象。
这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新的响应资源。
优点：
- Ajax在本质上是一个浏览器端的技术
- Ajax技术之主要目的在于局部交换客户端及服务器间之数据
- 这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)
- 与服务器之间的沟通，完全是透过Javascript 来实行
- 使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
- AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦
XMLHttpRequest对象
- AJAX的核心。
- 不同浏览器创建方式不同
- 异步从服务器端获取数据
使用XMLHttpRequest对象
1 .创建ajax引擎对象
var ajax; if(window.XMLHttpRequest){ ajax=new XMLHttpRequest//火狐 谷歌 }else if(window.ActiveXObject){ ajax=new ActiveXObject("Msxml2.XMLHTTP");//ie }
2 .声明ajax监听函数
ajax.onreadystatechange=function(){ //判断数据状态码 if(ajax.readyState==4){//4 表示响应数据成功接收 //判断响应状态码 if(ajax.status==200){ //获取响应数据 //普通文本 //json格式数据 var data=ajax.responseText; //xml数据 //var doc=ajax.responseXML; var data=ajax.responseText; //处理响应数据(js的DOM操作) var showdiv=document.getElementById("showdiv"); showdiv.innerHTML=data; }else if(ajax.status==404){ var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="请求资源未找到"; }else if(ajax.status==500){ var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="服务器繁忙"; } } }
3 创建并发送请求
ajax.open(method,url,async)
ajax.send("请求数据")
解释:
method：表示请求的方式，值为get/post
url:表示请求地址，一般为要请求的servlet的别名。
async:表示异步还是同步请求，true表示异步，false表示同步，
默认为异步。
注意：
如果请求方式是get方式，则请求数据需要拼接在url的后面，
以？隔开，键值对。并且send中要写null
如果是post请求方式，则在send方法中书写请求数据即可。并
且要声明数据的提交格式为键值对。
示例：
//使用get方式
ajax.open("get","user?uname="+uname,true);
ajax.send(null);
//post方式
ajax.open("post","user", true);
//设置请求数据的格式
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded
");
ajax.send("un="+uname);
ajax的响应数据格式
普通文本：
后台在接收到ajax请求后，处理后直接响应普通字符串给ajax
josn数据：
后台在接收到ajax请求后，处理后响应json格式的字符串给ajax，ajax处理代码中使用eval()方法将json数据转换为js对的对象，将对象中的数据通过js的dom操作显示到页面中。
注意：
json格式：
var 对象名={
键名:值,
键名:值,
........
}
xml数据：
后台在接收到ajax请求后，处理后响应xml格式的字符串给ajax。
前台使用ajax.responseXML进行数据接收，返回的是xml文档对象(document)。使用document对象将xml中取出并显示到页面中即可。
注意：
后台的响应数据格式必须设置成xml格式：
resp.setContentType("text/xml;charset=utf-8");
注意：
ajax是前端的技术，由浏览器进行解析执行。
使用流程（原生）：
1 创建ajax引擎对象
2 覆写onreadystatechange函数
判断数据状态码
判断响应状态码
获取响应数据
处理响应信息
3 创建并发送请求
封装：
相同的保留，不同的传参。最终封装成一个js文件。
---------------------------------------------------------------------------------------------------------
jquery中的ajax：
w3c-jquery-ajax
使用方式：
1 $.get(url,data,fn)
2 $.post(url,data,fn)
3 $.ajax({
type:"get",
url:"data",
success:function(data){
alert(data);
}
})
注意：
$.get和$.post方式中的data为json格式的请求数据
以上三种方式，请求成功后的回调函数中的形参表示响应的数据。