AJAX
AJAX ：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。在不重新加载整个页面的情况下，AJAX 是与服务器交换数据并更新部分网页的艺术。
实现AJAX的5个步骤：
步骤1：在浏览器中实例化对象。
1.1IE浏览器中实例化Msxml2.XMLHTTP对象
var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
1.2其他浏览器
var xmlHttp=new XMLHttpRequest();
解决不同浏览器显示问题的程序框架：
<script >
var xmlHttp=false;
function showInfo(){
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{ // Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
}
</script>
步骤2：指定异步提交的目标和提交方式，掉用了xmlHttp的open方法
xmlHttp.open("GET","info.jsp",true);
这里一共三个参数，第一个参数为请求方式，一般为POST或者GET两种选择;第二个参数是请求的目标，也可以在此处给目标一些参数；第三个参数表示异步请求，true为是，false为否。
步骤3：指定当xmlHttp状态改变时，需要进行的处理。
xmlHttp.onreadystatechange=function(){
//要处理的代码
}
步骤4：编写具体处理代码。
xmlHttp.onreadystatechange=function(){
//要处理的代码
if(xmlHttp.readyState==4){
infoDiv.innerHTML=xmlHttp.responseText;
}
}
步骤5：发送请求，调用xmlHttp的send函数。
xmlHttp.send();
AJAX简单案例
以登录界面为例，首先编写登录界面login.jsp。如果登录成功（这里简化为账号密码相等就登录成功）跳转loginSuccess.jsp，如果登录失败则登录loginFail.jsp。判断登录信息正确与否使用的servlet。
login.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<html>
<body>
<script type="text/javascript">
function showInfo()
{
var xmlHttp;
var account=document.loginForm.account.value;
var password=document.loginForm.password.value;
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{ // Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
var url="logincheck?account="+account+"&password="+password;
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
resultDiv.innerHTML=xmlHttp.responseText;
} else{
resultDiv.innerHTML+="正在登录ing......."
}
}
xmlHttp.send();
}
</script>
<div id="resultDiv" ></div>
<form name="loginForm">
<input type="text" name="account"><br>
<input type="password" name="password"><br>
<input type="button" value="登录" onClick="showInfo( )">
<!—如果时submit按钮，需要在事件调用函数后面加;return false-->
</form>
</body>
</html>
loginSuccess.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<html>
<body>
欢迎${account}登录成功<br>
您可以选择以下功能：<br>
<a href="">查询信息</a>
<a href="">修改信息</a>
<a href="">删除信息</a>
<a href="">退出</a>
</body>
</html>
loginFail.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<html>
</head>
<body>
对不起！登录失败<br>
请您检查是否：<br>
用户名写错，密码写错。
</body>
</html>
servlet: com/tianshi/servlets/LoginCheck.java
LoginCheck.java
package com.tianshi.servlets;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.catalina.Session;
/**
* Servlet implementation class LoginCheck
*/
@WebServlet(name = "LoginCheck",urlPatterns = "/logincheck")
public class LoginCheck extends HttpServlet {
private static final long serialVersionUID = 1L;
private HttpSession session;
/**
* @see HttpServlet#HttpServlet()
*/
public LoginCheck() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//解决乱码问题
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String account=request.getParameter("account");
String password=request.getParameter("password");
String loginState="Fail";
String targetUrl="/loginfail.jsp";
System.out.print(account+","+loginState+targetUrl);
if(account.equals(password)) {
loginState="Success";
targetUrl="/loginsuccess.jsp";
HttpSession session=request.getSession();
session.setAttribute("account", account);
}
request.setAttribute("loginState", loginState);
ServletContext application=this.getServletContext();
RequestDispatcher rd=application.getRequestDispatcher(targetUrl);
System.out.print(account+","+loginState+targetUrl);
rd.forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
