Ajax实现用户名验证
2013-08-28 11:51
369 查看
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
);
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, HttpServletResponse response)
throws ServletException, 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();
}
}
程序运行的效果：
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
);
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, HttpServletResponse response)
throws ServletException, 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();
}
}
程序运行的效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Struts2&ajax实现用户名唯一验证案例
- 基于jQuery实现的Ajax 验证用户名是否存在的实现代码
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解
- Ajax实现异步用户名验证功能
- 用Ajax实现的验证用户名是否重复实例
- Ajax使用原生态JS实现用户名是否存在验证
- （2010-08-22）利用jQuery实现的Ajax 验证用户名是否存在
- 用AJAX实现页面登陆以及注册用户名验证
- 使用Ajax实现用户名是否已经存在的验证
- Asp.net2005不用Ajax实现无刷新验证用户名、密码和中文验证码
- Asp.net2005不用Ajax实现无刷新验证用户名、密码和中文验证码
- ajax—json实现验证用户名是否存在功能
- 【jquery】ajax实现用户名验证
- jsp+ajax实现无刷新,鼠标离开文本框即验证用户名
- ajax和struts结合实现无刷新验证用户名是否存在
- Jquery与ajax结合实现验证用户名（邮箱是否）已经被注册过
- 使用ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在
- AJAX实现用户名验证
- Ajax java struts 实现用户名验证
- php+jquery+ajax实现用户名验证