最近刚做完了个项目，时间一下变得多了起来，就想学点东西， 在做项目过程中觉得JS确实强大，就准备深入学习一下，刚跑通的Ajax例子，里面运用到了JQuery。
1、首先编写客户端index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax初探</title>
<script type="text/javascript" src="jslib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
检验用户名是否存在的例子<br/>
用户名：<input type="text" id="name">
<input type="submit" value="校验" onclick="verify()">
<div id="result"></div>
</body>
</html>
2.服务器端用的是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 ClassicServer extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
response.setContentType("text/html;charset=gb2312");
try{
PrintWriter out=response.getWriter();
String old =request.getParameter("name");
if(old==null||old.length()==0){
out.println("用户名不能为空");
}else{
String name=old;
if(name.equals("yanzhenwei")){
out.println("用户名["+name+"]已经存在，请换个名字");
}else{
out.println("用户名["+name+"]尚未存在，可以使用");
}
}
// out.println("<br/><a href=\"../index.html\">返回上一级</a>");
}catch(Exception e){
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
doGet(request,response);
}
}
3. ajax最核心的东西js
function verify(){
var jqueryObj=$("#name");//用JQuery获得html中id为name的对象
var userName=jqueryObj.val();//获得name的值
$.get("servlet/ClassicServer?name=" + userName,null,callback);//用Jquery的get方式向指定的Servlet传参数name,并定义callback函数
}
function callback(data){
var resultObj=$("#result");//获得id为result的节点
resultObj.html(data);//将服务器端传过来的数据放在该节点显示
}
4.小结
这个例子主要是用一个页面输入一个字符串，然后用js得到里面所输入的值，然后用js控制将该字符串传给服务器端的servlet,并接收来自服务器端传过来的信息显示在客户端，整个过程页面都没有跳转，这就是Ajax。
以下是我的小程序。
分享到：
相关推荐
这个教程将通过以上10个经典例子，结合实际的数据库文件，让你亲手实践，深入理解Ajax的用法和功能，从而快速上手Ajax开发。每个例子都将涵盖Ajax请求的创建、数据处理和页面更新等多个环节，确保你在实践中掌握Ajax...
在本项目中，"ASP 实用的ajax二级联动菜单"是一个结合了这两种技术的应用，旨在创建一个响应快速、交互流畅的二级菜单系统。 在ASP中，我们通常会使用VBScript或JScript作为脚本语言来处理服务器端逻辑。在这个案例...
这个例子是一个简单的Ajax实现，适合初学者理解Ajax的工作原理。下面我们将详细解析这个例子中的关键知识点。 首先，我们看到一个名为`First.html`的HTML文件，其中包含了一个JavaScript函数`createXmlHttp()`。这...
Ajax中文手册是为开发者提供的一份详细指南，旨在帮助初学者快速掌握Ajax的核心概念、使用方法以及相关API。这份手册以.chm（Microsoft编写的帮助文档格式）呈现，方便用户离线查阅。 Ajax的核心特性在于异步性，它...
**Ajax技术详解** ...通过这个视频教程，学习者不仅可以理解Ajax的工作原理，还能掌握实际应用技巧，为就业做好准备。同时，由于文件过大，采用百度网盘分享，便于学员下载和观看，解决了大文件传输的问题。
### 快速学习AJAX的关键知识点 #### 一、AJAX概述 - **定义**：AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以实现网页的部分更新，...
**二、Ajax工作流程** 1. **创建XMLHttpRequest对象**：在JavaScript中，通过`new XMLHttpRequest()`创建一个XMLHttpRequest实例。 2. **初始化请求**：调用`open()`方法，设置请求类型（GET、POST等）、URL和是否...
在快速上手Ajax的过程中，有几个关键知识点是必须掌握的： 1. **JavaScript基础**：Ajax的核心是JavaScript，因此熟悉JavaScript语法和DOM操作是必不可少的。你需要了解如何创建和执行JavaScript函数，以及如何通过...
在“四天学会Ajax 快速上手”的课程中，你将了解到以下关键知识点： 1. **XMLHttpRequest对象**：这是Ajax的基础，用于在后台与服务器进行通信。通过这个对象，你可以发送HTTP请求并接收响应，而不会中断用户的界面...
《深入理解Ajax基于JavaScript的RIA开发》是一本专注于Web开发技术的专业书籍，其配书源码包含了一系列实际的示例和实践项目，旨在帮助读者深入掌握Ajax和基于JavaScript的富互联网应用（Rich Internet Applications...
本AjaxDEMO适合初学者学习，旨在提供一个基础的实践平台，帮助理解Ajax的工作原理及其在实际开发中的应用。** ### 1. Ajax基础知识 Ajax的核心是JavaScript对象XMLHttpRequest，它允许在后台与服务器端通信。当...
本资料《理解Ajax：用Javascript构建Web程序》将深入探讨这一技术。 **JavaScript**是实现Ajax的核心，是一种广泛用于客户端的脚本语言，主要在浏览器环境中运行。JavaScript允许开发者动态地修改HTML文档、处理...
这份资料可能帮助开发者快速上手Ajax开发，理解如何创建异步请求，如何处理服务器响应，以及如何在实际项目中应用Ajax技术。 学习Ajax和JavaScript，不仅需要掌握基本的语法和API，还需要对HTTP协议、DOM操作有深入...
软件开发这个领域，永远都在飞速发展，大家都必须不断的学习新的知识、 技能、框架、IDE、甚至新的语言。传说中的骨灰级高手们，就像传说中的大侠， ...希望这本书，能够对大家快速学习AJAX，有所帮助。
5. **Ajax请求的生命周期**：理解Ajax请求从创建到完成的整个过程，包括打开连接、发送请求、接收响应和处理结果等步骤，是编写高效Ajax代码的关键。 6. **Ajax库与框架**：除了原生的XMLHttpRequest，许多开发者会...
AJAX框架是为了简化AJAX开发而设计的工具，它们提供了一套封装好的API，帮助开发者快速、便捷地构建具有AJAX功能的应用。这些框架可以处理与服务器的通信、数据解析、错误处理等复杂任务，让开发者能够专注于应用...
1. **基础概念**：首先，你需要理解Ajax的基本工作原理，包括它如何利用JavaScript发送异步请求到服务器，并处理响应数据。 2. **XMLHttpRequest对象**：Ajax的核心是XMLHttpRequest（XHR）对象，它是JavaScript的...
- `AJAX开发精要源码sourcecode`：书中提供的源码示例，可以帮助读者理解Ajax的实现细节，通过实践加深理解。 总之，《Ajax开发精要》是一本全面介绍Ajax技术的书籍，结合实际案例和源码分析，有助于初学者快速...
**Ajax技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。这种技术结合了JavaScript、XML、DOM、CSS...在开发过程中，理解并熟练运用Ajax技术至关重要。