Posted on 2009-11-01 12:31
笑看人生 閱讀(331)
評(píng)論(0) 編輯 收藏 所屬分類:
Web開(kāi)發(fā)技術(shù)
簡(jiǎn)單介紹一下Ajax應(yīng)用程序的基本流程：
- 創(chuàng)建XMLHttpRequest對(duì)象；
- 從頁(yè)面中獲取獲取需要的數(shù)據(jù)；
- 建立要連接的URL；
- 打開(kāi)與服務(wù)器的連接；
- 設(shè)置服務(wù)器相應(yīng)之后要調(diào)用的函數(shù)，即回調(diào)函數(shù)；
- 發(fā)送請(qǐng)求；
下面以一個(gè)簡(jiǎn)單的例子來(lái)演示一下，該例子要完成的功能是使用Ajax技術(shù)對(duì)輸入的EMail地址進(jìn)行簡(jiǎn)單校驗(yàn)，根據(jù)校驗(yàn)的結(jié)果，在頁(yè)面顯示相應(yīng)的消息。
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script language="javascript">
var xmlHttp;
function sendreq(){
xmlHttp = createXMLHttpRequest(); //步驟1
var url = "AjaxServlet?email=" + document.getElementById("email").value;//步驟2，3
xmlHttp.open("GET", url); //步驟4
xmlHttp.onreadystatechange = handleStateChange; //步驟5
xmlHttp.send(null); //步驟6
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
document.getElementById("result").innerHTML=xmlHttp.responseText;
}
}
}
function createXMLHttpRequest(){
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
</script>
<body>
<label id="result"> </label><br>
Email:<input type="text" id="email" onblur="sendreq()" value="" />
<label id="result"> </label>
</body>
</html>
AjaxServlet.java
package 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 AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 7032718233562299325L;
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse response)
throws ServletException, IOException {
processRequest(req, response, "POST");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse response)
throws ServletException, IOException {
processRequest(req, response, "GET");
}
private void processRequest(HttpServletRequest req,
HttpServletResponse response, String method) throws IOException {
String email = req.getParameter("email");
StringBuffer validator = new StringBuffer("");
validator.append(method);
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
if (email.indexOf("@") < 0) {
validator.append(":FAILURE!");
}else{
validator.append(":SUCCESS!");
}
writer.write(validator.toString());
writer.close();
}
}
GET和POST請(qǐng)求方式區(qū)別：
- POST方法將參數(shù)串放在請(qǐng)求體中發(fā)送；
- GET方法將參數(shù)串放在URL中發(fā)送；
如果數(shù)據(jù)處理不改變數(shù)據(jù)模型的狀態(tài)，建議使用GET方式，如果需要改變數(shù)據(jù)模型的狀態(tài)，建議使用POST方式；
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>ajax</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/AjaxServlet</url-pattern>
</servlet-mapping>
</web-app>