- 浏览: 1126138 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
接上篇。引入了一个私有函数_serialize,它会把js对象串行化成HTTP所需参数模式,接受如下两种结构
{name:'jack',age:20} --> name=jack&age=20 {fruit:['apple','banana','orange']} --> fruit=apple&fruit=banana&fruit=orange
请求后台的一个servlet,发送参数name=jack,age=20,默认使用异步,GET方式。现在data可以如下了
Ajax.request('servlet/ServletJSON',{ data : {name:'jack',age:20}, success : function(xhr){ //to do with xhr }, failure : function(xhr){ //to do with xhr } } );
完整代码
/** * 执行基本ajax请求,返回XMLHttpRequest * Ajax.request(url,{ * async 是否异步 true(默认) * method 请求方式 POST or GET(默认) * encode 请求的编码 UTF-8(默认) * data 请求参数 (键值对字符串或js对象) * success 请求成功后响应函数 参数为xhr * failure 请求失败后响应函数 参数为xhr * }); * */ var Ajax = function(){ function request(url,opt){ function fn(){} var async = opt.async !== false, method = opt.method || 'GET', encode = opt.encode || 'UTF-8', data = opt.data || null, success = opt.success || fn, failure = opt.failure || fn; method = method.toUpperCase(); if(data && typeof data == 'object'){//对象转换成字符串键值对 data = _serialize(data); } if(method == 'GET' && data){ url += (url.indexOf('?') == -1 ? '?' : '&') + data; data = null; } var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.onreadystatechange = function(){ _onStateChange(xhr,success,failure); }; xhr.open(method,url,async); if(method == 'POST'){ xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=' + encode); } xhr.send(data); return xhr; } function _serialize(obj){ var a = []; for(var k in obj){ var val = obj[k]; if(val.constructor == Array){ for(var i=0,len=val.length;i<len;i++){ a.push(k + '=' + encodeURIComponent(val[i])); } }else{ a.push(k + '=' + encodeURIComponent(val)); } } return a.join('&'); } function _onStateChange(xhr,success,failure){ if(xhr.readyState == 4){ var s = xhr.status; if(s>= 200 && s < 300){ success(xhr); }else{ failure(xhr); } }else{} } return {request:request}; }();
这里仅仅是使data可以是对象类型,貌似没啥大用。但如果与表单(form)结合的话还是很有用的。当我们使用form但又想用ajax方式提交,那么把form中元素序列化成HTTP请求的参数类型是一个费劲的活。这里写个工具函数formToHash,将form元素按键值形式转换成对象返回。
/** * 把表单内容转换为hash对象 * @param {HTMLElement} form对象 * @return {hash} * @example * formToHash(document.forms[0]); */ function formToHash(form){ var hash = {}, el; for(var i = 0,len = form.elements.length;i < len;i++){ el = form.elements[i]; if(el.name == "" || el.disabled) continue; switch(el.tagName.toLowerCase()){ case "fieldset": break; case "input": switch(el.type.toLowerCase()){ case "radio": if(el.checked) hash[el.name] = el.value; break; case "checkbox": if(el.checked){ if(!hash[el.name]){ hash[el.name] = [el.value]; }else{ hash[el.name].push(el.value); } } break; case "button": break; case "image": break; default: hash[el.name] = el.value; break; } break; case "select": if(el.multiple){ for(var j = 0, lens = el.options.length;j < lens; j++){ if(el.options[j].selected){ if(!hash[el.name]){ hash[el.name] = [el.options[j].value]; }else{ hash[el.name].push(el.options[j].value); } } } }else{ hash[el.name] = el.value; } break; default: hash[el.name] = el.value; break; } } form = el = null; return hash; }
好了,有了formToHash就可以将其返回的对象作为Ajax的参数data了,Ajax内部的_serialize能自动的将该对象转换成HTTP请求参数形式。
- ajax_0.2.rar (1.5 KB)
- 下载次数: 153
评论
8 楼
kimmking
2010-08-21
http://www.iteye.com/topic/644429
ray_linn 写道
最近发现自己在javaeye的言辞锋芒锐减了许多,自己也百思不得其解,后来终于发现,原来是最近的小白太多,放眼看去,各个板块里都是小白新手帖,如果一个个去点新手帖的话,估计都要得脉管炎了,而且那种水水的帖子,连开骂的兴趣都没有,抓这种帖子远不如以前抓robbin的“linux可以挂载新硬盘是比windows好的一个优点”这种帖子来得有意思。
介绍新东西,新思路,新想法的东西少了许多,不是谈SSH,就是说Rails,看得一点劲头没有,还是自己搞搞博吧。
介绍新东西,新思路,新想法的东西少了许多,不是谈SSH,就是说Rails,看得一点劲头没有,还是自己搞搞博吧。
7 楼
kimmking
2010-08-21
wu_quanyin 写道
javaDevil 写道
良好帖 (1) :: 新手帖 (10) ::
这么多人投新手,这贴挺好的啊。难道je大牛太多了
这么多人投新手,这贴挺好的啊。难道je大牛太多了
不是大牛太多,是菜鸟太多,,看别人再讲基础的东西,就投新手,基础才是最重要的,难道不知道
基础的东西,请发到入门讨论,谢谢。
6 楼
wu_quanyin
2010-08-21
javaDevil 写道
良好帖 (1) :: 新手帖 (10) ::
这么多人投新手,这贴挺好的啊。难道je大牛太多了
这么多人投新手,这贴挺好的啊。难道je大牛太多了
不是大牛太多,是菜鸟太多,,看别人再讲基础的东西,就投新手,基础才是最重要的,难道不知道
5 楼
surpass
2010-08-19
javaDevil 写道
良好帖 (1) :: 新手帖 (10) ::
这么多人投新手,这贴挺好的啊。难道je大牛太多了
这么多人投新手,这贴挺好的啊。难道je大牛太多了
x神太多。
4 楼
smzd
2010-08-19
很好很强大。不过愚以为,对于表单的处理可以对任何类型的键值配对都将值做成数组,而不只是checkbox这样处理。因为可能会有重名输入框的情况发生,这样不会导致只有一个值传到服务器上。而对于数组,即便只有一个也不影响系统处理,不是吗?
3 楼
javaDevil
2010-08-19
良好帖 (1) :: 新手帖 (10) ::
这么多人投新手,这贴挺好的啊。难道je大牛太多了
这么多人投新手,这贴挺好的啊。难道je大牛太多了
2 楼
Andrew1945
2010-08-19
LZ很强大啊,整理的很好啊,你们那些投新手的人啊...
1 楼
yangguo
2010-08-18
LZ实力很强大,继续关注学习。
发表评论
-
跨域请求之JSONP 五
2012-01-12 09:59 1325前面四篇与后台约定的是返回如下的结构 jsonp ... -
跨域请求之JSONP 四
2012-01-11 15:59 1497此次主要是接口调整与代码重构。 接口如下 // ... -
ajax后退解决方案(五)
2011-11-15 07:37 1916五、使用history.pushState ... -
ajax后退解决方案(四)
2011-11-14 11:08 1229三、通过修改location.hash产生历史,hashcha ... -
ajax后退解决方案(三)
2011-11-13 08:43 984三、使用iframe,通过修改iframe.src产生历史,回 ... -
ajax后退解决方案(二)
2011-11-12 10:23 1301二、使用iframe,通过修改iframe.src产生历史 ... -
ajax后退解决方案(一)
2011-11-11 13:52 1377一、使用iframe,通过document.write产生历史 ... -
跨域请求之JSONP 三
2011-08-15 07:08 1643script请求返回JSON实际上是脚本注入。它虽然解决了跨域 ... -
跨域请求之JSONP 二
2011-08-14 08:25 652续上篇,加两个实用功能 1,增加data属性,请求参 ... -
跨域请求之JSONP 一
2011-08-13 10:46 1843跨域请求的方式有很多种, 1,ifram ... -
JS Queue LazyLoad 之二
2011-08-12 07:26 1305上一篇实现了对多个JS文件的顺序加载,这篇再完善丰富一下。加入 ... -
JS Queue LazyLoad 之一
2011-08-11 14:20 1305前面三篇实现了多个JS并行加载,即各个JS文件相互不依赖。实现 ... -
JS/CSS module LazyLoad 之三
2011-08-11 06:51 1459在开始这篇前,有两个小问题须说明一下 情况 ... -
JS/CSS module LazyLoad 之二
2011-08-10 09:33 1401上一篇完成的JS的按需加载,这篇添加个新方法css,完成对CS ... -
JS/CSS module LazyLoad 之一
2011-08-09 14:21 1447随着web app中JS越来越多,有时页面首次加载时有很多JS ... -
新API解析JSON---Ajax之七
2010-08-16 16:01 2162ECMAScript 5发布有段时间了,其中就包括了解析JSO ... -
创建xhr对象出现异常处理---Ajax之六
2010-08-16 15:40 1805前面几篇一直采用最精简的方式创建Ajax的核心XMLHttpR ... -
超时处理---Ajax之五
2010-08-16 14:49 4305上一篇只是检查是否超时,超时后却不做任何处理。这里如果超时,会 ... -
检查超时---Ajax之四
2010-08-16 11:17 2304有时发出一个请求,后 ... -
结果分类---Ajax之三
2010-08-16 09:37 1293Ajax中的x指的是xml,早期的数据格式都喜欢用xml,然后 ...
相关推荐
学习ajax之----掌握Ajax,学习ajax之----掌握Ajax ,学习ajax之----掌握Ajax ,学习ajax之----掌握Ajax
ajax课件--------Ajax.ppt,绝对经典,放心下载!
NervousAjax---自己的Ajax框架NervousAjax---自己的Ajax框架NervousAjax---自己的Ajax框架
jQuery-ajax-用户名异步请求,转载请注明出处:https://blog.csdn.net/qq_40374604(如有需要欢迎留言,我一定会尽快解答)
在ajax中使用post方法,用常规的参数格式:param1=a1¶m2=a2 ,当参数长度过长时,依然提交不成功。比如我们经常这样写一个ajax的post请求: $.ajax({ type: "post", // post or get contentType:"application...
Aspnet-ASP.NET-Core-2-jQuery-Ajax-Modal-Form.zip,使用asp.net core 2 mvc jquery ajax bootstrap model formasp.net-core-2-jquery-ajax-model-form实现模式表单,asp.net是一个开源的web框架,用于使用.net构建...
Ajax-bootstrap-select-ajax.zip,bootstrap select对数据源的ajax支持,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...
Modello.ajax 有如下特性: 1,跨浏览器 XMLHTTPRequest 调用 2,解决 XMLHTTPRequest 调用时的缓存问题 3,解决 XMLHTTPRequest 的跨域获取问题 4,解决跨域获取时的字符集问题 5,非常简单的调用接口和设置...
Laravel开发-laravel-form-ajax-validation 使用Laravel请求对带有引导的表单进行Ajax验证
Ajax-online-chat-with-php-jquery-ajax-codeigniter.zip,这个应用程序表示使用codeigniter php框架、jquery和ajax的在线聊天。我还添加了表示用于测试应用程序的数据库的sql文件。只有首先导入数据库(chat.sql),...
第24周-第10章节-Python3.5-ajax操作-原生ajax-2.avi
Ajax-datatable-using-ajax-php.zip,使用ajax php的数据表,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...
Ajax-magento2-ajax-layered-navigation.zip,ajax分层导航magento 2提供了一个过滤器列表,帮助您的客户以最短的方式搜索和获得他们最喜欢的产品。这个扩展应用了现代ajax技术来增强过滤系统,以提高用户对页面上每...
Ajax-laravel-jquery-ajax-crud.zip,用jquery的ajax特性简单实现laravel crud,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分...
Beginning-Google-Maps-Applications-with-PHP-and-Ajax-From-Novice-to-Professional.pdf
Laravel开发-salao-despesas-ajax 帕科特·拉雷维尔
Ajax-Spring-MVC-CRUD-form-submit-and-ajax.zip,spring mvc crud应用程序(springmvc、hibernate 4.x、bootstrap 3.x、jquery、mysql),ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json...
Ajax-swagger-jquery-ajax.zip,这是对jquery ajax工具的一种炫耀,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...
我的酒店管理系统-------------以个强大的AJAX的项目(asp.net)《==========物有所值,很炫的ajax效果,学习ajax的下吧
Ajax-Codeigniter-3-Ajax-Form-Submission.zip,“codeigniter 3 ajax表单提交和验证教程”一集的源代码,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建...