IT虾米网

关于AJAX详解

shasha 2018年08月28日 编程语言 698 0

现用传统的代码实现ajax


JSP页面 register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <base href="<%=basePath%>"> 
     
    <title>My JSP 'register.jsp' starting page</title> 
     
	<meta http-equiv="pragma" content="no-cache"> 
	<meta http-equiv="cache-control" content="no-cache"> 
	<meta http-equiv="expires" content="0">     
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
	<meta http-equiv="description" content="This is my page"> 
	<!-- 
	<link rel="stylesheet" type="text/css" href="styles.css"> 
	--> 
 
  </head> 
  <script type="text/javascript"> 
      var xmlHttpRequest; 
      //创建 xmlHttpRequest对象  
      function createXmlHttpRequest(){ 
    	  if(window.XMLHttpRequest){ 
        	  //非 IE 
    		  xmlHttpRequest=new XMLHttpRequest(); 
          }else{ 
        	  xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); 
          } 
      } 
 
      function showMsg(){ 
          // 取得 输入的 用户名值  
          var username=document.getElementById("username").value;    
          createXmlHttpRequest();  
          //传参数  初始化xmlHttpRequest组件  
          xmlHttpRequest.open("POST","registerAction?username="+username); 
          //设置回调函数  
          xmlHttpRequest.onreadystatechange=showMsgCallback; 
          //发送请求  
          xmlHttpRequest.send(null); 
      } 
 
      //回调函数    每次状态改变都会调这个函数  
      function showMsgCallback(){ 
          if(xmlHttpRequest.readyState==4){ 
              if(xmlHttpRequest.status==200){ 
 
                  //得到服务器 应答字符串  
                  var text=xmlHttpRequest.responseText; 
                  if(text=="false"){ 
                      document.getElementById("msg").innerHTML="此用户已被注册"; 
                  }else{ 
                  	  document.getElementById("msg").innerHTML="可以注册"; 
                  }  
              }else if(xmlHttpRequest.status==404){ 
                  alert("请求的资源不存在 "); 
              } 
          } 
      } 
     // 0 --  未初始化 
     // 1 -- 初始化 
     // 2 -- 发送请求 
     // 3 -- 开始接受结果 
     // 4 -- 接受结果完毕   
      
     // 200 -- ok 
     // 404 -- Not found(没有找到资源) 
     // 500 -- 服务器出错 
      
     // xmlHttpRequest属性  
     // onreadystatechange 设置回调函数(状态改变一次调用一次 ) 
     // readyState 组件的状态信息 (0 1 2 3 4) 
     // status 服务器应答状态码 (200 404 500) 
     // responseText 得到服务器应答字符串  
      
     // xmlHttpRequest方法  
     // open(methodType,url,boolean) 初始化  
     // send(null) 发送请求  
           
  </script> 
  <body> 
              用户名:<input type="text" name="username" id="username"><button onclick="showMsg()">检查是否可用</button><span id="msg"></br> 
              密    码:<input type="password" name="password" id="password"></br> 
     <input type="submit" value="注册"> 
  </body> 
</html> 


Servlet : RegisterAction.java

package com.org; 
 
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 RegisterAction extends HttpServlet { 
 
	 
	public void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException { 
 
		response.setContentType("text/html");	 
		//得到前台页面输入的用户名  
		String username = request.getParameter("username"); 
		PrintWriter out = response.getWriter(); 
		 
		//此处没有查询数据库 直接固定数据  
		if(username.equals("zhangsan")){ 
			out.print("false");  //不可以注册 
		}else{ 
			out.print("true");  //可以注册  
		}	 
		out.close(); 
	} 
	public void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException { 
 
		this.doGet(request, response); 
	} 
 
} 




发布评论
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

JSP跳转方式详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。