`
sungang_1120
  • 浏览: 306969 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

AJAX 验证 XmlHttpRequest对象属性的使用 简单数据处理

 
阅读更多
[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使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对...

    XMLHttpRequest手册

    压缩包“ajax.rar”内含:“《掌握Ajax.chm》”和“...掌握 Ajax,第 10 部分: 使用 JSON 进行数据传输 http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/ 掌握 Ajax,第 11 部分: 服务器端的 JSON ...

    Ajax基础教程(扫描版)

    本书重点介绍ajax及相关的工具和技术,主要内容包括xmlhttprequest对象及其属性和方法、发送请求和处理响应、构建完备的ajax开发工具、使用jsunit测试javascript、分析javascript调试工具和技术,以及ajax开发模式和...

    Ajax完全自学手册(源代码).rar

    12.1 使用ASP.NET Ajax控件实现的页面无刷新的简单实例 第13章 AjaxGridView Ajax化的GridView AjaxChartRoom Ajax无刷新聊天室 第14章(\C05) AutoComplete AutoCompleteExtender控件的使用 ...

    Ajax完全自学手册(PPT)

    12.1 使用ASP.NET Ajax控件实现的页面无刷新的简单实例 第13章 AjaxGridView Ajax化的GridView AjaxChartRoom Ajax无刷新聊天室 第14章(\C05) AutoComplete AutoCompleteExtender控件的使用 ...

    一个客户端的验证小程序ajax

    一个客户端的验证小程序ajax function Go() { //第一步 初始化 createXMLHttpRequest(); //第二步 取得表单中需要的数据 var newName =document.f3.uname.value; //第三步 建立要连接的URL并打开服务器的...

    Ajax详解.rar

    他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。 五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟...

    Ajax无刷新验证页面

    AJAX 组成 1.表示 XHTML+CSS 2.动态显示和交互 DOM 3.数据交互和操作 XML、XSLT 4.异步数据获取 XMLHttpRequest 5.绑定和处理数据 JavaScript

    Web前端Ajax&JQuery视频教程课件

    本套Java教程涵盖Ajax的实现原理,XMLHttpRequest实现Ajax,回调函数,Ajax数据交换格式(HTML、XML、JSON),Ajax发送GET和POST请求,异步编程模型和同步编程模型,解决Ajax的GET请求缓存问题,使用Ajax验证用户名...

    Ajax程序设计入门

    Ajax这个概念的最早提出者Jesse James Garrett认为:...并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

    使用Ajax时处理用户session失效问题的解决方法

    然而当使用Ajax请求数据时,在验证失败后只会响应一串字符串,JavaScript并不会执行,这是由于Ajax的请求是由XMLHTTPRequest对象发起的而不是浏览器,在验证失败后服务器返回的信息会被XMLHTTPRequest对象接收到并...

    Ajax完全自学手册PPT和源代码(ptt格式)

    12.1 使用ASP.NET Ajax控件实现的页面无刷新的简单实例 第13章 AjaxGridView Ajax化的GridView AjaxChartRoom Ajax无刷新聊天室 第14章(\C05) AutoComplete AutoCompleteExtender控件的使用 Calender Reorder...

    javascript完全学习手册1 源码

    3.2.2 Array对象属性 47 3.2.3 Array对象方法 48 3.3 String对象 51 3.3.1 创建String对象 51 3.3.2 String对象属性 51 3.3.3 String对象方法 53 3.4 Math对象 56 3.5 Date对象 62 3.5.1 Date对象方法 62 3.5.2 使用...

    ASP.NET高级编程:为校园BBS用户注册提供无刷新验证.pptx

    AJAX的核心是JavaScript对象XMLHttpRequest,该对象是一种支持异步请求的技术,用户可以使用该对象向服务器提出请求并处理响应,并且还不会影响客户端的信息通信。 ;ASP.NET3.5 和AJAX ASP.NET 3.5之前,ASP.NET自身...

    JavaScript完全自学宝典 源代码

    \ajaxmodel\amel\html\firstAjax.jsp 显示XMLHttpRequest对象状态。 \ajaxmodel\amel\html\userReg.html 完成验证的客户端页面。 \ajaxmodel\amel\html\city.jsp 动态加载列表框的客户端页面。 \ajax...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    9.4.3 使用数据对象执行更新 9.5 数据源控件的限制 9.5.1 问题 9.5.2 添加其他项 9.5.3 使用SqlDataSource处理其他选项 9.5.4 使用ObjectDataSource处理其他选项 9.6 总结 第10章 富数据控件 10.1...

    ASP.NET4高级程序设计(第4版) 3/3

    9.4.3 使用数据对象执行更新 296 9.5 数据源控件的限制 299 9.5.1 问题 299 9.5.2 添加其他项 300 9.5.3 使用SqlDataSource处理其他选项 301 9.5.4 使用ObjectDataSource处理其他选项 301 9.6 总结 ...

    《javaScrip开发技术大全》源代码

    • sample16.htm 使用for each…in语句遍历对象属性和数组元素 • sample17.htm 对象的引用 • sample18.htm with语句 • sample19.htm with语句的等价代码 • sample20....

    表单的验证

    在 HTML 表单中结合 Asynchronous JavaScript™ + XML (Ajax) 的服务器回调机制,对表单应用 Ajax,对于为...XMLHttpRequest对象用来响应通过HTTP传递的数据,一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上。

Global site tag (gtag.js) - Google Analytics