posts - 36, comments - 30, trackbacks - 0, articles - 3

Ajax学习一

Posted on 2009-11-01 12:31 笑看人生 阅读(317) 评论(0)  编辑  收藏 所属分类: Web开发技术
简单介绍一下Ajax应用程序的基本流程:

  1. 创建XMLHttpRequest对象;
  2. 从页面中获取获取需要的数据;
  3. 建立要连接的URL;
  4. 打开与服务器的连接;
  5. 设置服务器相应之后要调用的函数,即回调函数;
  6. 发送请求;
下面以一个简单的例子来演示一下,该例子要完成的功能是使用Ajax技术对输入的EMail地址进行简单校验,根据校验的结果,在页面显示相应的消息。

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">&nbsp;</label><br>
  Email:
<input type="text" id="email" onblur="sendreq()" value="" />  
  
<label id="result">&nbsp;</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请求方式区别:

  • POST方法将参数串放在请求体中发送;
  • GET方法将参数串放在URL中发送;

如果数据处理不改变数据模型的状态,建议使用GET方式,如果需要改变数据模型的状态,建议使用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>



只有注册用户登录后才能发表评论。


网站导航: