JavaWeb之Ajax技术

最新推荐文章于 2024-11-03 23:16:52 发布

用心过好每一天_

最新推荐文章于 2024-11-03 23:16:52 发布

阅读量125

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/qq_38343647/article/details/86101801

版权

ajax的优缺点

优点:

异步交互：增强了用户的体验

性能：因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器的压力减轻了

缺点：

ajax不能应用再所有场景

ajax无端的增加了对服务器的访问次数，给服务器带来了压力

ajax发送异步请求（四步）

第一步：获取XMLHttpRequest

var xmlHttp = new XMLHttpRequest();

第二步：打开与服务器的连接

xmlHttp.open("GET","<c:url value='/AServlet'/>",true);

请求方式：GET或POST

请求的URL:指定服务器端资源

请求是否为异步：true 表示为异步

第三步：发送请求

xmlHttp.send(null):如果不给可能会造成部分浏览器无法发送参数

第四步

在xmlHttp对象的一个事件上注册监听器: onreadystatechange

xmlHttp对象一共有5个状态

0状态：刚创建，还没有调用open()方法

1状态：请求开始，调用了open方法，但还没有调用send()方法

2状态：调用完了send()方法

3状态：服务器已经开始响应，但响应没有结束

4状态：服务器响应结束

得到xmlHttp对象的状态：xmlHttp.readyState;

得到服务器响应的状态码：xmlHttp.status;

得到服务器响应的内容：

xmlHttp.responseText; // 得到服务器响应文本格式的内容

xmlHttp.responseXML; // 得到服务器响应的xml格式的内容，得到的为Document对象

实例

jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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 'ajax.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">
	-->
	<script type="text/javascript">
		function getXMlHttpRequest()	{
			try{
				return new XMLHttpRequest;
			}catch(e)	{
				return new ActiveXObject("Msxml2.XMLHTTP");
				try{
					return new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e)	{
					alert("兄dei, 你用的是啥浏览器呐!!!");
					throw e;
				}	
			}
		}
	
		window.onload = function ()	{
			var user = document.getElementById("usernameEle");
			user.onblur = function()	{
				// 1.获取XMLHttpRequest
					var xmlHttp = getXMlHttpRequest();
				// 2.打开与服务器的连接
					xmlHttp.open("POST", "<c:url value='ValidateUsernameServlet'/>", true);
					xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				// 3.发送请求
					var param = "username="+user.value;
					xmlHttp.send(param);
				// 4.注册监听器
					xmlHttp.onreadystatechange = function()	{
						if(xmlHttp.readyState == 4 && xmlHttp.status == 200)	{
							// 得到服务器响应文本
							var text = xmlHttp.responseText; 
							var span = document.getElementById("errorSpan");	
							if(text == "1")	{
								span.innerHTML="该用户已存在!";
							}else	{
								span.innerHTML="";
							}
							
					}
				}
			}
		}
	</script>
  </head>
  
  <body>
    <form action="" method="post">
    	用户名:<input type ="text" name = "username" id="usernameEle"/><span id="errorSpan"></span>
    	<br/>
    	密码:<input type="password" name = "password"/>
    </form>
  </body>
</html>

ValidateUsernameServlet.java

package cn.jxust.web.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ValidateUsernameServlet")
public class ValidateUsernameServlet extends HttpServlet {

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("UTF-8");
		String username = request.getParameter("username");
		if(username.equalsIgnoreCase("hujie"))	{
			response.getWriter().print("1");
		}else	{
			response.getWriter().print("0");
		}
	}

}