js实现ajax的示例
2012-07-15 15:58
351 查看
首先准备一个HTML页面，命名为ajax.html。并在其中添加以下内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>itcast.cn用户名校验ajax实例</title>
<script type="text/javascript" src="jsfile/validation.js"></script>
</head>
<body>
用户名校验的ajax实例，请输入用户名： <br/>
<input type="text" id="userName" />
<input type="button" value="校验" onclick="verify()"/>
<div id="result"></div>
</body>
</html>
接下来创建关键的实现ajax的js文件validation.js.实现ajax关键步骤有5个：
1.创建XMLHttpRequest对象。
2.注册回调函数。
3.设置连接信息。
4.发送数据，开始和服务器端进行交互。
5.接收响应数据。
具体代码如下：
//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify() {
//0。使用dom的方式获取文本框中的值
var userName = document.getElementById("userName").value;
//1.创建XMLHttpRequest对象
//这是XMLHttpReuquest对象无部使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
if (window.XMLHttpRequest) {
//针对FireFox，Mozillar，IE7，IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
//确认XMLHTtpRequest对象创建成功
if (!xmlhttp) {
alert("XMLHttpRequest对象创建失败!!");
return;
} else {
alert(xmlhttp.readyState);
}
//2.注册回调函数
//注册回调函数时，之需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
xmlhttp.onreadystatechange = callback;
//3。设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
//POST方式请求的代码
//xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自己设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
//xmlhttp.send("name=" + userName);
//4.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器段数据回来后才执行完
//异步方式下，send这句话会立即完成执行
xmlhttp.send(null);
}
//回调函数
function callback() {
alert(xmlhttp.readyState);
//5。接收响应数据
//判断对象的状态是交互完成
if (xmlhttp.readyState == 4) {
//判断http的交互是否成功
if (xmlhttp.status == 200) {
//获取服务漆器端返回的数据
//获取服务器段输出的纯文本数据
var responseText = xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseText;
} else {
alert("error！！！");
}
}
}
接下来创建AJAXServer.java
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 AJAXServer extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
try {
resp.setContentType("text/xml;charset=utf-8");
PrintWriter out = resp.getWriter();
// 1.取参数
String old = req.getParameter("name");
StringBuilder builder = new StringBuilder();
builder.append("<message>");
// 2.检查参数是否有问题
if (old == null || old.length() == 0) {
builder.append("用户名不能为空").append("</message>");
} else {
// 3.校验操作
String name = old;
if (name.equals("wangxingkui")) {
// 4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户（或者MVC中的
// VIEW）
// 写法没有变化，本质发生了改变
builder.append("用户名[" + name + "]已经存在，请使用其他用户名").append(
"</message>");
} else {
builder.append("用户名[" + name + "]尚未存在，可以使用该用户名注册").append(
"</message>");
}
out.println(builder.toString());
System.out.println(builder.toString());
}
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
最后在web.XML中配置：
<servlet>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>AJAXServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/AJAXServer</url-pattern>
</servlet-mapping>
最后在tomcat中部署，并访问。就可以一天自己实现的AJAX了。
下载源码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>itcast.cn用户名校验ajax实例</title>
<script type="text/javascript" src="jsfile/validation.js"></script>
</head>
<body>
用户名校验的ajax实例，请输入用户名： <br/>
<input type="text" id="userName" />
<input type="button" value="校验" onclick="verify()"/>
<div id="result"></div>
</body>
</html>
接下来创建关键的实现ajax的js文件validation.js.实现ajax关键步骤有5个：
1.创建XMLHttpRequest对象。
2.注册回调函数。
3.设置连接信息。
4.发送数据，开始和服务器端进行交互。
5.接收响应数据。
具体代码如下：
//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify() {
//0。使用dom的方式获取文本框中的值
var userName = document.getElementById("userName").value;
//1.创建XMLHttpRequest对象
//这是XMLHttpReuquest对象无部使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
if (window.XMLHttpRequest) {
//针对FireFox，Mozillar，IE7，IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
//确认XMLHTtpRequest对象创建成功
if (!xmlhttp) {
alert("XMLHttpRequest对象创建失败!!");
return;
} else {
alert(xmlhttp.readyState);
}
//2.注册回调函数
//注册回调函数时，之需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
xmlhttp.onreadystatechange = callback;
//3。设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
//POST方式请求的代码
//xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自己设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
//xmlhttp.send("name=" + userName);
//4.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器段数据回来后才执行完
//异步方式下，send这句话会立即完成执行
xmlhttp.send(null);
}
//回调函数
function callback() {
alert(xmlhttp.readyState);
//5。接收响应数据
//判断对象的状态是交互完成
if (xmlhttp.readyState == 4) {
//判断http的交互是否成功
if (xmlhttp.status == 200) {
//获取服务漆器端返回的数据
//获取服务器段输出的纯文本数据
var responseText = xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseText;
} else {
alert("error！！！");
}
}
}
接下来创建AJAXServer.java
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 AJAXServer extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
try {
resp.setContentType("text/xml;charset=utf-8");
PrintWriter out = resp.getWriter();
// 1.取参数
String old = req.getParameter("name");
StringBuilder builder = new StringBuilder();
builder.append("<message>");
// 2.检查参数是否有问题
if (old == null || old.length() == 0) {
builder.append("用户名不能为空").append("</message>");
} else {
// 3.校验操作
String name = old;
if (name.equals("wangxingkui")) {
// 4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户（或者MVC中的
// VIEW）
// 写法没有变化，本质发生了改变
builder.append("用户名[" + name + "]已经存在，请使用其他用户名").append(
"</message>");
} else {
builder.append("用户名[" + name + "]尚未存在，可以使用该用户名注册").append(
"</message>");
}
out.println(builder.toString());
System.out.println(builder.toString());
}
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
最后在web.XML中配置：
<servlet>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>AJAXServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/AJAXServer</url-pattern>
</servlet-mapping>
最后在tomcat中部署，并访问。就可以一天自己实现的AJAX了。
下载源码
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用AjaxFileUpload.js实现异步文件上传示例
- 原生JS实现Ajax通过GET方式与PHP进行交互操作示例
- prototype.js简单实现ajax功能示例
- 原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
- 使用AjaxFileUpload.js实现异步文件上传示例
- 原生JS简单实现ajax的方法示例
- d3.js实现自定义多y轴折线图的示例代码
- js基本ajax写法示例代码
- JS实现的简单拖拽购物车功能示例【附源码下载】
- JS实现的论坛Ajax打分效果完整实例
- Jquery揭秘系列:ajax原生js实现详解(推荐)
- 不用AJAX实现前台JS调用后台C#方法(小技巧)
- SpringMVC结合ajaxfileupload.js实现文件无刷新上传
- js实现动态添加、删除行、onkeyup表格求和示例
- js使用ajax读博客rss示例
- 使用js和AJAX实现的异步请求
- js zend framework 实现ajax
- 回车执行js函数实现ajax调用
- ajaxfileupload.js 实现异步上传图片
- js + ajax实现自动刷新界面或局部刷新