使用Jquery做Ajax应用，简化了繁琐的JavaScript传统的代码书写，也便于了理解。
一下使用Jquery写的一个简单的例子：
用是：一个简单的用户注册验证的信息，AJax应用简化了传统模式的使用FROM形式提交数据，而是通过JavaScript的一个事件出发某个域中的内容提交到服务端，通过异步的形式提交，别且不影响当前也的刷新，给用户增强了友好的体验。
客户端：
<body>
<input type="text" id="username" name="username" onblur="verify()" />
<input name="check" type="button" value="检查" onclick="verify()" />
<div id="result" style="color:#ff0000;">
</div>
</body>
又两个域一个是被提交的内容域，另一个是检验的，当然了，注意：onblur="verify()" 和onclick="verify()",事件。
处理数据的JS代码用jQuery写的如下：
/**
* 定义校验
**/
function verify() {
/**
* 1、获取input 中的内容。
*/
//jQuery每个函数返回的是jQuery自己的一个对象，我们可以其上去操作一些其他的jQuery方法
// document.getElementById("username"); DOM
/**
*2、 送数据给Servlet
* 调用XMLHTTPRequest对象
* jQuery.get(url,[data],[callback],[type])
*/
$j.get("ajaxServlet?username="+$j("#username").val(),null,function(data){
//alert(data);
$j("#result").html(data);
});
/**
* 3、servlet 返回数据并接受
*/
/**
* 4、显示数据到页面上来
*/
//alert(username);
}
再看看繁琐的传统的JavaScript写的代码：
function verify() {
var username = document.getElementById("username").value;
var xhr;
if(window.XMLHttpRequest()) {
xhr = new XMLHttpRequest();
if(xhr.overrideMimeType) {
xhr.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject) {
var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0;i<activeName.length;i++) {
try {
xhr = new ActiveXObject(activeName[i]);
break;
}catch(e) {
//alert(e);
}
}
// xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//程序的健壮性
if(!xhr) {
alert("独享创建失败");
return;
}
/**
* 3servlet
*/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status==200) {
var responseText = xhr.responseText;
var divNode = document.getElementById("result");
divNode.innerHTML = responseText;
}
}
xhr.open("GET","ajaxServlet?username="+username,true);
/**
* GET方式下没有数据可以发送
*/
xhr.send(null);
/**
* 4ʾݵҳ
*/
//alert(username);
/**
* post 的写法
*/
/* xhr.onreadystatechange=function() {
if(xhr.readyState == 4 && xhr.status==200) {
var responseText = xhr.responseText;
var divNode = document.getElementById("result");
divNode.innerHTML = responseText;
}
}
xhr.open("POST","ajaxServlet",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+username);*/
}
服务端一个很简单的Servlet
package org.bestupon.ajax.servlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
/**
* Created by IntelliJ IDEA.
* User: bestupon
* Date: 2009-9-30
* Time: 11:27:29
* Email:bestupon@foxmail.com
* To change this template use File | Settings | File Templates.
*/
public class AJAXServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//处理
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String userName = request.getParameter("username");
//2检查
if(null == userName || userName.length() == 0) {
out.println("the user name not null");
}else {
//验证
String realityName = userName.trim();
if(realityName.equals("bestupon") ) {
out.println("userName["+realityName+"]already exit in system");
}else{
out.println("<input type='text' value='your very luckly the ["+realityName+"] can used for sys' />");
}
}
}
}
附件：能直接运行的项目代码：
分享到：
相关推荐
在"网页聊天jQuery异步刷新"这个实例中，我们将探讨如何结合jQuery、JavaScript和C#后端技术来创建一个简单的在线聊天系统。 首先，我们要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它的主要优点...
【标题】：“一款简单的Jquery聊天窗口” 这款前端聊天窗口设计简单易用，它主要依赖于Jquery这一...通过以上知识点的解释，我们可以理解这款Jquery聊天窗口是如何利用现有技术实现一个简单但功能完整的聊天体验的。
【jQuery精美聊天窗口】是一个基于HTML5和jQuery技术构建的交互式聊天窗口，它以其出色的视觉效果和良好的用户体验而受到赞誉。在这个项目中，开发者利用了HTML5的新特性以及jQuery的强大功能，创建了一个功能丰富、...
综上所述，"jquery右下角浮动窗口"项目涵盖了jQuery基本操作、CSS布局与样式控制、动态数据展示、用户交互以及响应式设计等多个方面，是学习和实践前端开发技术的一个良好实例。通过理解和实现这样的项目，开发者...
在Java Web开发中，"子窗口与父窗口刷新"是一个常见的交互场景，特别是在构建多层级界面或模态对话框时。这里的"子窗口"通常指的是弹出的窗口、框架或者iframe，而"父窗口"则是打开子窗口的那个主页面。在这样的场景...
标题 "用JQuery和JQuery UI实现的一个简单login例子" 提供了我们即将探讨的核心内容，即使用JQuery和JQuery UI库来构建一个登录（login）界面。JQuery是JavaScript的一个库，它简化了HTML文档遍历、事件处理、动画...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的操作，包括创建动态和交互式的用户界面。本篇文章将深入探讨 jQuery 中的弹出窗口功能，以及如何利用 AJAX 进行数据异步加载。...
在网页设计中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的使用，尤其是在处理DOM操作、事件处理和动画效果等方面。"jquery点击弹出登陆窗口"是一个常见的需求，尤其在许多网站上，用户需要...
总的来说，jQuery弹出登录表单窗口插件是一个实用的工具，它利用jQuery的强大功能和灵活性，提供了一种高效、优雅的方式来处理用户登录。通过理解和掌握这些知识点，开发者可以创建出更符合用户需求的交互式表单，...
此例子"一个采用AJAX (ASP.NET 2.0)实现子窗体关闭父窗体异步刷新程序"就是针对这一目标设计的，它探讨了如何在ASP.NET 2.0环境中通过AJAX技术实现在子窗口关闭时，条件性地刷新父窗口的部分内容。 首先，我们需要...
8. **Ajax交互**：一旦用户提交订阅信息，代码可能会使用jQuery的Ajax功能异步发送数据到服务器，避免页面刷新，提供更流畅的用户体验。Ajax请求可以处理订阅的注册过程，包括错误处理和成功反馈。 9. **前端模板**...
本文将深入探讨如何使用jQuery库来实现一个带有遮罩效果的步骤流程窗口，让用户能够按照预设的步骤顺序进行操作。这种功能常见于注册、购物结算等需要用户填写多步信息的场景。 首先，我们需要理解jQuery的基本概念...
"js/jquery伸缩窗口菜单"是一个专为网上商城设计的组件，它允许用户在不同屏幕尺寸下方便地浏览和操作菜单。这种菜单设计尤其适用于响应式布局，能够根据窗口大小自动调整，确保在手机、平板电脑和桌面设备上都能...
本教程将探讨如何使用jQuery和Ajax技术实现一个简单的模态窗口，以展示如何在支付宝或淘宝等电子商务网站中实现类似的弹出窗口特效。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、...
4. **AJAX请求**：为了实现无刷新的登录和注册，开发者通常会使用jQuery的`.ajax()`方法发送异步请求到服务器，处理用户数据。这样，即使在处理用户信息时，页面也不会失去响应。 5. **动画效果**：jQuery的动画...
这个脚本可能包含一个使用Ajax技术的函数，以异步方式向服务器发送文件数据。Ajax（Asynchronous JavaScript and XML）使得我们可以发送后台请求，处理响应，而无需重新加载整个页面，极大地提升了用户体验。 异步...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本教程将深入讲解如何利用jQuery和Ajax技术来模拟关闭div窗口的效果，同时更新后台数据库...