本文主要从Ajax的产生背景讲起,分享什么是ajax?我们为什么要用ajax?ajax适用于什么场合?以及我们如何来使用ajax。本文通过ajax的两个常见案例来讲解ajax的编码步骤,学习目的要求熟练掌握ajax的5个开发步骤。学习的前提要求已经掌握了html,css,js,xml,jsp,servlet的基本知识。
传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
AJAX只管向服务器发送请求,同时只管接收服务器的HTML或XML或JSON载体响应
服务端不能使用转发或重定向到web页面,因为这样会起浏览器全面刷新
即只能以流的方式响应给浏览器。
1、数据验证:在文本框等输入表单中给予输入提示,或者自动完成,可以有效的改善用户体验,尤其是那些自动完成的数据可能来自于服务器端的场合,Ajax是很好的选择。
2、按需取数据:
我们以前的对级联菜单的处理多数是这样的:
为了避免每次对菜单的操作引起的重载页面,不采用每次调用后台的方式,而是一次性将级联菜单的所有数据全部读取出来并写入数组,然后根据用户的操作用 JavaScript来控制它的子集项目的呈现,这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题,但是如果用户不对菜单进行 操作或只对菜单中的一部分进行操作的话,那读取的数据中的一部分就会成为冗余数据而浪费用户的资源,特别是在菜单结构复杂、数据量大的情况下(比如菜单有 很多级、每一级菜又有上百个项目),这种弊端就更为突出。如果在此案中应用Ajax后,结果就会有所改观:
在初始化页面时我们只读出它的第一级的所有数据并显示,在用户操作一级菜单其中一项时,会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据,如 果再继续请求已经呈现的二级菜单中的一项时,再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据,以此类推……这样,用什么就取什么、用多少就取 多少,就不会有数据的冗余和浪费,减少了数据下载总量,而且更新页面时不用重载全部内容,只更新需要更新的那部分即可,相对于后台处理并重载的方式缩短了 用户等待时间,也把对资源的浪费降到最低。
<form >
用户名:<input id="usernameID" type="text" name="username" maxlength="10" /> <span id="resID"></span>
</form>
因为有的浏览器可能会不支持ajax,所以我们需要来判断一个浏览器是否兼容。这里也就是先创建一个ajax对象。
function createAJAX(){
var ajax=null;
try{
ajax=new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax=new XMLHttpRequest();
}catch(e2){
alert("您的浏览器不支持ajax,请更换浏览器试试!");
}
}
return ajax;
}
然后就是按照前面分享的编码步骤进行:
//定位文本框,同时提供焦点事件
document.getElementById("usernameID").onblur=function(){
//获取文本框中输入的值
var username=this.value.trim();
//如果内容为空
if(username.length==0){
document.getElementById("resID").innerHTML="用户名不能为空";
}else{
//对网址中的汉字进行utf-8编码
username=encodeURI(username);
var ajax=createAJAX();
var method="GET";
var url="${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime()+"&username="+username;
ajax.open(method,url);
ajax.send(null);
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){
var tip=ajax.responseText;
document.getElementById("resID").innerHTML=tip;
}
}
}
}
}
这里我们需要用到servlet来做服务器的接收和验证操作。这里是通过get方法来实现的。
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username=request.getParameter("username");
byte[] buf = username.getBytes("ISO-8859-1");
username = new String(buf,"UTF-8");
//System.out.println(username);
String tip="<font color='green'>可注册</font>";
if("朱培".equals(username)){
tip="<font color='red'>该用户已存在</font>";
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw=response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
运行Tomcat服务器。通过地址进行访问。
效果如下:当鼠标移开的时候,如果库中有则会提示用户已存在。
若用户不存在,则可以进行注册。
//定位文本框,同时提供焦点事件
document.getElementById("usernameID").onblur=function(){
//获取文本框中输入的值
var username=this.value.trim();
//如果内容为空
if(username.length==0){
document.getElementById("resID").innerHTML="用户名不能为空";
}else{
var ajax=createAJAX();
var method="POST";
var url="${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime();
ajax.open(method,url);
//设置ajax请求头为post,它会将请求的汉字自动进行utf-8的编码
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
var content="username="+username;
ajax.send(content);
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){
var tip=ajax.responseText;
var imgElement = document.createElement("img");
//设置img标签的src/width/height的属性值
imgElement.src = tip;
imgElement.style.width = "15px";
imgElement.style.height = "15px";
//定位span标签
var spanElement = document.getElementById("resID");
//清空span标签中的内容
spanElement.innerHTML = "";
//将img标签加入到span标签中
spanElement.appendChild(imgElement);
}
}
}
}else{ var spanElement = document.getElementById("resID");
spanElement.innerHTML = "";
}
}
这段代码的第6布就是将从服务器中读取到的图片进行解析并且显示到span中,也就是我们前面设置的那个html页面。
对于selvet,使用post方法:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username=request.getParameter("username");
String tip="images/b.jpg";
if("朱培".equals(username)){
tip="images/a.jpg";
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw=response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
效果如下:
<select id="provinceID" style="width:120px">
<option>选择省份</option>
<option>湖南省</option>
<option>广东省</option>
</select>
<select id="cityID">
<option>选择城市</option>
</select>
还需要我们把之前写的那个createAJAX()引入进来。
<script type="text/javascript" src="js/ajax.js"></script>
然后就继续在这个script脚本中进行编写了。
//定位省份下拉框,同时添加内容改变事件
document.getElementById("provinceID").onchange=function(){
//清空
var cityElement=document.getElementById("cityID");
cityElement.options.length=1; //只保留第一个
//获取选中省份的名字
var index=this.selectedIndex;
var optionElement=this[index];
//获取选中的option标签中的内容
var province=optionElement.innerHTML;
if("选择省份"!=province){
var ajax=createAJAX();
var method="POST";
var url="${pageContext.request.contextPath}/servlet/Province?time="+new Date().getTime();
ajax.open(method,url);
//设置ajax请求头为post,它会将请求体重的汉子自动进行utf-8的编码
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
var content="province="+province;
ajax.send(content);
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){
var xmlDocument=ajax.responseXML;
//按照dom去解析xml文档
var cityElementArray=xmlDocument.getElementsByTagName("city");
var size=cityElementArray.length;
for(var i=0;i<size;i++){
//innerHTML只能在html/jsp中使用,不能再xml中使用
var city=cityElementArray[i].firstChild.nodeValue;
var optionElement=document.createElement("option");
optionElement.innerHTML=city;
cityElement.appendChild(optionElement);
}
}
}
}
}
}
对于服务端,采用的是post方法:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String province=request.getParameter("province");
//xml格式的数据
response.setContentType("text/xml;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write("<?xml version='1.0' encoding='UTF-8' ?>");
pw.write("<root>");
if("广东省".equals(province)){
pw.write("<city>广州</city>");
pw.write("<city>深圳</city>");
pw.write("<city>佛山</city>");
}else if("湖南省".equals(province)){
pw.write("<city>长沙</city>");
pw.write("<city>衡阳</city>");
pw.write("<city>永州</city>");
pw.write("<city>株洲</city>");
}
pw.write("</root>");
pw.flush();
pw.close();
}
效果如下:
这里是会无刷新操作,可以给用户发出好的交互体验。