这几天一直在看书,大致了解了AJAX技术,在这里做一个小小的总结。
首先要明白:什么是AJAX?
通过查阅维基百科我们可以看到这样一段话:AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。
那么,现在我们可以对它有一个大致的了解,AJAX=JavaScript+XML。而js和xml我们应该都不陌生
其次,AJAX有什么用?
现在回顾我们的开发旅程,在原来开发Servlet+JSP+JavaBean的过程中,我们的Web应用允许用户在网页端填写并提交表单(form),而发出表单时就向网页服务器发送了一个请求(Request)。服务器接收该请求并处理传来的表单,然后送回一个新的网页,随后展示在浏览器上,这样就完成了一次用户与服务器的交互。这种情况有一些很大的问题。
这种方法浪费了许多带宽。现在看这样一个例子:浏览器端展示了用户登陆界面,当用户输入用户名、密码及验证码后,数据被发送到了服务器,假定我们在Servlet中处理请求后发现用户名及密码不匹配,我们接下来做了什么?
我们重新将页面连同错误信息发送给了浏览器端!而在前后两个页面中的大部分HTML代码除了错误信息全都是相同的。
这种方法用户体验太差。假设用户不小心输入了错误的用户名,就会出现在等待半天后页面被刷新并提示用户名错误,这样用户又得重新输入一遍。在用户的网速比较慢的情况下,这种模式的用户体验就更差了。
那么有没有什么方法可以解决这种问题呢?
在XMLHttpRequest对象出现之前是没有办法的,但是在它出现之后,前辈们就想到了一种比较好的解决方法,即:使用XMLHttpRequest对象作为Agent来将请求发送给服务器,并用它来接收服务器返回的数据,这样就可以不跳转页面完成数据的交互,而且只需要传输少量必要数据,因此对网速的要求也变低了。
那么剩下的两个问题就是:
1.如何根据服务器端返回的数据动态更改页面,以达到与用户交互的作用?
2.如何规定服务器发送回来的数据格式,使它更通用,并且传输量尽可能的少呢?
对于1:前辈们选择了使用JavaScript,个人理解这样做的原因有两个,第一,JavaScript足够流行,几乎所有的主流浏览器都对JavaScript提供了支持;第二,JavaScript可以通过DOM编程的方式来动态的改变网页的内容。
对于2:前辈们选择了XML,我想可能是因为它语法足够严格、语义明确而且更加通用吧。但是我认为传输的数据格式对使用AJAX并没有影响。例如,我们可以选择传输Json来使传输的数据更加少,甚至可以选择传输一段有意义的字符串,只要服务器端与浏览器端开发者对格式进行了约定即可。
现在,我们就可以定义AJAX了:AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
那么,我们就知道了要解决传统的资源浪费问题的思路,现在就来看一下,如何来实现吧!
关于AJAX的实现,可以去查看W3School关于AJAX的介绍
下面是我简单总结的AJAX实现步骤:
1. 我们需要一个XMLHttpRequest对象。(我们都知道IE低版本浏览器的标准很坑爹,很多都与主流标准不兼容。很不幸,对于XMLHttpRequest对象也是一样的….)
因此,一个XMLHttpRequest对象的获取过程是这样的:
var httpXml = null; if(window.XMLHttpRequest){ httpXml = new XMLHttpRequest(); //针对现代浏览器,IE7及以上版本 }else if(window.ActiveXObject){ httpXml = new ActiveXObject("Microsoft.XMLHTTP"); //针对IE5,IE6版本 }
2.我们需要为这个XMLHttpRequest对象注册它要进行的操作(通过回调),并根据返回的请求状态与HTTP状态码来查看消息的状态,并确定在何种情况下我们要进行何种操作。
这个过程是这样的:
//为XMLHttpRequest对象的onreadystatechange属性注册 httpXml.onreadystatechange=function(){ // 在回调函数中根据请求状态与返回的HTTP状态码来选择相应的操作处理数据 if(httpXml.readyState==4&&httpXml.status==200){ alert(httpXml.responseText); } };
3.我们需要进行请求发送的参数设置。
这个过程是这样的:
//函数原型:open(method,url,async,username,password) //method --->请求方式:GET,POST或HEAD //url --->请求的地址 GET提交方式可以在后面加上参数 //async --->请求是否异步执行,true---异步,false---同步 默认为true //username,password --->可选,为url所需的授权提供认证资格。如果不为空,会覆盖掉url中指定的资格 httpXml.open("GET","http://localhost:8080/aaa/MyServlet",true);
4.要真正的发送请求啦!
// 参数为请求参数,POST提交内容格式为--->"username=taffy&password=666",GET为----->空 // 注意:若为POST请求方式,还需设置一个http请求头(应该位于open之后,send之前) // 即 setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); 标志form表单的enctype属性 httpXml.send(null);
这样,一个简单的AJAX过程就完成了。
一些没有用到的小知识点:
//XMLHttpRequest属性 responseText 得到返回的文本信息 responseXML 得到返回的XML信息 //XMLHttpRequest的方法 getResponseHeader() 得到指定头部信息 getAllResponseHeaders() 将 HTTP响应头部作为未解析的字符串返回 //XMLHttpRequest的控制方法 abort() 取消当前响应,关闭连接,将readyState置0
下面是我做的一个完整的Demo:
register.html
MyServlet.java
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class MyServlet */ @WebServlet("/MyServlet") public class MyServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public MyServlet() { super(); } @override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); String username = request.getParameter("user"); if (username!=null&&!username.equals("")) { if (username.equals("admin")) { out.write("true"); }else { out.write("false"); } }else { out.write("false"); } out.close(); } @override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
下面对AJAX的优缺点进行一下总结:
优点:
能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。
缺点:
1.它可能破坏浏览器的后退功能。在动态更新页面的情况下,用户无法回到前一个页面状态,这是因为浏览器仅能记下历史记录中的静态页面;
2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。