Ajax (asynchronous javascript and xml)
在没有ajax的时候,页面每次提交数据都必须销毁当前的页面,重新从服务器端获得一个页面。这样做不仅影响用户体验,而且会导致流量的浪费(都是钱啊)。为了避免这种情况,google在2005年通过其Goggle Suggest使AJAX变得流行起来。
(1)ajax的定义
在小天看来,ajax的本质就是利用浏览器提供的一个特殊的对象:XMLHttpRequest对象,也可以称为AJAX对象,向服务器发送异步请求。服务器返回部分数据(通常不需要返回完整页面),这样的话,用户的操作就不会被打断,也就避免了多余流量的浪费。
(2)获取ajax对象
首先,既然要利用XMLHttpRequest对象,当然要获取这个对象。但是,由于IE的一些黑历史,仗着自己当年的市场占有率高,就是莽 rua!它的ajax对象叫ActiveXObject。要区分浏览器来获取这个对象。但是jquery等js框架已经将这一步集成了。现在很难想象有人写js会不用jquery。所以这里只是大致了解一下就好了。辣鸡IE。壮哉我大chrome。
function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; }
很难想象当年的IE有多大的勇气才敢逆时代前进。这样不兼容的例子真的很多很多,导致开发者都想放弃IE,更不用说用户了。
弱小和无知不是生存的障碍,傲慢才是。
(3)ajax对象的几个重要的属性
a.onreadystatechange:用来绑定一个事件处理函数,用来处理readystatechange事件。
注:当ajax对象的readyState属性值发生了任何改变(比如从0变成了1),就会产生readystatechange事件
b.readyState:有五个值(0,1,2,3,4),表示ajax对象与服务器通信的状态。其中,当值为4时,表示AJAX对象已经获得了服务器返回的所有数据。
哈哈,小天觉得,记住4就够啦。其他的不太懂。
c.responseText:获得服务器返回的文本数据。
d.responseXML:获得服务器返回的XML数据。
e.status:获得状态码。(比如说200表示成功,404啥的。。500啥的。。不想碰到啊 又想到了被抢课支配的恐惧)
(4)编程步骤
step1.获得ajax对象。(参见(2))
step2.发送请求。
有两种请求get或者post请求,其中区别优劣小天就不赘述了。
情形一 发送get请求
a.调用ajax对象的open方法
xhr.open(请求类型,请求地址,同步/异步(true表示异步));
ps: ajax也可以发送同步请求,通俗的说,就是浏览器会锁定这个页面,用户感觉不到这个页面的刷新,但是在服务器做出响应之前,根本不可以对页面做出任何的操作。现在已经很少用ajax做同步处理了。拿一个异步的东西做同步,那不是傻吗。( ▼-▼ )。
eg:
xhr.open(‘get‘,‘check_uname.do?name=tom‘,true);
b.绑定事件处理函数
xhr.onreadystatechange=函数名;
eg:
xhr.onreadystatechange=f1;
c.发送请求
xhr.send(null);
情形二 发送post请求
a.xhr.open(‘post‘,‘请求地址‘,true);
b.xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
c.xhr.onreadystatechange=函数名;
d.xhr.send(‘name=tom‘);
注:b步骤 按照http协议规范,如果发送的是post请求,在请求数据包里面,应该有content-type消息头。默认情况下,ajax对象不带消息头,所以需要调setRequestHeader方法来设置这个消息头。
step3.编写服务器端的程序
serlvet的话 就是通过PrintWriter来返回文本数据就可以了。也可以使用json
至于SpringMVC和ajax的结合,会单开一篇随笔。
step4.编写事件处理函数
function f1(){ //先获得服务器返回的数据 if(xhr.status == 200 && xhr.readyState == 4){ var txt = xhr.responseText; //利用这些数据(txt)更新页面 ... } }
(5)实战:注册页面(get请求)
这个算是非常经典的AJAX的案例了。
需求就是:当用户输入用户名之后,判断用户名是否为Sally,如果是,那么文本框之后出现提示用户名已存在,如果不是Sally提示可以使用。
在写的时候,小天发现自己的jquery和javascript已经忘得差不多了( ╯□╰ ),不过还是勉强完成了。之后看来需要复习一下了。这个小案例没有使用jquery,但是对javascript一些很复杂的语法进行了封装。
//js工具类 function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; } //有种自己编写了jquery的感觉( ▼-▼ ) function $(id){ return document.getElementById(id); } function $F(id){ return $(id).value; } //jsp页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>regist</title> <script type="text/javascript" src="js/ajax.js"> </script> <script type="text/javascript"> function check(){ var xhr = getXhr(); xhr.open(‘get‘,‘check.do?uname=‘+ $F(‘uname‘),true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ //获得服务器返回的数据 var txt = xhr.responseText; $(‘uname_msg‘).innerHTML = txt; } }; xhr.send(null); } </script> </head> <body style="font-size:30px;"> <form action="" method="get"> <fieldset> <legend>注册</legend> 用户名:<input id="uname" type="text" name="uname" onblur="check();" /> <span id= "uname_msg"></span><br/> 密码:<input type="password" name="pwd"/><br/> <input type="submit" value="注册"/> </fieldset> </form> </body> </html> //servlet页面 public class ActionServlet extends HttpServlet{ public void service( HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException{ System.out.println("service()"); //获得请求资源路径 // http://ip:port/ajax-day01/check.do String action = request.getServletPath(); //设置编码类型。 response.setContentType( "text/html;charset=utf-8"); PrintWriter out = response.getWriter(); //依据分析的结果,进行不同的处理 if("/check.do".equals(action)){ String uname = request.getParameter( "uname"); System.out.println("uname:" + uname); if("Sally".equals(uname)){ out.println("帐号已经存在(╯-_-)╯╧╧"); }else{ out.println("可以使用( ?? ω ?? )y"); } }else if("/getLuck".equals(action)){ Random r = new Random(); int number = r.nextInt(8888); System.out.println("number:" + number); out.println(number); } } }
注:这里没有把web.xml贴出来 很简单的配置,就不在此赘述了。