千言万语也无法详尽的描述ajax的魅力,那就先下水试试吧(临渊羡鱼,不如退而结网)
下面就结合这样一个案例来体验一下,需求是:用ajax实现网站用户唯一性校验。描述如下:
1.打开一个网站页面,输入用户名,点击校验按钮。
2.系统收到信息后进行比较判断,如果存在,则在当前页面提示“用户帐户信息已存在”,否则,提示“用户帐户可用”。
这里,客户端就要用到ajax,服务器我们用Servlet来实现。
首先,设计一个html页面,命名为accountCheck.html,具体代码见附件
其中,页面上有一个输入框,名称叫做accountNo,在输入框的旁边有一个div标签,它是做什么的呢?对了,它就是用于动态的显示我们的提示信息用的.按照web开发的原理,要想触发实践,在我们的实例中必须在按钮上加上onclick事件触发动作,而当单击事件发生后,则去执行我们的js函数checkAccount()(是不是弱智了点啊,觉得土的话,接着往下看,下面就是传说中的javascript
)
<script>
var http_request;
/*按钮点击时触发checkAccount函数*/
function checkAccount(){
var account = document.getElementById("accountNo");
var serverUrl = "CheckAccountServlet";
var requestMethod = "post";
var requestData = "account="+account.value;
sendRequestByAjax(requestMethod,serverUrl,requestData,doResponse);
}
/*具体负责处理服务器返回数据的函数*/
function doResponse(){
//当服务器将数据返回给客户端时,readyState状态值为4
if(http_request.readyState==4){
//当服务器返回的数据是正常的数据时,status状态值为200
if(http_request.status==200){
//通过XMLHttpRequest对象的responseText属性获取
//服务器返回的文本信息
var returnMsg = http_request.responseText;
showMessage(returnMsg);
}
}
}
/*用ajax方式发送数据到url指定的服务器地址上*/
function sendRequestByAjax(method,url,data,dataHandler){
//获取XMLHttpRequest对象
http_request = getAjaxObject();
//设置当服务器数据返回后,处理服务器返回数据的js函数
//这里处理函数名称是以参数形式给出
http_request.onreadystatechange = dataHandler;
//与指定的url地址建立连接
//第一个参数可以选择传递为Post或者Get,表示请求方式
//第二个参数表示请求的服务器地址
//第三个参数如果为true,表示只有建立连接成功后才执行后面的js代码
//如果为false,则相反
http_request.open(method,url,true);
//如果是以post方式发送数据,则必须加上如下代码,否则服务器将会收不到数据
//setRequestHeader("Content-Type","application/x-www-form-urlencoded");
if("post"==method.toLowerCase()){
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
//真正发送数据
//如果method指定是Get方式发送数据,则这里send函数参数data=null
//如果method指定是Post方式发送数据,则这里send函数参数
//具体的数据data(参数data的数据格式为:name=zhang&money=10000)
http_request.send(data);
}
/*
*最终目的只有一个,就是获得XMLHttpRequest对象(只有有了它以后,
*才能以ajax方式发送请求数据)
*函数内部的实现代码是为了兼容不同浏览器类型
*/
function getAjaxObject(){
var xmlHttpRequest;
if(window.XMLHttpRequest){//Mozilla,IE7.0
xmlHttpRequest = new XMLHttpRequest();
if(xmlHttpRequest.overrideMimeType){
xmlHttpRequest.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){//IE
try{
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
return xmlHttpRequest;
}
/*显示服务器返回的信息到div标记中*/
function showMessage(message){
//根据id获取div元素对象
var msgDiv = document.getElementById("msg");
//通过设置div元素的innerHTML属性来完成信息的显示
msgDiv.innerHTML = message;
}
</script>
够你看的了吧,慢慢看,每一个函数都有详细的注释,希望你能成为ajax高手.
哦,你已经看懂了吗?如果看懂了,把如上代码copy到accountCheck.html的标签之内,至此客户端的代码已经ok.
接下来,我们再来看看服务器端代码如何编写,前文已经说过,服务器端我们用Servlet来实现.具体代码如下:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
/**
* The doPost method of the servlet.
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取客户端请求帐户数据
String accountNo = request.getParameter("account");
//如果输出信息中包含中文信息,则需要设置字符集编码为gb2312
//否则,客户端收到的信息将会是乱码
response.setContentType("text/html;charset=gb2312");
//设置响应报文头,使浏览器不做数据缓存
response.setHeader("Cache-Control","no-cache");
PrintWriter out = response.getWriter();
if("zhangsan".equalsIgnoreCase(accountNo)){
out.println("用户帐户信息已存在");
}else{
out.println("用户帐户可用");
}
//信息输出完成后,关闭输出流
out.close();
}
OK,现在我们终于可以歇口气来看看我们的成果啦.我将本文的全部代码以附件的形式附上,望大家测试评判!
分享到:
- 2007-05-23 00:10
- 浏览 3272
- 评论(5)
- 论坛回复 / 浏览 (3 / 7116)
- 查看更多
相关推荐
AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件
ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效
ajax ajax原理 ajax代码 ajax编程 ajax学习
ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件...
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码
ajax上传ajax上传ajax上传ajax上传ajax上传
ajax 分页ajax 分页ajax 分页
AJAX实战AJAX实战AJAX实战AJAX实战AJAX实战AJAX实战AJAX实战AJAX实战
ajax 宝典 ajax 宝典 ajax 宝典 ajax 宝典
three ajax ajax ajaxthreethree ajax ajax ajax ajax ajax ajax three ajax ajax ajax
Ajax组件Ajax组件Ajax组件Ajax组件
Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包
json ajax ajax框架 json ajax ajax框架
AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。 国 [使用ajax 构建应用程序] 使用ajax 构建应用程序 内翻译常为“阿贾克斯”和阿贾克斯足球队同音。Web应用的交互如Flickr,Backpack和...
关于Ajax的常见面试题 1,Ajax和javascript的区别? javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。 Javascript是由...
AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码AJAX 源码
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术,从基础知识到高级应用,全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括: 1. Ajax 概述:本书首先介绍了 Ajax 的概念、...