Ajax局部刷新实践-优快云博客

本文介绍了一个使用Ajax实现局部刷新的项目实例，通过AjaxTest Servlet处理客户端请求并返回数据，利用jQuery简化Ajax调用过程，展示了如何在点击按钮时触发数据验证，并实时更新页面显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax主要来实现局部刷新的。

这是一个项目：

AjaxTest.java(Servlet)

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by Administrator on 2016/12/1.
 */
public class AjaxTest extends HttpServlet {

    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter out = resp.getWriter();
       String name= req.getParameter("name");
       if(name==null||name.equals(""))
       {
            out.println("please input username");
       } else if(name.equals("wh")){
           out.println("welcome "+name);
       }else{
            out.println("the user doesn't esist!");
       }
    }


    @Override
    public  void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     doGet(req, resp);
    }
}

ajax.html(填写数据，展示页面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="jquery-3.1.1.js"></script>
    <script  type="text/javascript" src="verify.js"></script>
</head>
<body>
使用ajax技术处理
<input type=text" id="input" name="name" />
<input type="button" value="校验" onclick="verify()"/>
<div id="result"></div>

</body>
</html>

verify.js

function  verify() {
    var input = $("#input");
    var username = input.val();
    $.get("AjaxTest?name="+username,null,callback);
}
function callback(data){
    var res=$("#result");
    res.html(data);
}

每点击一下按钮，就会调用verify函数，从Servlet调出数据，显示在div里。

验证数据案例

<%@ 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>
  <script type="text/javascript">
	//创建Ajax引擎
	var myXmlHttpRequest;
 function ajaxFunction()
 {
    var xmlHttp;
 
 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;
         }
      }
    }

	return xmlHttp;
 }
	
	function checkName(){
		 myXmlHttpRequest = ajaxFunction();	
		//若不为空，则创建成功
		if(myXmlHttpRequest){
			// 第一个参数表示请求的方式，"get"/"post" 。
			// 第二个参数指定url，对哪个页面发出ajax请求 。本质依然是http请求,不过是没有刷新。
			// 第三个参数表示是否使用异步机制 。
			var url="RegisterProcess?username="+$("username").value;
			//打开请求
			myXmlHttpRequest.open("get",url,true);
			//指定回调函数
			myXmlHttpRequest.onreadystatechange=deal;
			//发送get请求,如果是get请求填入null
			//如果是post请求，则填入实际的数据。
			myXmlHttpRequest.send(null);
			
		}else{
			window.alert("创建ajax失败");
		}
	}
	function $(id){
		return document.getElementById(id);
	}
	function deal(){
		//window.alert("处理函数被调用"+ myXmlHttpRequest.readyState);
		if(myXmlHttpRequest.readyState==4){
			//若是返回一个文本  ，则使用responseText 若是返回一个XML，则使用responseXML
			window.alert("服务器返回值："+myXmlHttpRequest.responseText);
			
		}	
	}
</script>

  
  
  </head>
  
  <body>
  
	<form action="???" method="post">
		    用户名字:<input type="text" name="username1" id="username"><input type="button" onclick="checkName();" value="验证用户名">
		    <input style="border-width: 0" type="text" id="myres">
		    <br/>
		    用户密码:<input type="password" name="password"><br>
		    电子邮件:<input type="text" name="email"><br/>
		    <input type="submit" value="用户注册">
	</form>
	<form action="???" method="post">
		    用户名字:<input type="text" name="username2" >
		   
		    <br/>
		    用户密码:<input type="password" name="password"><br>
		    电子邮件:<input type="text" name="email"><br/>
		    <input type="submit" value="用户注册">
    </form>
		
  </body>
</html>

servlet：

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		PrintWriter out = response.getWriter();
		
		String username=request.getParameter("username");
		out.print("username:"+username);//这数据不会显示在页面，而是把数据返回给Ajax引擎
		
		out.flush();
		out.close();
	}

使用get方式发出请求，如果提交的用户名不变化，浏览器不会真的将数据提交，而会使用缓存获得数据。

解决方案：

1.url后附加一个总是变化的参数，比如时间。
var url="RegisterProcess?mytime="+new Date()+"&username="+$("username").value;
2.在服务器返回数据时，禁用缓存。

header("Content-Type: text/html;charset=utf-8");

header("Cache-Control : no-cache");

注：这里的 url 书写，即是web.xml中配置的url，去掉前面的“/” , 比如说

web.xml中

  <servlet-mapping>
    <servlet-name>ShowCities</servlet-name>
    <url-pattern>/servlet/ShowCities</url-pattern>
  </servlet-mapping>

则，发送的 url 写 var url = "servlet/ShowCities";

ajax使用post发送请求。

可以发送数据量大，安全性问题，不必考虑数据的编码问题。

修改部分：

			var url="RegisterProcess";
			var data="username="+$("username").value;
			//打开请求
			myXmlHttpRequest.open("post",url,true);
			myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//指定回调函数
			myXmlHttpRequest.onreadystatechange=deal;
			//发送get请求,如果是get请求填入null
			//如果是post请求，则填入实际的数据。
			myXmlHttpRequest.send(data);

Ajax入门学习