`
cyber4cn
  • 浏览: 39205 次
社区版块
存档分类
最新评论

JS 框架使用及迁移(三)-Ajax调用改造

阅读更多
[size=large]ajax 改造及其他
在现在的前端应用中,ajax 调用是相当重要的一环。在 ajax 的调用上。不过还是有一些值得注意并加以分辨的地方。
先看两段代码:
第一段 Prototype:
document.observe('dom:loaded', function(){
	$("btnok").observe('click', function(){
		clickButton();
	});
});

function clickButton() { 
	var url = '/user/info.php';
	var pars = "uid=1&r="+Math.random();
	var ajax = new Ajax.Request(url,{
		method:'get',
		parameters:pars,
		onSuccess:function(data)
		{
			callbackfunc(data);
		},
	});
}
function callbackfunc(data)
{
	console.log(data.responseText.evalJSON());
	alert("SUCCESS");
}


第二段:jQuery
$j(document).ready(function(){
	$j("#btnok").click(function(){
		clickButton();
	});
});

function clickButton() {
	$j.ajax({
		url:'/user/info.php',
		data:{uid:2, r:Math.random()},
		type:'get',
		success:function(json){
			callbackfunc(json);
		},
		dataType:'json'
	});
 
}
function callbackfunc(data) 
{
	console.log(data);
	alert("SUCCESS");
}


这两段代码,分别演示了 Prototype 和 jQuery 中的ajax 的 get 调用。从代码上,可以看出,两段代码大同小异。
都分别有 url, 参数,回调函数等。光从这两段上,还看不出 jQuery 的优势,从个人的经验来看,就是用习惯了 jQuery 之后, new Ajax.Request 这样的调用,很容易忘记。而习惯在 Prototype 中也写成 Ajax.Request。
事实上,jQuery 为我们提供了更为简便的方法,比如上面的 clickButton 函数,可能简单地改造为:
var url = '/user/info.php';
	var params = {
		uid:1,
		r:Math.random()
	};
	$j.get(url,params,callbackfunc,'json');


甚至写成一行就可以了。
$j.get('/user/info.php', {uid:1, r:Math.random}, callbackfunc, 'json');

同理,也提供了 $j.post 方法。
这是多么地精巧啊。

在其他的应用中,始终要明确的是,由于 jQuery 对选择器取回来的对象进行了封装,
所以取属性时,设置属性时都得用 attr 方法,如果忘记了这点,直接调用原生属性 ,也不会出错,就是出不来结果。
而 Prototype 取回来的对象,直接调用原生的属性就成了。比如设置照片的 src 。
jQuery :
$j("#img").attr("src", url);

Prototype:
$("img").src = url;

[/size]
分享到:
评论

相关推荐

    Laravel开发-salao-gerencial-ajax

    【Laravel开发-salao-gerencial-ajax】项目是一个基于Laravel框架的管理应用程序,用于管理沙龙业务。帕科特·拉雷维尔可能是这个项目的开发者或贡献者。在这个项目中,他利用了Laravel的强大功能,结合Ajax技术,...

    SPA-using-ASP.NET-MVC-5-Entity-Framework-6-Code-First-Migration-Partia-VIEW-AJAX

    使用SPA的ASP.NET-MVC-5-实体框架6-代码首次迁移-Partia-VIEW-AJAX 只有索引视图被称为来自类别控制器的索引操作的视图。 所有其他视图都被称为来自控制器(类别和项目)和索引视图的部分视图。 只有类别具有索引...

    一款基于Python-Flask框架,开发的Hyper-V网页端管理程序..zip

    同时,利用JavaScript和AJAX技术,可以在不刷新页面的情况下实现异步通信,提高用户体验。 5. **安全性与认证** 对于一个管理程序来说,安全至关重要。Flask提供了基本的身份验证和授权机制,例如使用session管理...

    前端框架对比

    ### 前端框架对比——如何为你的团队选择最适合的JavaScript框架 #### 一、引言 随着Web技术的快速发展,JavaScript框架已成为前端开发不可或缺的一部分。这些框架不仅简化了开发过程,还提高了代码质量和可维护性...

    ajax jsf javascript

    - **调用JSF 1.2组件**:掌握如何在JSF 1.2环境中使用Ajax4jsf组件是迁移或维护旧项目时的必要技能。 - **DataTable区域**:在DataTables中正确使用Ajax4jsf组件可以显著提升大型数据集的处理效率和用户界面的响应...

    Laravel框架基于ajax和layer.js实现无刷新删除功能示例

    本文主要介绍如何在Laravel框架中使用ajax与layer.js共同实现无刷新删除功能。这个功能允许用户在不离开当前页面的情况下,删除数据记录,极大地提升了用户体验。 在开始前需要先引入layer.js以及jQuery库,因为本...

    JAVAEE框架源码

    `AjaxProxy`实现了AJAX调用,使JavaScript能够发起异步请求。`Converter`则处理数据类型转换,确保客户端和服务器端的数据格式兼容。 接下来,DWR 2.0.M2是一个预发布版本,它在1.x的基础上引入了更多改进和新特性...

    Laravel开发-modals

    在模态开发中,我们通常会在Blade模板中定义一个模态元素,如`<div class="modal">...</div>`,并使用Bootstrap或其他前端框架的CSS和JS来实现交互效果。模态通常包括头部(标题)、主体(内容)和脚部(按钮)。 2...

    ajaxtags-1.5.1-bin

    1. **异步请求**:使用AJAX Tags,开发者可以通过简单的标签定义来触发后台服务的异步调用,比如表单提交或按钮点击,无需刷新整个页面。 2. **动态内容更新**:可以使用这些标签来替换或添加页面的特定部分,比如...

    PHP的Yii框架的基本使用示例

    接下来,我们将深入探讨Yii框架中几个重要的知识点,包括CGridView控件的使用、数据库操作、关系定义,以及触发JavaScript事件。 首先,CGridView是Yii中一个用于在Web页面上展示数据的网格视图控件。它支持分页、...

    twin-study:Django Javascript Ajax - 查找两个或更多人之间相似性的网站

    该项目名为“twin-study”,它是一个基于Django框架的Web应用程序,旨在利用JavaScript和Ajax技术实现用户间的面部识别与相似性比对。主要目标是通过上传图片,利用Kairos的人脸识别API来寻找双胞胎或者具有高度相似...

    liferayPortal

    - jQuery JavaScript Framework:一个流行的JavaScript库。 - Lucene:一个高性能全文搜索引擎库。 - Mule Source ESB:一个企业服务总线。 - PHP:一种广泛使用的脚本语言。 - Ruby:一种简单快速的编程语言。 - ...

    前端开源库-metal-jquery-adapter

    Metal.js是一个轻量级的JavaScript框架,旨在提供高性能和可维护性,它引入了组件化编程的概念。在某些场景下,我们可能需要将现有的jQuery插件或基于jQuery的代码与Metal.js结合使用,这时"金属jQuery适配器(Metal...

    在Ruby on Rails中使用AJAX的教程

    在Ruby on Rails框架中,AJAX(异步JavaScript和XML)的使用极大地提升了用户体验,因为它允许在不刷新整个页面的情况下更新内容。Rails通过内置的Prototype.js库简化了AJAX的集成,使得开发者可以快速创建富互联网...

    在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突

    3. **遗留系统维护**:在维护旧系统的过程中,可能需要同时使用新旧版本的jQuery来逐步迁移。 为了解决上述问题,本文将详细介绍如何在同一页面中安全地加载和使用多个不同版本的jQuery,并确保它们之间不会发生...

    vue-resource-develop

    Vue.js 是一款轻量级的前端JavaScript框架,它在构建用户界面方面表现出色。Vue-resource是Vue.js的一个插件,它的功能类似于jQuery中的$.ajax,主要用于处理前后端的数据交互。在Vue应用程序中,数据的获取和更新是...

    ABP(2.02)框架相关Demo代码以及报错处理和中文说明手册

    封装一些Javascript 函数,更方便地使用ajax、消息框、通知组件、忙状态的遮罩层等等 除ABP框架项目以外,还开发了名叫“Zero”的模块,实现了以下功能: 身份验证与授权管理(通过ASP.NET Identity实现的) 用户&...

    Laravel开发-laravel-vue-starter

    1. **API 驱动的开发**:Laravel 提供 API 接口,Vue.js 作为前端,通过 AJAX 调用这些接口获取和提交数据。 2. **Vue.js 挂载到 Laravel 渲染**:Vue.js 可以嵌入到 Laravel 视图中,利用 Vue.js 的交互性提升用户...

    Django web框架

    Django Web框架是基于Python的一款高效、优雅且可扩展的Web开发框架,它以其MVT(Model-View-Template)设计模式而闻名。这个框架旨在让开发者能够快速地构建高质量的Web应用程序,同时保持代码的清晰性和可维护性。...

Global site tag (gtag.js) - Google Analytics