`
HelloSure
  • 浏览: 310881 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Ajax基础与jQuery的Ajax实现

阅读更多
典型的AJAX流程见附件图


细分为以下几个步骤:
– 发生一个客户端事件
– 创建一个XMLHttpRequest对象
– 使用XMLHttpRequest对象发送请求
– 服务器接收请求并进行处理
– 服务器返回结果
– XMLHttpRequest对象调用callback()函数处理结果
– 更新HTML DOM

一个简单的例子
客户端HTML文件代码:
<html>
<body>
<script type="text/javascript">
function ajaxFunction(){
 var xmlHttp;
 try{
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
 }
 catch (e){
  // Internet Explorer
   try{
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e){
      try{
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e){
         alert("您的浏览器不支持AJAX!");
         return false;
      }
   }
 }
	
  //以上是创建一个XMLHttpRequest对象
  //下面这个function是回调函数
  xmlHttp.onreadystatechange=function(){
     //readyState为4表示服务器处理完成
      if(xmlHttp.readyState==4){
        //通过DOM修改页面的显示
         //返回的数据存在responseText中
         document.myForm.time.value=xmlHttp.responseText;
     }
   }
   //建立请求
   xmlHttp.open("GET","time.asp",true);
   //发送请求
   xmlHttp.send(null);	
 }
</script>
<form name="myForm">                             //触发ajax
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
</body>
</html>

服务器端
<%
response.expires=-1
response.write(time)
%>


$.ajax(options)的用法
这个是jQuery 的底层 Ajax 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。
注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。当设置 datatype 类型为 'script' 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。

示例代码:
$.ajax({
	type: "GET",
	url: rootURI + "/login",
	data:{'username' : username, 
               'password' : password},
	complete: checkLoginStatus
});


后台处理代码
public void login() {
	if (result.isSuccess()) {
		...
	} else {
		putJSON("user_not_exist_or_incorrect_password");
	}
}


putJSON(String data){
	ServletActionContext.getResponse().setCharacterEncoding("utf-8");
	ServletActionContext.getResponse().setContentType("application/json;charset=UTF-8");
	PrintWriter out = ActionUtil.getResponse().getWriter();
	out.print(data);
}


前台回调函数
function checkLoginStatus(data){
	if (data.status != 200) {
		alert('登陆出错,请稍后再试');
		return;
	}
	if (data.responseText == "incorrect_code") {
		alert('验证码错误');
	} else if (data.responseText == "user_not_exist_or_incorrect_password") {
		alert('无此用户名或密码错误');
	} else {
		location.href = rootURI + '/admin/index.jsp';
	}
}
  • 大小: 25.7 KB
1
20
分享到:
评论
1 楼 gly0920sky520123 2012-09-12  

相关推荐

    利用Ajax+Jquery实现异步进度条效果

    "利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开,它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先,C#是一种面向对象的编程语言,广泛应用于...

    ajax与jquery实现的简单验证实例

    这个“ajax与jquery实现的简单验证实例”着重于如何利用这两种技术进行前端数据验证,提高用户体验,减少不必要的服务器交互。在这个实例中,我们将探讨Ajax的核心概念,jQuery库的优势,以及它们如何结合实现表单...

    Ajax+JQuery应用Demo

    工作之余写的一些Ajax应用,有6个Demo,数据库为mysql,使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。

    Ajax和Jquery实现谷歌百度搜索下来提示

    在实现Ajax功能时,jQuery 提供了一套简洁的 API,使得开发者可以方便地发起Ajax请求,处理响应数据。 **谷歌百度搜索下拉提示实现** 在"谷歌百度搜索下来提示"的项目中,我们可能需要模仿谷歌和百度搜索引擎在...

    Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记

    本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入提示功能。这种功能能够显著提升用户的交互体验,尤其是在需要大量数据检索的应用场景下。 #### 背景技术及术语解释 - **JQuery**:...

    Ajax里jQuery的ajax与ssh集成

    当我们谈论Ajax与jQuery的ajax方法与SSH框架的集成时,实际上是在讨论如何在前端使用jQuery的Ajax功能与后端SSH框架进行通信,实现数据的无刷新交互。 首先,jQuery的`$.ajax()`方法是核心工具,它允许我们发起异步...

    Ajax + JQuery 实现无刷新效果

    Ajax(异步JavaScript和XML)技术是实现这一目标的关键工具之一,而jQuery库则通过简化JavaScript的复杂性,让开发者更容易地利用Ajax功能。本篇文章将深入探讨如何结合Ajax和jQuery来实现无刷新效果。 首先,Ajax...

    简单AJAX jquery实现

    在这个"简单AJAX jquery实现"的项目中,我们将探讨如何使用jQuery来实现AJAX请求。 首先,我们需要了解jQuery中的AJAX核心函数`$.ajax()`. 这个函数提供了一种灵活的方式来进行异步数据请求。它的基本语法如下: `...

    Ajax和Jquery基础入门视频(源码和课件)

    这个“Ajax和Jquery基础入门视频”压缩包包含的源码和课件,显然是为了帮助初学者快速掌握这两项技术的精髓。 首先,让我们详细了解一下Ajax。Ajax的核心在于无需刷新整个页面就能实现部分数据的更新,通过...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    Jquery跨域Ajax请求测试

    本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...

    jQuery-ajax-用户名异步请求

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...

    有ajax,jquery实现tab效果

    Ajax(Asynchronous JavaScript and XML)和jQuery是实现这种效果的常用技术。Ajax可以实现页面的异步更新,而jQuery则提供了一套简洁易用的JavaScript库,使得DOM操作、事件处理和动画效果更为简便。 Ajax的核心...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    **jQueryPager:基于JQuery的Ajax分页插件Pagination实现** 在Web开发中,当数据量庞大时,分页是一种常见的优化用户体验的方式。jQueryPager是一款轻量级的jQuery分页插件,它允许开发者通过Ajax无刷新的方式实现...

    Ajax(jQuery实现例子)

    Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子)

    jQuery-ajax-json实现自动轮播图.rar

    本教程将介绍如何利用jQuery、ajax和json技术来实现一个自动轮播图的功能。jQuery是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理和Ajax交互;ajax用于异步数据传输,使页面无需刷新即可获取新数据;...

    jQuery的Ajax实现异步传输List、Map

    本话题将深入探讨如何使用jQuery的Ajax功能实现异步传输List和Map类型的数据,同时涉及JSON数据格式的使用。 首先,让我们了解JSON(JavaScript Object Notation),它是轻量级的数据交换格式,易于人阅读和编写,...

    资料大全 09AJAX与JQuery.rar

    标题"资料大全 09AJAX与JQuery.rar"明确指出,这个压缩包包含的是关于AJAX(异步JavaScript和XML)和JQuery的相关学习资料。AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。而JQuery是一个广泛...

    ajax、javascript、jquery详细课件

    综上所述,这个课件将涵盖Ajax的基本概念和实现,JavaScript的基础知识和应用,jQuery库的使用,特别是其在表单验证和Ajax交互方面的功能。学习者可以通过这个课件深入理解这三者之间的关系,提升Web开发中的动态...

    springmvc利用jquery实现ajax的例子

    在本示例中,我们将探讨如何使用Spring MVC框架与jQuery库结合实现Ajax功能。Spring MVC是Spring框架的一部分,专门用于构建Web应用程序,而jQuery则是一个强大的JavaScript库,简化了DOM操作、事件处理以及异步HTTP...

Global site tag (gtag.js) - Google Analytics