- 浏览: 148152 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
shlice:
你好,我在osx上测试,输入法没有成功切换到英文。你的&quo ...
让Mac版Sublime text3的Vintage插件切换命令模式时自动切换到英文输入法 -
q471989525:
很不错~ 多谢分享
仿Gmail中输入多个收件人的Autocomplete组件 -
leon.s.kennedy:
[flash=200,200][url][img][list] ...
javascript总结(三)js与FLASH的交互 -
hahaha168:
请问如果我没有使用数据库的话,可以使用这种关联关系吗?
rails关联学习笔记 -
j67065:
不好意思,这个确实挺有用的,后来发现,路径就在存放数据库文件下 ...
使用sqlite的文件导入导出功能
目录
(一)有关框架
(二)文件组织与代码组织
(三)JS与FLASH交互
(四)ajax局部刷新与RPC
(五)获取设置元素样式与监听元素事件
(六)页面元素的创建调整与关联
(七)浏览器兼容性问题
(八)WEB软件的前端架构实践
文章中的代码只为表达文章意义,非真正能执行的代码。
不同目的ajax请求
一、使用ajax进行局部更新
目前项目中的主要几种
1、切换到新的TAB时局部更新
自定义实现了TabPanel,主要通过在元素上设置属性来设置参数,这样做的好处是不必在代码中写参杂页面控制逻辑。结构如下,当子节点没有设置相关属性时,从父节点设置的属性中获取。
<h3>新闻</h3> <ul renderTo="#newsContent" class="tabpanel" url="http://www.a.com/?category=$0&count=$1" > <li> <a data="tech,8" renderTo="#newsContent" class="tab on" before="js code" after="js code">科技</a> </li> <li> <a data="economic,9" class="tab">经济</a> </li> <li></li> </ul> <div id="newsContent"> </div>
属性含义:
renderTo: 渲染到哪个元素
url: 请求的地址的模板
data:替换url中的参数
before: 载入前要执行的代码
after: 载入后要执行的代码
2、弹出一个浮动窗口,内容由ajax获取
这个实现也比较简单,写一下调用示例:
ibm.popup({ url: " http://www.a.com/login", params: {theme: "sky"}, html: "", //如果指定了内容,则不会发起请求 modal: true, //窗口是否为模态 time: -1, //指定时间内自动关闭 success: function(){ ibm.initLogin(); } })
3、点击一个按钮后进行局部更新
简单的直接onclick="jQuery('selExp').load('url')";
复杂的直接调用业务方法
4、通过RPC请求新增一条数据或删除一条数据后进行局部更新
为了保持前端无状态,删除或添加后都局部刷新整个列表,除非这样做会导致系统负担,才手动操作DOM做假的增加删除。
如果这一块的HTML比较多,导致更新局部的时候获取的HTML比较大,或者用户做这种局部更新比较频繁,就考虑把模板放到前端,然后每次只请求数据,然后由前端完成渲染工作。相关介绍见金大为的文章。雏凤清音 -- 面向数据的前端编程方法
二、使用ajax提交表单
比较简单,主要使用jQuey+插件validation来做。
表单的参数由元素name指定,不用用户输入的参数通过<input type="hidden" />来实现,一般不在JS方法中对提交的后台的参数进行增加或修改操作。
三、使用ajax进行远程过程调用(RPC)
RPC我们遵行的是JSON RPC规范。根据是否跨域,我们有两种实现,不跨域的时候是POST请求,跨域情况下,我们采用导入脚本的方式。当然,RPC接口是统一的,是否跨域根据URL自动判断,晒一下方法签名
/** * @param {String} url * @param {Object} params * @param {Function | String} successFn 成功后的回调 * 如果为字符串,将显示该消息,且不显示返回数据中的消息 * 未提供此参数,判断成功后,尝试从返回数据中提取消息进行显示 * @param {Function | String} failFn 失败后的回调 * 如果为字符串,将显示该消息,且不显示返回数据中的消息 * 未提供此参数,在判断RPC操作失败时,将尝试从返回数据中提取错误消息进行显示 */ rpc: function(url, params, successFn, failFn) { //code } //使用示例 rpc("http://www.a.com/user/updateMoney", {value: money}, function(data){ jQuery("#userMoney").text(data.money) })
RPC操作超过2秒后没有得么响应,将弹出一个系统繁忙提示的DIV模拟模态弹出窗口,防止用户重复点击提交。
在我们的项目中,后台程序统一了一个响应前端RPC的方法,处理前端响应的业务代码中在响应请求时调用那个方法,以使得统一以及返回数据遵行JSON RPC规范。
其它RPC的实现也有很多,如PHP RPC
全局ajax设置及错误处理
用jQuery实现统一的ajax全局设置还是比较简单的
网络连接中断,超时以及当HTTP HEAD中state code非200时都会报错。
目前以下代码无法在IE下驱分出网站连接中断与超时,FF下与CHROME下可以。
代码看起来比较乱
function initAjax() { jQuery.ajaxSetup({ timeout: 10000, cache: false }); $(document.body).ajaxComplete(function(event, request, ajaxOption, state){ if(!Comm.browser.isIE && state == "timeout"){ Comm.onceError("请求超时,请稍候重试!"); } }).ajaxError(function(event, request, ajaxOption, thrownError){ var passError = /&passerror=|^passerror=/; var hasJsonName = /&jsonName=|^jsonName=/; var data = ajaxOption.data; var isJsonRPC = data && hasJsonName.test(data) && (!passError.test(data)); try{ if(!Comm.browser.isIE && (!request || request.status == 0)){ Comm.onceError("网络连接中断,请检查你的网络连接"); return; } var state_code = request.status.toString().substr(0, 3); if (state_code != "200") { var msg = ''; msg = $HTTP_STATE_CODE[state_code]; if(msg) msg = msg[1] || msg[0]; if (!msg) msg = "请求数据失败,请稍后重试"; if (state_code == "401") Comm.error(msg, function() { top.location.href = "http://www.a.com/login"; return; }); if (isJsonRPC) Comm.error(msg); } }catch(e){ if(Comm.browser.isIE)Comm.onceError("请求超时,请稍候重试!"); } }) }
评论
5 楼
86asm
2010-04-06
bellstar 写道
qiren83 写道
一个做过后端开发的人 最终走在前端是需要勇气的
想知道楼主现在的月薪多少 在哪家上班(如果是大公司的话)
谢谢 期待你的回答
想知道楼主现在的月薪多少 在哪家上班(如果是大公司的话)
谢谢 期待你的回答
我做程序员以来,一直就偏向于喜欢研究前端技术,因为前端的纷乱以及不成熟,更有机会创新,以目前WEB化的趋势,随着HTML5的到来,前端技术的重要性将更加突出。目前在一小公司做WEB GAME。
的确,web前端技术太杂乱了。调试起来也比较麻烦,该死的ie6问题还不少
4 楼
bellstar
2010-04-05
qiren83 写道
一个做过后端开发的人 最终走在前端是需要勇气的
想知道楼主现在的月薪多少 在哪家上班(如果是大公司的话)
谢谢 期待你的回答
想知道楼主现在的月薪多少 在哪家上班(如果是大公司的话)
谢谢 期待你的回答
我做程序员以来,一直就偏向于喜欢研究前端技术,因为前端的纷乱以及不成熟,更有机会创新,以目前WEB化的趋势,随着HTML5的到来,前端技术的重要性将更加突出。目前在一小公司做WEB GAME。
3 楼
qiren83
2010-04-05
一个做过后端开发的人 最终走在前端是需要勇气的
想知道楼主现在的月薪多少 在哪家上班(如果是大公司的话)
谢谢 期待你的回答
想知道楼主现在的月薪多少 在哪家上班(如果是大公司的话)
谢谢 期待你的回答
2 楼
xiaochong4
2010-04-01
有图才有真相!
1 楼
pouyang
2010-03-31
能附上下载就更好了
发表评论
-
amplifyjs--有关组件通讯与请求管理与本地存储的js库
2014-09-18 22:27 956简介: 本介绍只是方便英文不好的人快速对这个框架有个了解,当然 ... -
一个JavaScript的oo库
2012-07-20 16:49 1016此项目已更名为May.js,内容已过期,请参见http:/ ... -
KISSY之KISSY.JS速记
2010-12-15 14:11 2719https://github.com/kissyteam/ki ... -
面试题-做一个聊天原型
2010-05-17 16:27 1301解压,无须WEB服务器,直接运行chat.html即可. 含 ... -
javascript总结(七)浏览器兼容性
2010-04-01 14:30 0javascript语言本身的兼容性 IE不支持Array#i ... -
javascript总结(六)页面元素的创建调整与关联
2010-03-31 14:24 1325目录 (一)有关框架 ... -
javascript总结(五)获取设置元素样式与监听元素事件
2010-03-30 15:11 4378目录 (一)有关框架 ... -
javascript总结(三)js与FLASH的交互
2010-03-29 16:51 5815目录 (一)有关框架 (二)文件组织与代码组织 (三)JS与 ... -
javascript总结(二)文件组织与代码组织
2010-03-29 15:13 2388目录 (一)有关框架 (二)文件组织与代码组织 (三)JS与 ... -
javascript总结(一)有关框架
2010-03-26 18:38 1739做过.NET,ROR,现专职JS满两年了.就开发过程中遇到的问 ... -
HTML标记不匹配引起的问题
2010-01-25 10:48 776场景: ajax载入一个html片段,firefox下正常,i ... -
结合使用setTimeout和setInterval模拟QQ头像闪动
2010-01-19 18:07 1623注: $为jQuery方法,$(el).attr(name, ... -
使用 window.name 解决跨域问题
2010-01-06 17:59 1768内容来源怿飞的BLOG 比较适合获取跨域的HTML片段,获取J ... -
用EXT的CHECKBOX表示BOOL型字段
2010-01-05 16:46 1264在SUI模板中添加VALUE="1" ... -
javascript的namespace声明
2009-12-09 17:37 1276function namespace(ns){ ... -
分享一个VIM的JS代码格式化插件
2009-12-09 17:30 7082VIM是我最爱的编辑器,我是JS程序员,程序长了格式化就麻烦, ... -
Ext组件继承层次图
2009-10-14 16:20 1057... -
重构增强版通用滚动widget,鼠标移入可暂停滚动
2009-07-29 15:30 1175/** * 滚动HTML集合对象 * @param ... -
通用滚动widget
2009-07-28 17:49 1007/** * 滚动HTML集合对象 * @param ... -
安全的jQuery(selExp).html(content)
2009-05-21 10:18 905jQuery.prototype.html_scr ...
相关推荐
创建XMLHttpRequest对象var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("get", "GetDate.ashx?id=" + encodeURI("中国") + "&ts;", false); xmlhttp.onreadystatechange = function () { ...
JavaScript语言与Ajax应用(第二版)-源代码-董宁-51704128
实现使用JavaScript DOM 操作实现网页局部刷新
AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。 AJAX 是一种在 2005 年由 Google 推广开来的编程模式。 AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。 通过 AJAX,你可以创建更...
AjaxJavaScriptToWebService JavaScript通过Web Service实现AJAX无刷新数据交互
内含:iframe、js、callback和ajax四种局部刷新技术
局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了。 例子,定时局部刷新 定时局部刷新用到jQuery里面的...
以一个实例介绍javascript与.net ajax 技术相结合
JavaScript与Web Service组和实现Ajax五刷新通信(扩展)
validate 通用Ajax无刷新表单验证类(JavaScript)
下面给大家介绍JS实现AJAX局部刷新功能,具体内容如下所示: 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 // 创建...
Iframe是一种嵌入网页的框架形式,Web页面可以通过更改嵌入的部分,达到部分内容刷新,通过本文和大家一起学习iframe实现局部刷新的几种方法汇总,对iframe局部刷新相关知识感兴趣的朋友一起学习吧
拒绝Ajax,同样让你的网页局部刷新,异步递交。 避开使用JavaScript的异步递交。 这个压缩包为本人试验的结果。 里面的access数据库为以前做网站留下来的,为处理,不好意思
纯用javascript实现的ajax三级联动无刷新,数据传送采用json格式,开发平台采用vs2010 asp.net,压缩包含有sql脚本
利用JavaScript代码调用服务器代码,从服务器端返回html到浏览器,再通过JavaScript添加到页面,实现局部刷新.
传统的聊天室基于客户端网页的自动刷新技术而实现,它的主要缺点是不断刷新页面造成屏幕的闪动,而经过了Ajax改造后的聊天室,每次只获取最新的发言信息,并将获取结果动态写入页面,不会有以上的缺点 ………………...
javascript和ajax学习指南 Learn_JavaScript_and_Ajax_with_w3Schools.zip
Javascript & Ajax _ w3school.zip (来自w3school)
使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。
征服Ajax-javascript部分 ajax javascript课件 征服Ajax-javascript部分 ajax javascript课件