一、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;
知识回顾：
(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" onblur="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"); }}
相关推荐
本实例主要讲解如何使用Ajax异步检查用户名是否已存在。 首先，我们需要理解Ajax的基本工作原理。Ajax的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器交换数据并更新部分网页内容。以下是一个简单的...
总结来说，"AJax验证用户名是否存在"是Web开发中常见的功能，通过DWR或原生JavaScript，我们可以实现与后台的无刷新交互，检查用户名的可用性，提高用户注册或登录的效率。同时，需要注意安全性与性能的优化，确保...
本实例中，我们将探讨如何利用Ajax实现异步验证注册用户名是否存在，以避免重复注册的情况。 首先，我们关注的是`ajax.js`文件，这是实现Ajax请求的核心。在JavaScript中，通常会使用`XMLHttpRequest`对象或更现代...
在本场景中，标题"Ajax请求验证用户名问题"指的是使用Ajax来实现用户输入用户名时实时检查该用户名是否已被占用的功能。这通常在注册或登录界面非常常见，提供用户友好的体验，因为他们可以即时得知用户名是否可用，...
下面我们将深入探讨几种不同的AJAX方法来验证用户名是否存在。 1. **基本AJAX请求**：使用XMLHttpRequest对象是实现AJAX的基础。创建一个XMLHttpRequest实例，然后设置其`onreadystatechange`事件处理函数，当...
"AJAX无刷新验证用户名是否存在"是一个典型的应用场景，它允许用户在输入用户名时实时检查该用户名是否已被占用，而无需提交整个表单或刷新整个页面。这一功能对于注册、登录等涉及用户账号的页面尤为重要，可以防止...
原生Ajax技术可以实现异步数据交互，无需刷新页面就能验证用户名是否已存在，提供良好的用户体验。以下是对"原生ajax模拟判断用户名是否已注册"这一主题的详细解释。 首先，我们需要理解什么是Ajax。AJAX ...
在"Ajax验证用户名已存在"这个场景中，我们主要探讨的是如何利用Ajax技术实现在用户输入用户名时，后台实时检查该用户名是否已被注册。 在前端，通常我们会有一个表单，包含一个输入框让用户输入用户名，以及一个...
### AJAX与Struts结合实现无刷新验证用户名是否存在 在Web开发中，用户体验是至关重要的因素之一。传统的表单提交方式往往会导致整个页面重新加载，这不仅降低了用户体验，还增加了服务器的负担。为了解决这一问题...
2. **发送Ajax请求**：当用户按下检查按钮时，使用JavaScript捕捉到此事件，并使用Ajax发送一个请求到服务器，询问该用户名是否存在。 3. **服务器处理**：服务器接收到请求后，查询数据库，判断用户名是否已被占用...
这通常通过实时检查数据库中的用户名是否存在来实现。在本教程中，我们将探讨如何利用AJAX（Asynchronous JavaScript and XML）技术来检测用户名是否重复，以提升用户体验，避免用户在提交表单后才收到用户名已存在...
本教程将深入讲解如何利用Ajax进行用户名存在的检测，以确保用户在注册时能即时获知所选用户名是否已被占用。 首先，我们需要了解Ajax的基本工作原理。Ajax允许前端JavaScript通过XMLHttpRequest对象与后台服务器...
通过AJAX，我们可以实现用户输入时实时检查用户名是否存在，提升用户体验。 首先，我们要理解AJAX的基本工作原理。它通过JavaScript创建XMLHttpRequest对象，这个对象负责与服务器进行异步通信。然后，我们发送一个...
在这个“Ajax实现简单的用户名验证”的示例中，我们将探讨如何利用Ajax来检查用户在注册时输入的用户名是否已存在，从而提供即时的反馈，提升用户体验。 首先，我们需要理解Ajax的基本组成部分： 1. **...
在这个实例中，我们主要使用Ajax的异步特性来发送请求，检查服务器端的用户名数据库，以判断输入的用户名是否可用。 首先，我们需要在HTML页面中设置一个输入框让用户输入用户名，并添加一个按钮触发Ajax请求。...
这里有一个输入框`<input id="txtName" type="text">`用于用户输入用户名，以及一个按钮`查看用户名是否存在" id="btn" onclick="JudgeUserName();">`，当点击该按钮时会触发`JudgeUserName()`函数。此外，还有一个`...
在本实例中，我们将利用jQuery库中的$.ajax方法实现一个简单的Ajax验证用户名是否已存在的功能。 **jQuery库的$.ajax方法** $.ajax是jQuery提供的一种低级（底层）的AJAX函数，它可以让你完全控制HTTP请求。这个...
Ajax验证用户名是否存在的实例代码中涉及到的关键技术点包括： 1. Ajax技术：Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。它通过在后台与服务器进行...