使用javascript实现用户名验证

最新推荐文章于 2023-11-14 20:16:03 发布

kj619899271

最新推荐文章于 2023-11-14 20:16:03 发布

阅读量5.4k

点赞数

文章标签： javascript xmlhttprequest callback 服务器 ajax ajax框架

本文链接：https://blog.csdn.net/kj619899271/article/details/6099039

版权

javascript是一种客户端脚本语言，它的执行是在客户端的，有时候使用javascript可以大大减少服务器的压力。下面我介绍一些如何使用javascript实现与服务器的异步交互(页面无刷新)。首先声明，使用纯javascript实现与服务器的异步交互代码复杂且不稳定，现在一般很少有人用javascript来做这个工作，一般都是采用Ajax框架，例如Jquery 代码简单，而且很稳定，使用范围广，这里我只是给大家介绍一下javascript实现异步交互的底层实现。

html页面代码：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>使用底层的XMLHttpRequest实现异步数据交互</title> <script type="text/javascript" src="jslib/XMLHttpRequest.js"></script> </head> <body> <span>使用AJax技术校验用户名！请输入您的用户名：</span><br/>   <input type="text" id="username"/> <input type="button" id="btnCheck" value="校验" οnclick="verify()"/>  <div id="result"></div> </body> </html>

XMLHttpRequest.js代码如下：

//用户名校验的方法。

//这个方法将使用XMLHttpRequest对象来进行AJAX的异步数据交互

//定义一个全局的XMLHttpRequest对象

var xmlhttp;

function verify(){

//首先通过dom获取用户名

var username=document.getElementById("username").value;

//1.创建XMLHttpRequest对象

//这是XMLHttpRequest对象内部使用中最复杂的一步。

//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码。

if(window.XmlHttpRequest){

//这对FireFox,Mozillar,Opera,Safari,IE7,IE8

xmlhttp = new XMLHttpRequest();

//针对某些特定版本的mozillar浏览器的BUG进行修正

if(xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/xml");

}

}else if(window.ActiveXObject){

//针对IE6,IE5.5,IE5

//两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js数组中

//排在前面的版本较新

var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

for(var i = 0 ; i < activexName.length;i++){

try{

//取出一个控件名进行创建，如果创建成功就终止循环

//如果创建失败，回抛出异常，然后可以继续虚幻，继续尝试创建。

xmlhttp = new ActiveXObject(activexName[i]);

break;

}catch(e){

}

//确认XMLHttpRequest对象创建成功 , xmlhttprequest对象创建成功时 readyState的值为0

if(!xmlhttp){

alert("XMLHttpRequest对象创建失败");

//这里我个人发现最新版本的FireFox不能被ifelseif截获，所以为了方便FireBuy调试，手动new了一个对象，实践发现可以成功！

xmlhttp=new XMLHttpRequest();

}else{

alert(xmlhttp);

}

//2.注册回调函数

//注册回调函数时，只需要函数名，不需要括号。

//这里只需要将回调函数的函数名注册，如果加上括号，就会把执行这个方法，把函数的返回值注册。

xmlhttp.onreadystatechange = callback; //每次请求状态readystate的值改变时都会调用callback函数。

//GET方法

//3.设置连接信息

//第一个参数表示http请求方式,支持所有http请求方式，主要使用get和post

//第二个参数表示请求的url地址，get方式请求的参数也在url中

//第三个参数表示是否采用异步方式交互，true表示使用异步交互，false表示使用同步交互

//第四个是用户名，第五个是密码。可以不写

//xmlhttp.open("GET","AJAXService?name="+username,true); //调用open方法时，readyState的值变为1

//4.发送数据，开始和服务器端进行交互。

//如果是同步交互，send这句话会在服务器端数据回来后才执行完(中间不干事)

//如果是异步交互，send这句话会立即执行完，然后可以执行其他操作。

//xmlhttp.send(null); //括号的参数为发送的数据，我们的数据在url里，所以不要传了。 //此时readyState的值变为2

//POST方式

//使用POST方式请求的代码

xmlhttp.open("POST","AJAXService",true);

//不同的是，POST方式需要自己手动设置请求头：

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//使用POST方式发送数据,方式如下，只是将get方式传值中url的后部分内容写到send方法里。

xmlhttp.send("name="+username);

}

//回调函数 readyState的值每次被改变，callback方法都会被调用

function callback(){

//5.接收响应数据

//判断对象的状态是交互完成。一共有五种状态值为0-4

if(xmlhttp.readyState ==4){

//判断http的交互是否成功。成功的交互状态为200,未找到页面为404

if(xmlhttp.status == 200){

//获取服务器端返回的数据

//获取服务器输出的纯文本数据

var responseText = xmlhttp.responseText;

//将数据显示在页面上

var divnode = document.getElementById("result");

//设置元素节点的html内容

divnode.innerHTML = responseText;

}

//alert("此时readyState的值为："+xmlhttp.readyState);

}

后台servlet的写法：

package servlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.ServletException; import java.io.IOException; import java.io.PrintWriter; /** * Created by IntelliJ IDEA. * User: Administrator * Date: 2010-11-10 * Time: 23:09:49 * To change this template use File | Settings | File Templates. */ public class AJAXService extends HttpServlet { //快捷键，使用Ctrl+Alt+Space可以弹出供选择的上下文提示 //快捷键，弹出选择覆盖方法 Alt+Insert @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //首先获取数据 String name=request.getParameter("name"); PrintWriter out=response.getWriter(); //response.setContentType("text/html;charset=gb2312"); //response.setCharacterEncoding("gb2312"); //进行逻辑运算 if(name!=null&&!"".equals(name)){ if("kj".equals(name)){ //最后一步是传数据到前台。这是和传统Servlet不同的一步。不是转到一个新的页面，而是传递运算结果给本页面。 //虽然写法一致，但是本质是不相同的，这是AJAX的实现。 out.println("the username["+name+"]is already used . please choose a new."); }else{ out.println("username["+name+"]can use"); } }else{ } out.println("用户名不能为空"); out.close(); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } }

新键一个javaweb项目，分别加入这些文件就可不熟运行，看到效果了。总的来说，使用javascript中的核心对象XMLHttpRequest实现与服务器的异步交互就是这样的，但是这个太复杂，使用AJax的Jquery框架可以轻松实现，以后有机会给大家介绍。这里仅供有兴趣了解javascript底层实现的同僚参考。