Ajax实现用户名验证

1.Ajax是什么？

Ajax是asynchronous javascript and xml的简写。不是一项具体的技术，而是几门技术的综合应用。其核心只不过是要在javascript中调用一个叫XMLHttpRequest的javascript类，这个类可以与Web服务器使用HTTP协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的JavaScript对象发送请求，再由这个JavaScript对象接收响应，并将响应结果用DOM编程方式挂到原来的网页上，从而使得javascript借助这个api类可以干出比较有意义的事情。XMLHttpRequest对象在网络上的俗称为XHR对象。

2.Ajax的特点

浏览器中显示一个页面后，这个页面以后一直不改变，所有的操作请求都由这个网页中的javascript代码发出，所有的结果都由javascript代码接受并增加到这个页面上，浏览器窗口中显示的网页始终都是初始的那个网页。（见下面两页的图）

增强用户体验：可以在用户浏览网页的同时与服务器进行异步交互和实现网页内容的局部更新，例如，126邮箱密码安全性判断和google suggest；可以按需取数据，改善页面显示速度，例如，树状菜单和babasport的首页（整合多个信息的页面）；视觉流畅的定时刷新，例如，聊天室。（用下几页的图举例说明）

学习ajax和应用ajax的难点不在于XMLHttpRequest本身，而在于javascript和DOM编程，没有较好的javascript和DOM编程基础，你就很难做出有意义的ajax应用。

3.Ajax实例

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 'index.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">
<script type="text/javascript">
	var xmlHttpRequest;

	function createXMLHttpRequest() {	
		try {
			//Firefox,Opera 8.0+,Safari
			xmlHttpRequest = new XMLHttpRequest();
		} catch (e) {//IEIE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
			var MSXML = [ 'MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP' ];
			for ( var n = 0; n < MSXML.length; n++) {
				try {
					xmlHttpRequest = new ActiveXObject(MSXML[n]);
					break;
				} catch (e) {
				}
			}
		}
		return xmlHttpRequest;

	}
	function send(data){
	     createXMLHttpRequest();
	     xmlHttpRequest.open("Post","demo?data="+data,false); //打开和服务端的连接
	     xmlHttpRequest.onreadystatechange=callback; //指定响应的回调函数
	     xmlHttpRequest.send(null); //发送请求
	}
	function callback(){
	
			if(xmlHttpRequest.readyState==4){
			
			    if(xmlHttpRequest.status==200){
			           var result=   xmlHttpRequest.responseText;
			            var msg=document.getElementById("msg");
			           if(result==0){
			           
			               msg.innerHTML="<div style=\"color:#73BA31;\">用户可用</div>";
			           
			           }else{
			                msg.innerHTML="<div style=\"color:red;\">用户不可用</div>";
			           }
			    
			    }else{
			    
			      alert("连接异常");
			    }

			}
	}
	function checkUser(){
	
	   var name=document.getElementById("name");
	   if(name.value==''){
	      alert('用户名不能为空');
	      name.focus();
	      return false; 
	   }else{
	   
	    send(name.value);
	   }

	}
	
	
</script>
</head>

<body>
	<form>
	   <input id="name" type="text" name="name" onblur="checkUser()">
	   <span id="msg" ></span>
	</form>
</body>
</html>

服务端的代码：

package com.bawei.demo.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 DemoServlet extends HttpServlet {


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

		
	}

	
	public void doPost(HttpServletRequest request,IOException {

		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		String data=request.getParameter("data");
		
		String msg=new String(data.getBytes("iso-8859-1"),"utf-8");
		
		if(msg.equals("bawei")){
			
			out.println(1);

		}else{
			
			out.println(0);
		}
		out.flush();
		out.close();
		
	}

}

程序运行的效果：

原文链接：https://www.f2er.com/ajax/165903.html

Ajax实现用户名验证

猜你在找的Ajax相关文章