AJAX 简介
AJAX是一个浏览器与服务器之间异步的通信机制,可以在不刷新整个页面的情况下,与服务器进行通信。AJAX不是一个全新的语言,而是一种异步的编程模式。
不用刷新整个页面便可与服务器通讯的办法有
- Flash/ActionScript
- 框架Frameset
- iFrame(内嵌入框架)
- XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)
所有浏览器中都内置了异步对象,在默认情况下,该异步对象并没有创建出来。
function createAJAX(){
var ajax = null;
try{
// ie浏览器
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
// 非IE
ajax = new XMLHttpRequest();
}
return ajax;
}
AJAX工作原理
AJAX使用Http协议与服务器进行通信,首先将需要请求的数据传送给AJAX对象,AJAX对象封装成HTTP请求发送给服务器,服务器接收到Http请求后,将数据写入到输出流中。
例如:
jsp代码
<title>My JSP 'showTime.jsp' starting page</title>
<script type="text/javascript">
function creatAJAX(){
var ajax = null;
try{
// 创建异步对象
ajax = new XMLHttpRequest();
}catch(e1){
alert("浏览器中不支持异步对象,请换浏览器");
}
return ajax;
}
</script>
</head>
<body>
当前时间:<span id="time"></span><br/>
<input id="buttonID" type="button" value="获取当前时间"/><p/>
<script type="text/javascript">
document.getElementById("buttonID").onclick = function(){
// 1.创建异步对象
var ajax = creatAJAX();
// 2.准备发送请求
var method = "GET";
var url="${pageContext.request.contextPath}/CurrentTimeServlet";
ajax.open(method,url);
// 发送请求体中数据,如果请求体中无数据的话,就用null表示
ajax.send(null);
//NO4)AJAX异步对象不断监听服务器响应的状态0-1-2-3-【4】
//一定要状态变化后,才可触发function(){}函数
ajax.onreadystatechange = function(){
//如果状态码为4的话
if(ajax.readyState==4){
// 如果响应码为200
if(ajax.status==200){
// 从AJAX异步对象中获取服务器响应的HTML数据
var nowStr = ajax.responseText;
var spanNode = document.getElementById("time");
spanNode.innerHTML=nowStr;
}
}
};
};
</script>
</body>
Servlet代码
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("GET");
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String str = sdf.format(new Date());
resp.setContentType("text/html;charset=UTF-8");
PrintWriter writer = resp.getWriter();
writer.write(str);
writer.flush();
writer.close();
}
AJAX开发步骤
- 创建AJAX对象
- 准备发送异步请求,例如:
ajax.open(method,url)
- 如果是POST请求的话,一定要设置AJAX请求头,例如:
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
如果是GET请求的话,无需设置设置AJAX请求头。 - 真正发送请求体中的数据到服务器,例如:
ajax.send()
- AJAX不断的监听服务端响应的状态变化,例如:
ajax.onreadystatechange
,后面写一个无名处理函数 - 在无名处理函数中,获取AJAX的数据后进行相应处理操作。
注意:AJAX不适合用来传输大量数据,适合传递小数据。服务器只能以流的方式相应AJAX的请求,相应流数据可以是HTML或XML或JSON载体响应。
示例:post提交省市二级联动Demo
JSP文件
<title>省市联动框</title>
<script type="text/javascript">
function creatAJAX(){
var ajax = null;
try{
ajax = new XMLHttpRequest();
}catch(e){
alert("浏览器不支持ajax");
}
return ajax;
}
</script>
</head>
<body>
XML方式,以POST方式,完成省市二级联动框<br/>
<select id='provinceID' style="width:111px">
<option>选择省份</option>
<option>陕西</option>
<option>广州</option>
</select>
<select id="cityID">
<option>选择城市</option>
</select>
<script type="text/javascript">
// 定位省份选择框
document.getElementById("provinceID").onchange=function (){
//清空城市下拉框中的内容,除第一项外
var cityElement = document.getElementById("cityID");
cityElement.options.length=1;
// 定位当前选取省份的索引,从0开始
var index = this.selectedIndex;
if(index==0){
return;
}
// 定位选中的option标签
var optionEle = this[index];
// 获取选中的option中内容
var province = optionEle.innerHTML;
// NO1:创建ajax
var ajax = creatAJAX();
// NO2:
var method = "POST";
var url = "${pageContext.request.contextPath}/ProvinceServlet";
ajax.open(method,url);
//NO3:设置请求头
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// NO4:设置发送数据
var content = "province="+province;
ajax.send(content);
//--------------------处理相应数据-----------------
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
var xmlDocument=ajax.responseXML;
// 解析XML文档
var cityList = xmlDocument.getElementsByTagName("city");
var size = cityList.length;
for(var i=0;i<size;i++){
// innerHTML只能用在html/jsp中,不能用在xml中
var city = cityList[i].firstChild.nodeValue;
var optionElement = document.createElement("option");
optionElement.innerHTML = city;
cityElement.appendChild(optionElement);
}
}
}
}
}
</script>
</body>
servlet 代码
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String province = request.getParameter("province");
// 通知AJAX服务器相应数据为XML格式
response.setContentType("text/xml;charset=utf-8");
// 获取字符输出流
PrintWriter writer = response.getWriter();
writer.write("<?xml version='1.0' encoding='UTF-8'?>");
writer.write("<root>");
if("陕西".equals(province)){
writer.write("<city>西安</city>");
writer.write("<city>渭南</city>");
writer.write("<city>汉中</city>");
writer.write("<city>延安</city>");
}else if("广州".equals(province)){
writer.write("<city>广州</city>");
writer.write("<city>深圳</city>");
writer.write("<city>佛山</city>");
}
writer.write("</root>");
writer.flush();
writer.close();
}