- 浏览: 1172452 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
Ajax中的x指的是xml,早期的数据格式都喜欢用xml,然后一层层的解析。当然简单的也会返回html(或称html片段)。
现在使用JSON格式的也很多。根据不同需求,给Ajax对象添加了三个实用方法,Ajax.text,Ajax.json,Ajax.xml。
Ajax.text返回纯文本,即responseText
Ajax.json返回json,即会将responseText解析成js对象
Ajax.xml返回xml文档,即responseXML
使用方式与Ajax.request相同,第一个参数是请求url,第二个是配置参数。
/** * 1,执行基本ajax请求,返回XMLHttpRequest * Ajax.request(url,{ * async 是否异步 true(默认) * method 请求方式 POST or GET(默认) * type 数据格式 text(默认) or xml or json * encode 请求的编码 UTF-8(默认) * data 请求参数 (字符串或json) * success 请求成功后响应函数 参数为text,json,xml数据 * failure 请求失败后响应函数 参数为xmlHttp * }); * * 2,执行ajax请求,返回纯文本 * Ajax.text(url,{ * ... * }); * * 3,执行ajax请求,返回JSON * Ajax.json(url,{ * ... * }); * * 4,执行ajax请求,返回XML * Ajax.xml(url,{ * ... * }); */ var Ajax = function(){ function request(url,opt){ function fn(){} var async = opt.async !== false, method = opt.method || 'GET', type = opt.type || 'text', 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,type,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,type,success,failure){ if(xhr.readyState == 4){ var s = xhr.status, result; if(s>= 200 && s < 300){ switch(type){ case 'text': result = xhr.responseText; break; case 'json': result = function(str){ return (new Function('return ' + str))(); }(xhr.responseText); break; case 'xml': result = xhr.responseXML; break; } success(result); }else{ failure(xhr); } }else{} } return (function(){ var Ajax = {request:request}, types = ['text','json','xml']; for(var i=0,len=types.length;i<len;i++){ Ajax[types[i]] = function(i){ return function(url,opt){ opt = opt || {}; opt.type = types[i]; return request(url,opt); }; }(i); } return Ajax; })(); }();
- ajax_0.3.rar (1.4 KB)
- 下载次数: 138
评论
3 楼
accphc
2010-08-21
我觉得在参数中包含返回类型有点别扭,直接根据结果解析不久的了,如果responseXML不为空就说明是返回的xml数据,判断json格式和普通的文本也不难啊。最后面return部分的一堆代码我也没咋看懂,主要是对闭包认识肤浅。。。
2 楼
wukele
2010-08-19
语法看起来有点闷,应该解释一下,呵呵
1 楼
yangguo
2010-08-18
越看越有味道
发表评论
-
跨域请求之JSONP 五
2012-01-12 09:59 1447前面四篇与后台约定的是返回如下的结构 jsonp ... -
跨域请求之JSONP 四
2012-01-11 15:59 1623此次主要是接口调整与代码重构。 接口如下 // ... -
ajax后退解决方案(五)
2011-11-15 07:37 2038五、使用history.pushState ... -
ajax后退解决方案(四)
2011-11-14 11:08 1353三、通过修改location.hash产生历史,hashcha ... -
ajax后退解决方案(三)
2011-11-13 08:43 1105三、使用iframe,通过修改iframe.src产生历史,回 ... -
ajax后退解决方案(二)
2011-11-12 10:23 1431二、使用iframe,通过修改iframe.src产生历史 ... -
ajax后退解决方案(一)
2011-11-11 13:52 1508一、使用iframe,通过document.write产生历史 ... -
跨域请求之JSONP 三
2011-08-15 07:08 1781script请求返回JSON实际上是脚本注入。它虽然解决了跨域 ... -
跨域请求之JSONP 二
2011-08-14 08:25 776续上篇,加两个实用功能 1,增加data属性,请求参 ... -
跨域请求之JSONP 一
2011-08-13 10:46 1983跨域请求的方式有很多种, 1,ifram ... -
JS Queue LazyLoad 之二
2011-08-12 07:26 1419上一篇实现了对多个JS文件的顺序加载,这篇再完善丰富一下。加入 ... -
JS Queue LazyLoad 之一
2011-08-11 14:20 1443前面三篇实现了多个JS并行加载,即各个JS文件相互不依赖。实现 ... -
JS/CSS module LazyLoad 之三
2011-08-11 06:51 1577在开始这篇前,有两个小问题须说明一下 情况 ... -
JS/CSS module LazyLoad 之二
2011-08-10 09:33 1524上一篇完成的JS的按需加载,这篇添加个新方法css,完成对CS ... -
JS/CSS module LazyLoad 之一
2011-08-09 14:21 1566随着web app中JS越来越多,有时页面首次加载时有很多JS ... -
新API解析JSON---Ajax之七
2010-08-16 16:01 2308ECMAScript 5发布有段时间了,其中就包括了解析JSO ... -
创建xhr对象出现异常处理---Ajax之六
2010-08-16 15:40 1919前面几篇一直采用最精简的方式创建Ajax的核心XMLHttpR ... -
超时处理---Ajax之五
2010-08-16 14:49 4446上一篇只是检查是否超时,超时后却不做任何处理。这里如果超时,会 ... -
检查超时---Ajax之四
2010-08-16 11:17 2433有时发出一个请求,后 ... -
改造请求参数---Ajax之二
2010-08-16 08:55 1852接上篇。引入了一个私有函数_serialize,它会把js对象 ...
相关推荐
AJAX动态加载无限级分类联动下拉菜单 ----------------------------使用说明--------------------------- 1.将文件夹database下的SQL文件menu导入本地数据库 2.打开config文件夹下的config.php,设置本地数据库相关...
3. PHP 文件:在服务器端,至少有一个.php文件,用于接收来自JavaScript的AJAX请求,调用翻译API(可能是Google Translate API或其他免费或付费服务),处理翻译,并将结果返回给前端。 4. 可能还有CSS文件(.css)...
这在多级分类、地区选择、产品筛选等场景中尤为常见。 首先,我们来理解一下这个四级联动的概念。四级联动通常指的是四个相互关联的下拉列表,它们之间存在依赖关系。例如,在一个电商网站上,用户可能需要依次选择...
3. 绑定事件监听器,处理用户交互和数据加载结果。 4. 可选地,进行自定义样式和功能扩展,以符合项目的整体风格和功能需求。 在压缩包`ajax-picker-master`中,通常包含源代码文件(如JavaScript和CSS)、示例文件...
通过这个"php+ajax三级直联"项目,开发者可以学习到如何结合PHP和AJAX进行前后端交互,以及如何处理层次结构数据,对于提升Web开发技能大有裨益。同时,这样的菜单系统在实际网站中也很常见,如电商网站的产品分类、...
这种交互方式常见于地区选择、分类筛选等场景,提高了用户体验。 1. **Ajax基本概念** - 异步:Ajax的核心特性,它在后台与服务器通信,不影响用户对页面的其他操作。 - JavaScript:用于处理Ajax请求和响应,...
在客户分类列表管理中,用户可以使用Ajax无刷新加载或更新分类,提供流畅的操作体验。 PHP是一种服务器端的脚本语言,常用于处理HTML表单数据、生成动态内容以及与数据库交互。在这个项目中,PHP接收由Ajax发送的...
**Ajax实现下拉框三级联动**是Web开发中一种常见的交互设计,主要用于提高用户体验,让用户在选择一项数据时,能够即时地看到与之关联的下级数据,而无需等待整个页面重新加载。这种技术通常应用于地址选择、产品...
AJAX级联菜单则是利用了控件间的联动效果,比如在选择一个分类后,下拉菜单会自动更新为该分类下的子项,这样无需重新加载整个页面,极大地提升了用户导航的效率。这通常通过AJAX控件中的UpdatePanel或者自定义脚本...
在网页开发中,"Ajax 实现三级联动"是一种常见的交互设计,主要用于地址选择、分类筛选等场景。这里的“联动”指的是当用户在一个下拉框中选择一个选项时,其他关联的下拉框会自动更新其内容,以反映出与之前选择...
3. **搜索功能**:当用户输入搜索关键词时,同样通过AJAX发起请求,这次同时传入分类ID和搜索关键词,然后更新显示结果,而不是过滤已有的XML数据,这样简化了逻辑。 4. **DOM操作获取数据**:用户点击表格的某一行...
3. **无限级分类**:在数据库设计中,无限级分类通常通过自引用的方式实现,即一个分类可以有多个子分类,子分类也可以继续有子分类,形成无限递归的结构。这里的 `classsyssql.sql` 文件很可能是数据库的初始化脚本...
城市三级联动菜单是一种常见的前端交互设计,常用于地区选择、分类导航等场景。在这个系统中,用户在选择一级城市后,会自动加载对应的二级城市,接着在选择二级城市时,会进一步加载相应的三级城市。这种无缝对接的...
总结来说,"用AJAX实现的jsp三级联动"主要涉及以下知识点: 1. AJAX技术:包括XMLHttpRequest对象的使用,以及异步请求的发送和接收。 2. JSP和Servlet:用于处理服务器端逻辑,如根据前端请求获取数据,生成JSON...
3. **数据交互**:前端通过AJAX发送请求到服务器,服务器通过ASP处理请求并与Access数据库交互,然后将结果返回给前端显示。 4. **安全性**:由于是基于ASP的程序,可能需要考虑SQL注入防护,以及用户密码的安全存储...
在这个案例中,我们有一个名为"classsyssql"的表,它有三个字段:`id`(主键)、`fid`(父ID)和`strName`(分类名称)。这种设计允许我们构建一个树状的分类结构,其中每个分类可以有任意数量的子分类。`fid`字段...
**AJAX简单分类程序 1.0 知识点详解** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,极大...
在三级联动中,Ajax起着关键作用,它在用户选择每一级分类后异步发送请求,获取并动态更新下拉框的内容,提供了流畅的用户体验。 **MySQL** 是一款流行的开源关系型数据库管理系统,用于存储和管理应用程序的数据。...
在介绍知识点之前,需要明确本文的目的是帮助理解如何使用Jquery、Ajax、PHP和MySQL来实现一个客户分类列表的管理系统。该系统主要涉及客户分类数据的展示以及增加、删除和修改等操作。这些操作通过Ajax异步请求与...