XMLHttpRequest Ajax 实例检查用户名是否存在

最新推荐文章于 2021-02-21 16:10:01 发布

dongruan00

最新推荐文章于 2021-02-21 16:10:01 发布

阅读量189

点赞数

分类专栏： Ajax 文章标签： javascript ViewUI

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、XMLHttpRequest 对象的方法与属性

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method", "url")	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

属性	描述
onreadystatechange	每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，表示为一个串
responseXML	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status	服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）
statusText	HTTP状态码的相应文本（OK或Not Found（未找到）等等）

js/xmlHttpRequest.js

function createXmlHttpRequest() {
	var xmlHttp;

	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {

		// Internet Explorer
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {

			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				alert("您的浏览器不支持AJAX！");
				return false;
			}
		}
	}

	return xmlHttp;

}

浏览器有两种内核，IE内核和firefox内核；因此需要根据当前用户浏览器进行判断；

XMLHttpRequest有一些常用属性：

(1)readyState:请求的状态；（4 表示已经响应完毕）

(2)onreadystatechange：readyState改变时调用，通常用于回调函数的返回值；

(3)responseText：返回纯文本对象；

(4)responseXML：返回XML数据的对象；

(5)status：返回当前HTTP的状态（200为正常）

XMLHttpRequest的常用函数：

(1)open("GET/POST","url");: 创建请求，指定是post还是get，并且指定发送的目的地URL；

(2)send(param);:发送请求，通常param=null;

知识回顾：

在JavaScript中

(1)document.getElementById("name").innerHTML可以设定此控件的值；

(2)onblur事件表示失去焦点时调用；

jsp文件：

<head>
<script type="text/javascript" src="js/xmlHttpRequest.js"></script>
  </head>
  
  <body>
    <script type="text/javascript">

		
		function userNameCheck() 
		  { 
		      var username = document.all.username.value;        //获得text的值 
		      
		      var request = createXmlHttpRequest();//创建request 对象 
		      request.open("post","UserAction?username="+username);//建立到服务器的新请求 
		      request.send();//向服务器发送请求 
		      
		      request.onreadystatechange=function()//指定当readyState属性改变时的事件处理句柄 
		      { 
		          if (request.readyState==4)//提取当前HTTP的就绪状态,状态4表示：响应已完成，可以访问服务器响应并使用它 
		             if (request.status==200)//HTTP状态,我们期望的状态码是 200，它表示一切顺利。 
		             //如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据 
		                { 
		                   var value = request.responseText;//服务器返回响应文本 
		                   
		                   if (value=="true") 
		                   { 
		                       document.all.unc.innerHTML="该用户名已存在"; 
		                   } 
		                   else 
		                   { 
		                        document.all.unc.innerHTML="OK"; 
		                   } 
		                } 
		      }     
		       
		  } 
				 
</script>

		用户姓名： <input type="text" name="username" οnblur="userNameCheck()"/><font color="red" size="-1" id="unc"></font> 
		
  </body>
</html>

public class UserAction extends HttpServlet { 
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {  doPost(request, response);
 } 
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {   String username=request.getParameter("username"); 
         if(username.equals("chenlh")) 
          response.getWriter().print("true"); 
      else 
       response.getWriter().print("false");  }}

dongruan00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XMLHttpRequest Ajax 实例检查用户名是否存在

一、XMLHttpRequest 对象的方法与属性方法描述abort()停止当前请求getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回getResponseHeader("header")返回指定首部的串值open("metho...
复制链接

扫一扫

专栏目录