Ajax
什么是Ajax
AJAX全称为“Asynchronous JavaScript and XML"(异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，AJAX提供与服务器异步通讯的能力，从而使用户从请求/响应的循环中解脱出来。
ajax的优势
1.通过异步模式，提升了用户体验。
2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
3.AJAX引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了服务器负载。
ajax的局限性
1.不能实时请求和响应服务器数据。
2.不支持浏览器回退功能。
3.不能提交多媒体数据，比如图片，文件等。
工作流程
1.客户端产生js的事件
2.创建XMLHttpRequest对象
3.对XMLHttpRequest进行配置
4.通过AJAX引擎发送异步请求
5.服务器端接收请求并且处理请求，返回html或者xml内容
6.XML调用一个callback()处理响应回来的内容
7.页面局部刷新
实现步骤
1.声明verify()函数和xmlhttp全局变量
2.创建XML对象
3.注册回调对象
xmlhttp.onreadystatechange = callback;
4.设置服务器连接信息
xmlhttp.open("GET","verifyUser.action?name="+encodeURI(username),true);
5.发送数据
6.接收响应数据即callback函数
附源码
ajaxml.jsp
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>Insert title here</title> 8 <script> 9 function loadXMLDoc(url) 10 { 11 var xmlhttp; 12 var txt,x,xx,i; 13 if (window.XMLHttpRequest) 14 {// code for IE7+, Firefox, Chrome, Opera, Safari 15 xmlhttp=new XMLHttpRequest(); 16 } 17 else 18 {// code for IE6, IE5 19 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 xmlhttp.onreadystatechange=function() 22 { 23 if (xmlhttp.readyState==4 && xmlhttp.status==200) 24 { 25 txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>"; 26 x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD"); 27 for (i=0;i<x.length;i++) 28 { 29 txt=txt + "<tr>"; 30 xx=x[i].getElementsByTagName("TITLE"); 31 { 32 try 33 { 34 txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; 35 } 36 catch (er) 37 { 38 txt=txt + "<td> </td>"; 39 } 40 } 41 xx=x[i].getElementsByTagName("ARTIST"); 42 { 43 try 44 { 45 txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; 46 } 47 catch (er) 48 { 49 txt=txt + "<td> </td>"; 50 } 51 } 52 txt=txt + "</tr>"; 53 } 54 txt=txt + "</table>"; 55 document.getElementById('txtCDInfo').innerHTML=txt; 56 } 57 } 58 xmlhttp.open("GET",url,true); 59 xmlhttp.send(); 60 } 61 </script> 62 </head> 63 <body> 64 <div id="txtCDInfo"> 65 <button onclick="loadXMLDoc('cd.xml')">Get CD info</button> 66 </div> 67 </body> 68 </html>
Servlet
package com.hp.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class VerifyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse resbonse) throws ServletException, IOException { doGet(request, resbonse); } protected void doGet(HttpServletRequest request, HttpServletResponse resbonse) throws ServletException, IOException { try { request.setCharacterEncoding("utf-8"); resbonse.setContentType("text/html; charset=utf-8"); PrintWriter out = resbonse.getWriter(); String old = request.getParameter("name"); if (old == null || old.length() == 0) { out.println("用户名不能为空！"); } else { String name = old; if (name.equals("zhangsan")) { out.println("用户名[" + name + "]已经存在！"); } else { out.println("用户名[" + name + "]尚未存在，可以使用！"); } } } catch (Exception e) { e.printStackTrace(); } } }
引用博客
http://blog.163.com/xiaopengyan_109/blog/static/14983217320108165441831/
http://blog.sina.com.cn/s/blog_5b6cb9500100z7y8.html