Ajax入门——XMLHttpRequest对象的使用
2010-03-28 17:26
776 查看
index.html代码：
<%--
Document : index
Created on : 2010-3-25,
12:46:06
Author : zhan
--%>
<%@page
contentType="text/html"
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>JSP Page</title>
<script
type="text/javascript">
var xmlhttp;
//var
array = [];//定义一个数组来存储XMLHttpRequest的状态
function
submit(){
///alert("Test submit().");
//1.创建XMLHttpRequest对象
if(window.XMLHttpRequest){
//IE7.0,IE8.0,FireFox,Mozilla,Safari,Opera
xmlhttp = new
XMLHttpRequest();
if(xmlhttp.overrideMineType){
xmlhttp.overrideMineType("text/xml");
}
}else if(window.ActiveXObject){
//IE5,IE5.5,IE6..
var activexName =
["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<activexName.length;i++){
try{
xmlhttp = new
ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//判断浏览器是否支持创建XMLHttpRequest对象
if(xmlhttp == undefined ||
xmlhttp == null){
alert("当前浏览器不支持创建XMLHttpRequest对象");
return;
}
//alert(xmlhttp);
//array.push(xmlhttp.readyState);
//2.注册回调方法
xmlhttp.onreadystatechange =
callback;
//错误的写法
//xmlhttp.onreadystatechange = callback();
//获取文本框中用户输入的内容
var
email = document.getElementById("email").value;
//GET方式
//3.设置和服务器交互的相应参数
xmlhttp.open("GET", "Email?email="+email,
true, "admin", "admin");
//4.设置向服务器端发送的数据，启动和服务器的交互
xmlhttp.send(null);
//POST方式
/*
xmlhttp.open("POST", "Email",
true, "admin", "admin");
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlhttp.send("email="+email);
*/
}
//回调方法
function callback(){
//array.push(xmlhttp.readyState);
//5.判断和服务器的交互是否完成，还要判断服务器是否正确返回了数据
if(xmlhttp.readyState ==
4){
//readyState=0
表示XMLHttpRequest对象已经创建，但没有初始化(未调用open方法)
//readyState=1
表示open方法已经调用，但是没有向服务器发送数据(send方法没有调用)
//readyState=2
表示send方法被调用，服务器尚未开始接收数据
//readyState=3
表示正在接收服务器发送的数据，http响应头信息已经接收完成，响应数据尚未接收完成
//readyState=4
表示响应数据接收完成，和服务器的交互已经完成
if(xmlhttp.status ==
200){
//status=404 表示未找到
//status=500 表示服务器内部错误
//服务器的响应代码是200，表示正确返回了数据
//xmlhttp.statusText返回服务器返回的状态码的文本信息
//纯文本数据的接受方法
var msg =
xmlhttp.responseText;
//XML数据对应的DOM对象接受方法
//使用前提：要求服务器端设置
xmlhttp.setRequestHeader("Content-type", "text/xml")
//var domXml = xmlhttp.responseXML;
//向div中填充内容
var div =
document.getElementById("msg");
div.innerHTML =
msg;
//alert(array);
/*alert(xmlhttp.responseXML.documentElement);
*
判断xmlhttp.responseXML是否正确解析
*
xmlhttp.responseXML.documentElement == null ||
xmlhttp.responseXML.documentElement.nodeName != ""*/
}
}
}
</script>
</head>
<body>
<h3>163邮箱注册</h3>
邮箱名：<input id="email"
type="text"/><span id="msg" style="color: red; font-size:
12px;"></span>
<br />
<input
type="button" onclick="submit()" value="提交"/>
</body>
</html>
Servlet代码：
(Email)
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException,
IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out =
response.getWriter();
try {
String email =
request.getParameter("email");
if (email.equals("") || email ==
null) {
out.print(" 邮箱不能为空!");
} else
{
email = new String(email.getBytes("ISO8859-1"),
"UTF-8");
if (email.equals("zhanknow@163.com
")) {
out.print("
*邮箱名：[" + email + "]已经存在，请注册其它名称");
} else
{
out.print(" 恭喜你注册成功，你可以用[" + email +
"]登录了");
}
}
} finally
{
out.close();
}
}
<%--
Document : index
Created on : 2010-3-25,
12:46:06
Author : zhan
--%>
<%@page
contentType="text/html"
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>JSP Page</title>
<script
type="text/javascript">
var xmlhttp;
//var
array = [];//定义一个数组来存储XMLHttpRequest的状态
function
submit(){
///alert("Test submit().");
//1.创建XMLHttpRequest对象
if(window.XMLHttpRequest){
//IE7.0,IE8.0,FireFox,Mozilla,Safari,Opera
xmlhttp = new
XMLHttpRequest();
if(xmlhttp.overrideMineType){
xmlhttp.overrideMineType("text/xml");
}
}else if(window.ActiveXObject){
//IE5,IE5.5,IE6..
var activexName =
["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<activexName.length;i++){
try{
xmlhttp = new
ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//判断浏览器是否支持创建XMLHttpRequest对象
if(xmlhttp == undefined ||
xmlhttp == null){
alert("当前浏览器不支持创建XMLHttpRequest对象");
return;
}
//alert(xmlhttp);
//array.push(xmlhttp.readyState);
//2.注册回调方法
xmlhttp.onreadystatechange =
callback;
//错误的写法
//xmlhttp.onreadystatechange = callback();
//获取文本框中用户输入的内容
var
email = document.getElementById("email").value;
//GET方式
//3.设置和服务器交互的相应参数
xmlhttp.open("GET", "Email?email="+email,
true, "admin", "admin");
//4.设置向服务器端发送的数据，启动和服务器的交互
xmlhttp.send(null);
//POST方式
/*
xmlhttp.open("POST", "Email",
true, "admin", "admin");
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlhttp.send("email="+email);
*/
}
//回调方法
function callback(){
//array.push(xmlhttp.readyState);
//5.判断和服务器的交互是否完成，还要判断服务器是否正确返回了数据
if(xmlhttp.readyState ==
4){
//readyState=0
表示XMLHttpRequest对象已经创建，但没有初始化(未调用open方法)
//readyState=1
表示open方法已经调用，但是没有向服务器发送数据(send方法没有调用)
//readyState=2
表示send方法被调用，服务器尚未开始接收数据
//readyState=3
表示正在接收服务器发送的数据，http响应头信息已经接收完成，响应数据尚未接收完成
//readyState=4
表示响应数据接收完成，和服务器的交互已经完成
if(xmlhttp.status ==
200){
//status=404 表示未找到
//status=500 表示服务器内部错误
//服务器的响应代码是200，表示正确返回了数据
//xmlhttp.statusText返回服务器返回的状态码的文本信息
//纯文本数据的接受方法
var msg =
xmlhttp.responseText;
//XML数据对应的DOM对象接受方法
//使用前提：要求服务器端设置
xmlhttp.setRequestHeader("Content-type", "text/xml")
//var domXml = xmlhttp.responseXML;
//向div中填充内容
var div =
document.getElementById("msg");
div.innerHTML =
msg;
//alert(array);
/*alert(xmlhttp.responseXML.documentElement);
*
判断xmlhttp.responseXML是否正确解析
*
xmlhttp.responseXML.documentElement == null ||
xmlhttp.responseXML.documentElement.nodeName != ""*/
}
}
}
</script>
</head>
<body>
<h3>163邮箱注册</h3>
邮箱名：<input id="email"
type="text"/><span id="msg" style="color: red; font-size:
12px;"></span>
<br />
<input
type="button" onclick="submit()" value="提交"/>
</body>
</html>
Servlet代码：
(Email)
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException,
IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out =
response.getWriter();
try {
String email =
request.getParameter("email");
if (email.equals("") || email ==
null) {
out.print(" 邮箱不能为空!");
} else
{
email = new String(email.getBytes("ISO8859-1"),
"UTF-8");
if (email.equals("zhanknow@163.com
")) {
out.print("
*邮箱名：[" + email + "]已经存在，请注册其它名称");
} else
{
out.print(" 恭喜你注册成功，你可以用[" + email +
"]登录了");
}
}
} finally
{
out.close();
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX入门---五步使用XMLHttpRequest对象
- ajax 快速入门，ajax底层使用的五个步骤；XMLHttpRequest对象详解；XMLHttpRequest常用属性；XMLHttpRequest常用方法
- AJAX入门---五步使用XMLHttpRequest对象
- AJAX技术入门 第二节 XMLHttpRequest对象的使用
- AJAX入门---五步使用XMLHttpRequest对象
- 使用xmlhttprequest对象来进行AJAX的异步数据交互
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)
- ajax 入门基础之－－XMLHttpRequest对象总结（整理转）
- AJAX入门--- XMLHttpRequest对象的属性和方法
- 拿下AJAX(二)——XMLHttpRequest对象五步使用法
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)
- 使用XMLHttpRequest对象完成原生的AJAX请求
- ajax学习笔记-XMLHttpRequest对象的使用
- AJAX——XMLHttpRequest对象的使用
- jquery 使用$.ajax 时获取原生XMLHttpRequest 对象
- Ajax-核心对象--XMLHttpRequest 对象使用详解
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (一)
- Ajax 使用XMLHttpRequest对象发送数据和接收处理XML源代码
- Ajax入门之XMLHttpRequest核心对象的详解