下面就ajax入门做了一个简单的实例：
下面我们就开始吧
第一步：导入我们需要的jqurery.js在这里和我们myeclipse中有所不同需要我们去到工程的目录下把jqurery.js复制在我们在web目录新建的jslib目录中，这个目录用来存放我们的.js文件 就是javascript脚本 jqurery.js封装了许多的js我们只需去调用就行
第二步：编写一个Servlet 在src目录中新建一个AJAXServer
public class AJAXServer extends HttpServlet{
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try{
// request.setCharacterEncoding("UTF-8");
// response.setContentType("text/html;charset=gb18030");
httpServletResponse.setContentType("text/html;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
int temp = 0;
if (inte == null) {
temp = 1;
} else {
temp = inte.intValue() + 1;
}
httpServletRequest.getSession().setAttribute("total",temp);
//1.取参数
String old = httpServletRequest.getParameter("name");
//String name = new String(old.getBytes("iso8859-1"),"UTF-8");
String name=null;
if(!old.equals("") && (old != null))
{
name = URLDecoder.decode(old,"UTF-8");
}
//2.检查参数是否有问题
if(old == null || old.length() == 0){
out.println("用户名不能为空");
} else{
// String name = URLDecoder.decode(old,"UTF-8");
// byte[] by = old.getBytes("ISO8859-1");
// String name = new String(by,"utf-8");
// String name = URLDecoder.decode(old,"utf-8");
//3.校验操作
// String name = old;
if(name.equals("liyong")){
//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
//写法没有变化，本质发生了改变
out.println("用户名[" + name + "]已经存在，请使用其他用户名, " + temp);
} else{
out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp);
}
}
} catch(Exception e){
e.printStackTrace();
}
}
}
第三步：编写一个ajax.html提供用户提交数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify1.js"></script>
</head>
<body>
ajax验证输入用户名：<br/>
<input type="text" id="userName" >
<input type="button" value="校验" onclick="verify()">
<div id="result"></div>
</body>
</html>
第四步：编写上面需要的verify() js函数
//定义用户名校验
function verify()
{
//通过ID找到这个节点
var jQuryObj=$("#userName");
//获取这个节点属性值
var username=jQuryObj.val();
//使用jQuery的XMLHTTPrequest对象的get请求的封装，代码运行到这里会继续向下运行
//当服务器有数据返回的时候就去回调这个回调函数callback这里必须是函数名不能带有参数
$.get("AJAXServer?name="+username,null,callback);
// alert(username);
}
function callback(data)
{
//alert("服务器数据返回");
//alert(data);
var resultObj=$("#result");
resultObj.html(data)
}
第五步：部署运行...
分享到：
相关推荐
jquery开发ajax入门实例 jquery开发ajax入门实例 jquery开发ajax入门实例
jQuery经典入门教程
MVCAJAX用JQUERY调用实例例子 一个简单的入门例子 MVC下用JQUERY调用AJAX并用JSON返回输入的值
它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。 内容提要 安装 Hello jQuery...
jquery 做的一个 Ajax实例.
jQuery好像就是为web编程而生的，其强大的选择器能给开发人员带来畅快的体验。在dom操作、事件和ajax编程方面确实很不错
jQuery中文入门指南，翻译加实例，jQuery的起点教程
这是一份让你可以了解到JavaWeb开发中jquery（它是当前非常流行的javascript库）如何在不同页面中传数据，如何使用ajax进行数据初始化，对于初学javascript的同学是非常不错的入门代码实例。
JQuery全教程快速入门+库文件+实例,说明和教程都很详细，里面还附带库文件和效果功能实例，是个快速学习JQuery的好东西！
jQuery初学实例代码集，很多的示例，包括一些弹出信息框、无刷新提交、更改字体、颜色选择器、下拉列表操作、无刷新读取数据数据库、层收缩和弹出、一些鼠标特效、导步获取数据、无刷新更改样式表、表格颜色控件等，...
共有16个ajax开发实例，可以让你快速了解和使用ajax技术。
jquery $.ajax的应用实例
这个指南是一个对jQuery库的说明...它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。
虽然jQuery使用简单，但它毕竟是一门新的技术，与传统的JavaScript在性能与语法上存在诸多差异，需要相应的书籍来引导开发者们迅速而有效地掌握它，并能真正付诸实践。综观现在已经出版的中文类jQuery图书，不是...
JQuery API 中文入门指南，翻译加实例，jQuery的起点教程
在此基础之上，《精通JavaScript+jQuery(1CD)》通过精彩的实例详细讲解了jQuery的相关技术，主要包括jQuery的基础、如何使用jQuery控制页面、制作动画与特效、简化Ajax以及jQuery插件等内容。讲解的重点在于简化...
代码中用到了较多的jQuery和部分Ajax（借助jQuery实现），在阅读代码的时候如果不熟悉jQuery和Ajax的话，还是先去稍微学习几个入门实例较好。 二、运行方式： a. 创建数据库:我用的是MySQL 5.1版本，不同版本之间...
《JavaScript从入门到精通》附带的ppt 《JavaScript从入门到精通》从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用JavaScript语言进行程序开发应该掌握的各方面技术。全书共分24章，包括初识...