Ajax演示用户名是否被注册例子

最新推荐文章于 2024-07-26 20:46:33 发布

Andy Chen 陈郑游

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量175

点赞数

文章标签： javascript java ViewUI

1、Ajax简介

AJAX即“AsynchronousJavascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

2、异步交互和同步交互

同步：

1)发出一个请求、就要等待服务器的响应结束、然后才能发出第二个请求！

2)刷新是整个页面刷新！

异步：

1)发出一个请求之后、无需等待服务器的响应、然后就可以发出第二个请求！

2)可以使用js接收服务器的响应、然后使用js来局部刷新！

3、Ajax优缺点

优点：

lAJAX使用Javascript技术向服务器发送异步请求；

lAJAX无须刷新整个页面；

l 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

缺点：

lAJAX并不适合所有场景，很多时候还是要使用同步交互；

lAJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；

l因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

4、ajax发送异步请求（四步操作）

1. 第一步（得到XMLHttpRequest）

1)ajax其实只需要学习一个对象：XMLHttpRequest

2)如果掌握了它，就掌握了ajax！！！

3)得到XMLHttpRequest

1)大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();

2)IE6.0：var xmlHttp = newActiveXObject("Msxml2.XMLHTTP");

3)IE5.以更早版本的IE：var xmlHttp = newActiveXObject("Microsoft.XMLHTTP");

2. 第二步（打开与服务器的连接）

* xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：

> 请求方式：可以是GET或POST

> 请求的URL：指定服务器端资源，例如；/day23_1/AServlet

> 请求是否为异步：如果为true表示发送异步请求，否则同步请求！

* xmlHttp.open("GET","/day23_1/AServlet", true);

3. 第三步（发送请求）

* xmlHttp.send(null)：如果不给可能会造成部份浏览器无法发送！

> 参数：就是请求体内容！如果是GET请求，必须给出null。

4. 第四步（回调函数）

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

* xmlHttp对象一共有5个状态：

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

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

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

> 3状态：服务器已经开始响应，但不表示响应结束了！

> 4状态：服务器响应结束！（通常我们只关心这个状态！！！）

* 得到xmlHttp对象的状态：

> var state = xmlHttp.readyState;//可能是0、1、2、3、4

* 得到服务器响应的状态码

> var status = xmlHttp.status;//例如为200、404、500

* 得到服务器响应的内容1

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

> var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象了！

例子：注册表单之校验用户是否注册！

Servlet类：

package com.ajax.data;

import java.io.IOException;

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

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
	
	private static final long serialVersionUID = 1L;
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		doPost(request,response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		
		/*
		 * 1. 获取参数username
		 * 2. 判断是否为itcast
		 * 	 5. 如果为空：响应2
		 *   3. 如果是：响应1
		 *   4. 如果不是：响应0
		 */
		String username = request.getParameter("username");
		
		if(username.equalsIgnoreCase("chen")) {
			response.getWriter().print("1");
		}else if(username.equalsIgnoreCase("")) {
			response.getWriter().print("2");
		}else {
			response.getWriter().print("0");
		}
	}

}

显示页面与处理：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>演示用户名是否被注册</title>
    
<script type="text/javascript" src="ajax_createXMLHttpRequest/createXMLHttpRequest.js"></script>
<script type="text/javascript">

window.onload = function() {
	// 获取文本框，给它的失去焦点事件注册监听
	var userEle = document.getElementById("usernameEle");
	userEle.onblur = function() {
		//1.得到异步对象
		var xmlHttp = createXMLHttpRequest();
		//2.打开连接
		xmlHttp.open("POST", "<c:url value='/AjaxServlet'/>", true);
		//3.设置请求头：Content-Type
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		//4.发送请求，给出请求体
		xmlHttp.send("username=" + userEle.value);
		
		//5.给xmlHttp的onreadystatechange事件注册监听
		xmlHttp.onreadystatechange = function() {
			//双重判断
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				//获取服务器的响应，判断是否为1
				// 是：获取span，添加内容：“用户名已被注册”
				var text = xmlHttp.responseText;
				var span = document.getElementById("errorSpan");
				
				if(text == "1"){
					span.innerHTML = "很抱歉！用户名已被注册！";
				}else if(text == "2") {
					//得到span元素
					span.innerHTML = "请输入用户名！";
				}else if(text == "0"){
					span.innerHTML = "恭喜您！该用户名可以注册哦！";
				}else {
					span.innerHTML = "";
				}
			}
		};
	};
};
</script>

  </head>
  <body>
    
	<h1>演示用户名是否被注册</h1>
	<form action="" method="post">
		用户名：<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>
		密　码：<input type="password" name="password"/><br/>
		<input type="submit" value="注册"/>
	</form>
    
  </body>
</html>

Andy Chen 陈郑游

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax演示用户名是否被注册例子

1、Ajax简介AJAX即“AsynchronousJavascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载...
复制链接

扫一扫