AJAX介绍
【1】AJAX简介
全称：Asynchronous IavaScript And XML(异步的JavaScript和XML)
AJAX就是通过JavaScript向服务器发送请求，并接收响应，然后我们在通过DOM修改页面。
XML指的是服务器响应的数据的格式。
目前AJAX 已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。AJAX可以响应txt、xml、json格式的数据。
【2】同步和异步
同步：当我们通过浏览器向服务器发送一个请求时，浏览器会刷新整个页面。
异步：当我们向服务器发送请求时，不是刷新整个页面，而是只刷新网页的一部分。
【3】XMLHttpRequest对象
我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
在XMLHttpRequest对象中封装发送给服务器请求报文，同时在服务器发回响应时，响应信息也会在对象中封装。
如何获取XMLHttpRequest对象var xhr = new XMLHttpRequest();
【4】使用步骤
第一步：创建XMLHttpRequest对象；
大部分比较新的浏览器都支持的方式（IE7以上）
var xhr = new XMLHttpRequest();
IE6以下的浏览器
var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.5以下的浏览器
var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
通用的获取XMLHttpRequest对象的方法：
//写一个获取XHR的方法
function getXMLHttpRequest(){
try{
//大部分浏览器都支持的方式
return new XMLHttpRequest();
}catch(e){
try{
//IE6以下浏览器支持的方式
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5以下的浏览器
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("你是火星来的吧！你的浏览器不支持AJAX！");
}
}
}
}第二步：设置请求信息（请求地址，请求方式，请求参数）
xhr.open(请求方式,请求地址);
在发送post请求时，还需要设置一个请求头，如下：
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");第三步：发送请求
xhr.send(请求体);
get请求没有请求体，所以send中可以传null或什么都不传。
post请求需要通过send来设置请求参数。
第四步：接收响应信息
//xhr绑定一个onreadystatechange响应函数，这个函数会在readyState属性发生改变时调用
xhr.onreadystatechange = function(){
//判断当前readyState是否为4 ， 且响应状态码为200
if(xhr.readyState==4 && xhr.status==200){
//读取响应信息，做相关操作。
//如果信息为纯文本
var text=xhr.responseText;
//如果信息为XML
var xml=xhr.responseXML;
}
};第五步：响应数据的格式
响应的格式有三种：txt、xml、json.
前端请求处理与后端请求处理
前端请求处理：就是在第二步设置请求信息时，请求地址为一个xml格式的文件或json格式的文件地址。
后端请求处理：设置请求信息时，请求地址为一个servlet的地址，在后台处理数据。
前端请求示例：
后端请求示例：
<title>省市联动效果</title>
<script type="text/javascript">
/**
* 1.在文档加载完毕时发送请求，得到所有省份名称显示在province中
2.在选择了新的省份时，发送请求，得到XML文档
3.解析xml文档，得到其中所有的<city>，在得到每个<city>元素的内容，即市名，使用市名生成<option>，插入到<select>中
*/
function createXmlHttpRequest(){
try{
return new XMLHttpRequest();//大多数浏览器
}catch(e){
try{
return ActvieXObject("Msxml2.XmlHTTP");//IE6.0
}catch(e){
return ActvieXObject("Microsoft.XMLHTTP");//IE5.0
}
}
}
window.onload=function(){
/**
ajax四步，请求ProvinceServlet，得到所有省份名称
使用每个省份名称创建一个<option>元素，添加到<select name=province>中
*/
var xmlHttp=createXmlHttpRequest();
xmlHttp.open("GET","/shengshiliandong/ProvinceServlet",true);
//3.发送请求
xmlHttp.send(null);//get没有请求体，但也要给出null，不然Firefox可能会不能发送
//4.给异步对象的onreadystatechange事件注册监听器
xmlHttp.onreadystatechange=function(){
//双重判断：服务器响应结束和响应成功
if(xmlHttp.readyState==4 && xmlHttp.status==200){
//获取服务器的响应结束
var text=xmlHttp.responseText;
//使用，分割他，得到数组
var arr=text.split(",");
//循环遍历每个省份名称，
for( var i=0;i<arr.length;i++){
var op=document.createElement("option");//创建一个指定名称元素
op.value=arr[i];
var textNode=document.createTextNode(arr[i]);//创建文本节点
op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值
document.getElementById("p").appendChild(op);
}
}
}
}
</script>
</head>
<body>
<h2 align="center">演示省市联动</h2>
<select name="province" id="p">
<option>===请选择省===</option>
</select>
<select name="city">
<option>===请选择市===</option>
</select>
</body>后端处理代码：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
/**
* 响应所有省的名称
*/
//1.Document对象
//创建解析器对象
//调用解析器的读方法，传递一个流对象，得到Document
try {
SAXReader reader=new SAXReader();
InputStream input=this.getClass().getResourceAsStream("/china.xml");
Document doc=reader.read(input);
/**
* 查询所有province的name属性，得到一堆的属性对象
* 循环遍历，把所有的属性连接成一个字符串，发送给客户端
*/
List<Attribute> arrList = doc.selectNodes("//province/@name");
StringBuilder sb=new StringBuilder();
for(int i=0;i<arrList.size();i++){
sb.append(arrList.get(i).getValue());//把每个属性的值存放到sb中
if(i<arrList.size()-1){
sb.append(",");
}
}
response.getWriter().print(sb);
} catch (DocumentException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}通过jQuery实现AJAX
[1] post()方法
$.post(url, [data], [callback], [type])
参数：
url：发送AJAX的请求地址，字符串。
data：发送给服务器的请求参数，JSON格式。
callback：当前需要获取服务器发送的响应时，我们可以通过该回调函数。
jQuery会将响应信息以回调函数的参数的形式返回
type：响应信息的类型，字符串。一般两个常用值text、json
[2] get()方法
- get方法和post方法使用方式基本一致。
[3] getJSON()方法
getJSON(url, [data], [callback])
getJSON方法和get方法类似，只不过该方法默认的响应类型为JSON，不需要再手动指定。
注意：
使用get和getJSON都会有缓存问题，并且使用get方法不能传送较多的数据。
post方法不会有缓存的问题，所以我们开发时使用post方法较多。
不要忘记导jquery文件。
示例代码:
<script src="/AJAXTest/js/jquery.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
var url="${pageContext.request.contextPath}/AServlet";
var json={"username":"zhangsan","age":20};
function callback(data){
/* var div1=document.getElementById("div1");
div1.innerHTML+=data; */
/* $("#div1").html(data); */
var a=data.split(",");
$("#username").val(a[0]);
$("#password").val(a[1]);
}
$.get(url,json,callback);
});
});
</script>