[AJAX 验证 XmlHttpRequest对象属性的使用 简单数据处理
js代码：testAjax01.js
function createXmlHttpRequest(){
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
var MSXML =
['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for ( var i = 0; i < MSXML.length; i++) {
try {
xmlHttp = new ActiveXObject(MSXML[i]);
alert(MSXML[i]);
break;
} catch (e) {
}
}
}
return xmlHttp;
}
/**
* 获取XmlHttpRequest对象
*/
/*
function bodyOlad(){
}
*/
function sendAjax(){
var name = document.getElementById("name").value;
if (!name.length) {
alert("用户名不能为空...");
return;
}
//alert(name);
var xhr = createXmlHttpRequest();
/**
* 创建一个新的HTTP请求 并制定此请求方法 URL以及验证信息
* method 提交方式 get/post
* url 访问地址
* true 代表异步提交 默认的
* false 同步
*
* get提交 只能在后面跟入传入的参数值
* post提交 可以在send里面传入相应的参数值 但必须在open方法之后设置
* setRequestHeader();
*/
//xhr.open("get","ajaxServlet?name="+name+"&time="+new Date().getTime(),true);
//xhr.open("post","ajaxServlet?time="+new Date().getTime(),true);
xhr.open("post","ajaxMsg.txt?time="+new Date().getTime(),true);
/**
* application/x-www-form-urlencoded就是：jsp form enctype 属性
* 默认的
* <form action="" enctype="application/x-www-form-urlencoded"></form>
* 设置MIME类型 如果是post提交
* 需将Content-type的首部设置为application/x-www-form-urlencoded
* 他会告知服务器正在发送数据 并且数据已经符合URL编码了
*/
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
* 当状态改变时 会调用onreadystatechange属性 指定回调函数
*/
/**
* readyState
* 0代表初始化
* 1代表正在加载...open方法一调用 但是send方法还没调用
* 2代表以加载完毕 send已被调用 请求已经开始
* 3代表交互中...服务器正在发送相应
* 4代表完毕...相应发送完毕 并且我们ajax对象可以通过responseText获取返回数据
*/
//制定相应处理函数
xhr.onreadystatechange= function (){
//对象状态
if(xhr.readyState == 4){
/**
* status
* 在XmlHttpRequest对象中 服务器发送的状态码都保存在status属性中
* 可以通过把这个值和200、304比较 可以确保服务器是否
* 已发送了一个成功的相应
*/
//信息已成功返回 200 没有被修改304
if (xhr.status=='200' || xhr.status == '304') {
//处理信息数据
// /alert(xhr.responseText);
document.getElementById("msg").innerHTML = xhr.responseText;
}
}
};
/**
* send发送
* 发送请求到HTTP服务 饼接收响应
*/
xhr.send("name=admin&password=123456");
document.getElementById("msg").style.color='red';
//document.getElementById("msg").innerHTML = xhr.responseText;
}
Servlet代码：AjaxServlet
package com.sg.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 AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String nameStr = new String(name.getBytes("iso-8859-1"),"utf-8");
System.out.println(nameStr);
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
if ("admin".equals(nameStr)) {
out.println("用户名已存在.....");
}else if ("孙刚".equals(nameStr)) {
out.print("此用户名可以使用....");
}else {
out.println("此用户名可以使用...");
}
out.close();
//this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doPost");
String name = request.getParameter("name");
System.out.println("用户名："+name);
String password = request.getParameter("password");
System.out.println("密码："+password);
response.setCharacterEncoding("UTF-8");
//重定向
request.getRequestDispatcher("ajaxMsg.jsp").forward(request, response);
}
}
[size=xx-large]jsp:代码 textAjax01.jsp[/size]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Ajax</title>
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/testAjax01.js"></script>
</head>
<body>
<br/>
<input type="text" id="name" ><span id="msg" ></span></br>
<input type="button" value="发送ajax请求" onclick="sendAjax();">
<form action="" enctype="application/x-www-form-urlencoded"></form>
</body>
</html>
ajaxMsg.jsp
<html>
<table>
<tr>
<td>用户名</td>
<td>密码</td>
</tr>
<tr>
<td>${param.name }</td>
<td>${param.password }</td>
</tr>
</table>
</html>
ajaxMsg.txt
<html>
<table>
<tr>
<td>用户名</td>
<td>密码</td>
</tr>
<tr>
<td>admin</td>
<td>123456</td>
</tr>
</table>
</html>
分享到：
相关推荐
Ajax 中的 XMLHttpRequest 对象 Ajax 是一种异步的 JavaScript 与 XML 技术，用于在客户端脚本与服务器之间实现数据交互过程。XMLHttpRequest 对象是 Ajax 的技术基础，尽管现在提供了各种 Ajax 框架，但是理解这个...
这里我们关注的是如何使用XMLHttpRequest对象来实现一个简单的信息验证功能。 XMLHttpRequest是Ajax的核心组件，它提供了一种异步与服务器通信的方式。以下是一个基本的XMLHttpRequest的使用流程： 1. **创建实例*...
Ajax技术的核心是XMLHttpRequest对象，它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换，从而实现局部刷新，提升响应速度和交互性。 ### Ajax与XMLHttpRequest Ajax技术最早由Adaptive Path提出，...
3. **发送请求**：使用XMLHttpRequest对象的`open`方法设置请求类型（GET或POST），URL（通常是登录验证的API接口），以及是否异步执行。然后调用`send`方法发送请求，如果是POST请求，需要传递登录数据。 4. **...
XMLHttpRequest（XHR）是实现Ajax的核心对象，它允许JavaScript与服务器进行通信，接收或发送数据，实现页面的动态更新。本Demo02着重展示了如何利用XMLHttpRequest对象实现Ajax的基本用法。 在AjaxXMLHttpRequest_...
本手册将深入探讨XMLHttpRequest对象，帮助你更好地理解和掌握Ajax开发。 一、XMLHttpRequest概述 XMLHttpRequest对象首次由微软在Internet Explorer 5中引入，后来被其他浏览器所采纳并成为W3C标准。它允许...
在"Javascript 表单验证对象控件 + ajax简单验证重复项与ajax提交数据"这个主题中，我们将深入探讨如何利用JavaScript提高用户体验，通过实时验证用户输入的数据，以及如何使用Ajax技术异步验证和提交数据，避免页面...
Ajax技术的核心是XMLHttpRequest对象，此对象提供了在后台与服务器交换数据的功能。 2. XMLHttpRequest对象：XMLHttpRequest对象用于在后台与服务器交换数据，从而实现网页的动态更新。创建XMLHttpRequest对象时，...
本文将深入解析XMLHttpRequest对象，这是实现Ajax的核心组件。 1. XMLHttpRequest对象概述 XMLHttpRequest（XHR）是JavaScript的一个内置对象，它允许开发人员在后台与服务器通信，无需用户交互。通过这个对象，...
在"ajax验证表单"中，可能使用了JavaScript事件监听器来捕捉用户的输入行为，如`onkeyup`或`onblur`事件。当用户在输入框中键入内容或离开输入框时，触发验证函数。 4. **Ajax调用**： 当用户输入满足触发验证的...
Ajax的核心在于`XMLHttpRequest`对象，它提供了在后台与服务器交换数据的能力，而无需重新加载整个网页。通过Ajax，可以实现局部页面更新，提高网站的动态性和实时性。 #### 二、AJAX数据验证流程解析 ##### 1. ...
总的来说，"ajax验证数据库登陆源码"是一个适合入门级开发者学习的实践项目，它将帮助你快速掌握Ajax的基本使用，理解异步请求与数据库验证的流程，并为将来的小程序开发打下坚实基础。通过这个实例，你可以亲自动手...
它通过XMLHttpRequest对象来实现异步通信，通过JavaScript编写前端逻辑，向服务器发送请求，并处理服务器返回的数据。 **二、PHP后端验证** 1. **接收数据**：在PHP中，通过`$_POST`或`$_GET`全局数组获取客户端...
例如，一个简单的Ajax验证流程可能包括以下步骤： 1. 用户在表单字段中输入数据。 2. 当数据改变时，触发JavaScript函数，该函数创建一个XMLHttpRequest对象，用以发送异步请求。 3. 发送包含用户输入数据的请求到...
3. **Ajax调用**：在验证函数内部，创建XMLHttpRequest对象实例，设置请求方法（GET或POST）、URL（通常是服务器端的验证接口）以及数据（用户输入值）。然后，使用open()方法初始化请求，并使用send()方法发送数据...
它主要涉及四个关键组件：浏览器对象、请求对象、响应对象以及数据处理。在JavaScript中，我们通常使用`XMLHttpRequest`或现代浏览器支持的`fetch` API来创建请求对象。当用户在登录表单中输入信息并提交时，Ajax会...
1. **创建XMLHttpRequest对象**：所有现代浏览器（包括IE7+、Firefox、Chrome、Safari和Opera）都内置了XMLHttpRequest对象，用于处理Ajax请求。开发者可以通过`new XMLHttpRequest()`来创建一个实例。 2. **初始化...
AJAX的核心组件包括XMLHttpRequest对象、JavaScript、DOM和CSS。在DWR中，AJAX的实现变得更加简单，因为DWR提供了一套完整的框架，使得开发者可以方便地在客户端和服务器之间传递数据。 **DWR验证**通常用于实现...
1. **jQuery/Ajax库**：jQuery提供了更简单的API来处理Ajax请求，如`$.ajax()`，简化了Ajax的使用。 2. **Promise和async/await**：现代JavaScript支持Promise和async/await语法，可以更好地管理异步操作，使代码...
Ajax的核心是JavaScript对象XMLHttpRequest，它允许JavaScript与服务器进行异步数据交换。通过创建XMLHttpRequest实例，设置HTTP请求方法、URL、数据类型等属性，然后发送请求，最后监听服务器响应，实现数据的交互...