java 面试题用javascript和jquery 写出选择所有input标签_百度知道
java 面试题用javascript和jquery 写出选择所有input标签
java 面试题分别用javascript和jquery， 写出获所有input标签里的值？这是我在一起面试中遇到的一个题，请大神指教。
不好意思，我这里没有悬赏币，请见谅
我有更好的答案
js:var is = document.querySelectorAll(&input[type='text']&);for(var i=0;i&is.i++){
console.info(is[i].value);}jq:$(&:text&).each(function(){
console.info($(this).val());});
采纳率：71%
//jsvar inputElements = document.getElementsByTagName(&input&);//jqueryvar inputElements = $(&input&);for(var i =0; i & inputElements.i++) {alert(inputElements[i].value);}
谢谢，那我要怎么用javascript 原始方法来给所有 input 的标签赋值？用jquery我就知道怎么写，第一次想用原始方法来写所以有点小白，谢谢
这个算是基础了吧。js:obj.getElementsByTagName(&input&);jquery:obj.find(&input&);
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。后使用快捷导航没有帐号？
我们在使用jQuery的时候，到底在使用什么？
时间： 08:56
阅读数：1112
作者：spotty
摘要：在MV*(MVVM)框架诞生之前，我们怎么用jQuery？其实这个问题很大，一千个读者就有一千个哈姆雷特，不同阶段的开发者对jQuery的理解，或是JavaScript的理解程度是不同的。刚入门的前端开发者，可能喜欢直接操作DOM，所 ...
jQuery（or Zepto）作为前端标杆，风风光光了许多年，基本上已经成为开发必备的前端框架了。它的成功，主要是因为它让JavaScript的使用变的简单，而且通俗易懂，新手可以在不熟练原生JavaScript的前提下，很快就能写出交互复杂的页面。当然它的优点还有一大坨，就不细说了。写这篇文章，是因为在*近一年的开发中，使用了其他一些前端框架后，对jQuery有了一些新的思考。其实这个问题很大，一千个读者就有一千个哈姆雷特，不同阶段的开发者对jQuery的理解，或是JavaScript的理解程度是不同的。刚入门的前端开发者，可能喜欢直接操作DOM，所有会 $() 满天飞，似乎懂CSS就懂jQuery选择器了。.hide()、.show()、.css()、.attr()、.html()会用的很频繁，.fadeIn()、.fadeOut()、.slideDown()、.slideUp()也经常用来玩一些动画。不过话说回来，jQuery确实擅长干这些。一开始会觉得，哇塞，这么爽，终于可以做交互页面了，要哪个DOM，我都能轻松的获取到。再后来，开始用ajax。jQuery的ajax解决方案确实做的很好用，好用到很多人只知道用jQuery的ajax，而不知道xhr是什么鬼，更别提写个原生ajax了。有了DOM，有了数据，再来几个开源的jQuery插件，貌似觉得前端开发也就这么回事了，分分钟攒出一个交互复杂的页面来。没错，市面上大部分前端开发，可能都是这么过来的吧，而且这部分人的市场占有率还不少。再后面，交互变得频繁，而直接操作DOM会耗大量时间来写一堆重复的业务逻辑代码，这时便有了前端模板，比如doT、artTemplate。开发者只用维护数据即可，然后交给模板去处理，用事件委托来监听事件。这种模式也成了主流，至今很多项目也仍然使用的这种模式。它的好处就是前后端都可以用，而且不用直接操作DOM，省去了大量业务逻辑代码，维护起来也很方便，性能也不差。Angular(后面直接写为ng)的出现，确实改变了前端开发的习惯和认知。现在想来，如果开发者没使用过jQuery，直接学习ng的话可能理解起来会轻松很多，要不然总想着jQuery的那一套，这也是为什么后端开发人员非常喜欢用ng来开发类似管理后台的产品。当然，我*初在学习ng时，也是脱不开jQuery的束缚，虽然有$http服务，我还是喜欢用jQuery的ajax，然后再$apply，插件还是喜欢jQuery的，因为用习惯了。ng和jQuery混用，这时我们已经不再操作DOM了，一切都是HTML和数据。但是jQuery是必须的吗？当然不是，现在ng的插件已经非常丰富了，能满足绝大部分的交互需求，即使没有，也会首选开发ng插件而非jQuery的了，所以慢慢地jQuery也就不再是项目中不可缺少的了。我使用Vue.js不是很久，但却非常喜欢这个前端框架，它相比Angular使用更简单，渲染更高效，文档详细，门槛很低。在*初开发TalkingCoder时，我是没有使用jQuery的，我用原生自己封装了ajax和document.ready，一开始没有任何问题，因为不涉及到直接操作DOM。后来不得不使用jQuery插件时，开始想用Zepto代替jQuery，然后将插件改写为兼容Zepto的，因为Vue是一个新兴项目，它的组件还不是非常多，但又不想花太多时间造轮子，所以就妥协了。再后来使用Simditor富文本编辑器时，实在没办法，又将Zepto替换为jQuery了。*近刚开发完一个项目，算是交互比较复杂的了，深度使用可复用的组件，vue.js可是帮到了大忙。一开始没有考虑太多，直接就把jQuery加进去了，因为想着可能会用到的嘛。但文章写到这时，我全局搜了一下，发现几乎没有地方在使用jQuery，代码加起来可能就几百行，然后回头想一想，好像确实是这样的，而且使用过的一些，也是可以改写为vue的。至于React，笔者研究的并不多，所以不知道相关的情况。但就Angular和Vue的使用来看，jQuery虽还在用，但其作用已经很小了，甚至完全可以被取代，如果非要使用，Zepto也是可以替代jQuery的。前端*近几年发展的很快，各种框架层出不穷，jQuery已经慢慢不再是主流了，它的模式也在被各种新思想颠覆着。所以回到问题，我们在使用jQuery的时候，到底在使用什么？其实答案很简单，我们为什么用jQuery，因为它过去成为了前端开发的标准，不用它行不行，当然行，但你不还得自己搞一套类jQuery的东西吗，总不能所有都document.getElementById吧！所以*后还是会回到那个问题来：用什么框架，什么技术栈取决于你当前的团队实力和项目，没有谁好谁不好，只有谁合适当前，还有，任何一个框架的产生，都是为了解决某个具体问题的，不能一棍子打死说某个框架不好，也许只是不适合当前的你！当前位置:&&
本页文章导读:
&&&&?JQuery中each()的使用方法说明&&&&&&
JQuery中的each函数在1.3.2的官方文档中的描述如下： each(callback) 以每一个匹配的元素作为上下文来执行一个函数。 意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的.........&&&&?jquery获取input的value问题说明&&&&&&
后来终于在伟大的百度帮助下，找到了问题的原因：
代码如下: $("")是一个jquery对象，而不是一个dom element value是dom element的属性 jquery与之对应的是val val() :获得第一个匹配元素的当前值。 v.........&&&&?JavaScript开发规范要求(规范化代码)&&&&&&
本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用“愉快”来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够.........
[1]JQuery中each()的使用方法说明
&&&&来源:&互联网& 发布时间:&
JQuery中的each函数在1.3.2的官方文档中的描述如下： each(callback) 以每一个匹配的元素作为上下文来执行一个函数。 意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。 而后面的callback 则是回调函数，指示遍历元素的时候应该赋予的操作。先看下面的一个简单的例子： 迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码:
代码如下: &img/&&img/&jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; });
结果:[ &img src="test0.jpg" /&, &img src="test1.jpg" /& ] 当然，在遍历元素的时候，jquery是允许自定义跳出的，请看示例代码：你可以使用 'return' 来提前跳出 each() 循环。 HTML 代码:
代码如下: &button&Change colors&/button& &span&&/span& &div&&/div& &div&&/div& &div&&/div& &div&&/div& &div id="stop"&Stop here&/div& &div&&/div& &div&&/div& &div&&/div&
jQuery 代码:
代码如下: $("button").click(function(){ $("div").each(function(index,domEle){ $(domEle).css("backgroundColor","wheat"); if($(this).is("#stop")){ $("span").text("在div块为#"+index+"的地方停止。");
或者这么写：
代码如下: $("button").click(function(){ $("div").each(function(index){ $(this).css("backgroundColor","wheat"); if($(this).is("#stop")){ $("span").text("在div块为#"+index+"的地方停止。");
图解:each() 方法规定为每个匹配元素规定运行的函数。提示：返回 false 可用于及早停止循环。 语法 $(selector).each(function(index,element))参数 描述 function(index,element) 必需。为每个匹配元素规定运行的函数。 oindex - 选择器的 index 位置 oelement - 当前的元素（也可使用 "this" 选择器 实例 输出每个 li 元素的文本：
代码如下: $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); });
实例 obj 对象不是数组 该方法同1的最大区别是：fn方法会被逐次不考虑返回值的进行进行。换句话说，obj对象的所有属性都会被fn方法进行调用，即使fn函数返回false。调用传入的参数同1类似。
代码如下: jQuery.each=function( obj, fn, args ) { if ( args ) { if ( obj.length == undefined ){ for ( var i in obj ) fn.apply( obj, args ); }else{ for ( var i = 0, ol = obj. i & i++ ) { if ( fn.apply( obj, args ) === false )
} } } else { if ( obj.length == undefined ) { for ( var i in obj ) fn.call( obj, i, obj ); }else{ for ( var i = 0, ol = obj.length, val = obj[0]; i & ol && fn.call(val,i,val) !== val = obj[++i] ){} } }
需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式，这意味着，在你自己的fn的实现中，可以直接采用this指针引用数组或是对象的子元素。 那怎么跳出each呢 jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后，要跳出这个循环。 javascript的跳出循环一般用break. 同事遇到这个问题，下意识 的用了break，想跳出这个循环。结果报错 SyntaxError: unlabeled break must be inside loop or switch 经查，应该用一个 在回调函数里return false即可，大多数jq的方法都是如此的
代码如下: 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。 返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
[2]jquery获取input的value问题说明
&&&&来源:&互联网& 发布时间:&
后来终于在伟大的百度帮助下，找到了问题的原因：
代码如下: $("")是一个jquery对象，而不是一个dom element value是dom element的属性 jquery与之对应的是val val() :获得第一个匹配元素的当前值。 val(val):设置每一个匹配元素的值。
所以，代码应该这样写：
代码如下: 取值：val = $("#id")[0]. 赋值： $("#id")[0].value = "new value"; 或者$("#id").val("new value"); 或者这样也可以：val = $("#id").attr("value");
[3]JavaScript开发规范要求(规范化代码)
&&&&来源:&互联网& 发布时间:&
本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用“愉快”来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然，如果我说的有不科学的地方还希望各路前辈多多指教。下面分条目列出各种规范要求，这些要求都是针对同事编码毛病提出来的，好些行业约定的其它规范可能不会再提及。
1、保证代码压缩后不出错
对于大型的JavaScript项目，一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理，比如可以利用Google Closure Compiler Service对代码进行压缩，新版jQuery已改用这一工具对代码进行压缩，这一般会去掉开发时写的注释，除去所有空格和换行，甚至可以把原来较长的变量名替换成短且无意义的变量名，这样做的目的是加快文件的下载速度，同时也减小网站访问带来的额外数据流量，另外在代码保护上也起到了一点点作用，至少压缩后的代码即使被还原还是没那么容易一下读懂的。要想代码能正确通过压缩，一般要求语句都要以分号正常结束，大括号也要严格结束等，具体还要看压缩工具的要求。所以如果一开始没有按标准来做，等压缩出错后再回去找错误那是浪费时间。
2、保证代码能通过特定IDE的自动格式化功能
一般较为完善的开发工具（比如Aptana Studio）都有代码“自动格式”化功能，这一功能帮助实现统一换行、缩进、空格等代码编排，你可以设置自己喜欢的格式标准，比如左大括号{是否另起一行。达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。你同事需要阅读你的代码，可能是因为你写的是通用方法，他在其它模块开发过程中也要使用到，阅读你的代码能最深入了解方法调用和实现的细节，这是简单API文档不能达到的效果。
3、使用标准的文档注释
这一要求算是最基本的，这有利于在方法调用处看到方法的具体传参提示，也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读，你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台，就像facebook.com应用，那么你的文档是给天下所有开发者看的。另外编写完整注释，也更方便团队成员阅读你的代码，通过你的参数描述，团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护，这样即使再大的项目，过了很长时间后，回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。
4、使用规范有意义的变量名
使用规范有意义的变量名可以提高代码的可读性，作为大项目开发成员，自己写的代码不仅仅要让别人容易看懂。开发大项目，其实每个人写的代码量可能都比较大，规范命名，日后自己看回自己的代码也显的清晰易懂，比如日后系统升级或新增功能，修改起代码来也轻松多了。如果到头发现自己当初写的代码现在看不太懂了，那还真是天大的笑话了。
当然，使用有意义的变量名也尽量使用标准的命名，比如像这里：var me = this也许没有var self = this好，因为self是Python中的关键字，在Python中self就是通常语言this的用法。再看下面一个例子，加s显然比没有加来的科学些，这样可以知道这个变量名存的是复数，可能是数组等：
var li = document.getElementsByTagName('li')var lis = document.getElementsByTagName('li')
5、不使用生偏语法
JavaScript作为一门动态脚本语言，灵活性既是优点也是缺点，众所周知，动态语言不同层次开发人员对实现同样一个功能写出来的代码在规范或语法上会存在较大的差别。不管怎么样，规范编码少搞怪，不把简单问题复杂化，不违反代码易读性原则才是大家应该做的。
比如这语句：typeof(b) == 'string' && alert(b)应该改为：if (typeof(b) == 'string') alert(b)，像前面那种用法，利用了&&运算符解析机制：如果检测到&&前语句返回false就不再检测后面语句，在代码优化方面也有提到把最可能出现的情况首先判断，像这种写法如果条件少还好，如果条件较多而且语句也长，那代码可读性就相当差。
又比如：+function(a){var p =}( 'a')应该改为：(function(a){var p =})( 'a')，其实function前面的+号与包含function的()括号作用是一样的，都是起运算优先作用，后者是常见且容易看明白的防止变量污染的做法，比如好些流行JavaScript框架就是采用后面这种方式。
再说个降低代码可读性的例子，如：function getPostionTxt(type){return type == 2 ? "野外" : (type == 3 ? "商城" : (type == 4 ? "副本" : null));}应该改成：function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"};if (typeData[type]) return typeData[type];}。如果type是从0开始不间断的整数，那么直接使用数组还更简单，这种结果看起来就清晰多了，看到前面那种多层三元表达式嵌套头不晕吗。
6、不在语句非赋值地方出生中文
语句中不应该出现中文我想一般人都知道，虽然这样做不影响程序运行，但是显然有背行业标准要求，当然我们也不是在使用“易语言”做开发。关于这一个问题，我本来不想把它拿出来说的，但我确实遇到有人这样做的，也不知道是不是因为他的英语实在太烂了，至少还可以用拼音吧，另外寻求翻译工具帮忙也不错的选择。我举例如下，像以下写法出现在教学中倒还可以理解：
this.user['名字'] = '张三'　或者　this.user.名字 = '张三'
7、明确定义函数固定数量的参数
固定数量参数的函数内部不使用arguments去获取参数，因为这样，你定义的方法如果包含较多的脚本，就不能一眼看到这个方法接受些什么参数以及参数的个数是多少。比如像下面：var $ = function(){return document.getElementById(arguments[0]);}应该改成：var $ = function(elemID){return document.getElementById(elemID);}
8、不必热衷动态事件绑定
虽然知道事件可以动态绑定，比如使用addEventListener或者使用jQuery的bind方法，也知道采用动态事件绑定可以让XHTML更干净，但是一般情况下我还是建议直接把事件写在DOM节点上，我认为这样可以使代码变得更容易维护，因为这样做，我们在查看源代码的时候就可以容易地知道什么Element绑定了什么方法，简单说这样更容易知道一个按钮或链接点击时调了什么方法脚本。
9、降低代码与XHTML的耦合性
不要过于依赖DOM的一些内容特征来调用不同的脚本代码，而应该定义不同功能的方法，然后在DOM上调用，这样不管DOM是按钮还是链接，方法的调用都是一样的，比如像下面的实现显然会存在问题：
function myBtnClick(obj){　if (/确定/.test(obj.innerHTML)) 　　alert('OK');　else if (/取消/.test(obj.innerHTML)) 　　alert('Cancel');　else 　　alert('Other');}
&a herf="javascript:;" onclick="myBtnClick(this)"&确定&/a&&a herf="javascript:;" onclick="myBtnClick(this)"&取消&/a&
上面例子其实在一个函数内处理了两件事情，应该分成两个函数，像上面的写法，如果把链接换成按钮，比如改成这样：&input type="button" onclick="myBtnClick(this)" value="确定" /&，那么myBtnClick函数内部的obj.innerHTML就出问题了，因为此时应该obj.value才对，另外如果把按钮名称由中文改为英文也会出问题，所以这种做法问题太多了。
10、一个函数应该返回统一的数据类型
因为JavaScrip是弱类型的，在编写函数的时候有些人对于返回类型的处理显得比较随便，我觉得应该像强类型语言那样返回，看看下面的两个例子：
function getUserName(userID){　if (data[userID])　　return data[userID];　else　　}
应该改为：
function getUserName(userID){　if (data[userID])　　return data[userID];　else　　return "";}
这个方法如果在C#中定义，我们知道它准备返回的数据类型应该是字符串，所以如果没有找到这个数据我们就应该返回空的字符串，而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用，因为返回的空字符串在逻辑判断上可被认作“非”，即与false一样，除非我们使用全等于“===”或typeof进行判断。
11、规范定义JSON对象，补全双引号
使用标准肯定是有好处的，那么为什么还是有人不使用标准呢？我想这可能是懒或习惯问题。也许还会有人跟我说，少写引号可以减轻文件体积，我认为这有道理但不是重点。对于服务器返回的JSON数据，使用标准结构可以利用Firefox浏览器的JSONView插件方便查看（像查看XML那样树形显示），另外你如果使用jQuery做开发，最新版本jQuery1.4+是对JSON格式有更高要求的，具体的可以自己查阅jQuery更新文档。比如：{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。
12、不在文件中留下未来确定不再使用的代码片段
当代码调整或重构后，之前编写的不再使用的代码应该及时删除，如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积，这对团队其它成员甚至自己都起到一定干扰作用，怕将来自己看回代码都搞不懂这方法是干什么的，是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。
13、不重复定义其他团队成员已经实现的方法
对于大型项目，一般会有部分开发成员实现一些通用方法，而另外一些开发成员则要去熟悉这些通用方法，然后在自己编写模块遇到有调用的需要就直接调用，而不是像有些开发者喜欢“单干”，根本不会阅读这些通用方法文档，在自己代码中又写了一遍实现，这不仅产生多余的代码量，当然也是会影响团队开发效率的，这是没有团队合作精神的表现，是重复造轮子的悲剧。
比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义，对于一些复杂的方法更应该如此。
14、调用合适的方法
当有几个方法都可以实现同类功能的时候，我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON，而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型（设置dataType参数）的做法。如果使用$.getJSON，在代码中我们一眼能看出本次请求服务器返回的是JSON。
温馨提示：jQuery1.4后，如果服务器有设置数据输出的ContentType，比如ASP.NET C#设置 Response.ContentType = "application/json"，那么$.get将与$.getJSON的使用没有什么区别。
15、使用合适的控件存储合适的数据
曾发现有人利用DIV来保存JSON数据，以待页面下载后将来使用，像这样：&div id="json"&{ "name":"Tom"}&/div&，显然这个DIV不是用来界面显示的，如果非要这样做，达到使用HTML文件进行数据缓存的作用，至少改成用隐藏域来存这数据更合理，比如改成：&input type="hidden" value=" { "name":"Tom"}" /&。
其实也可以利用window对象来保存一些数据，像上面的例子，我们可以在AJAX请求页直接包含这样的脚本块：&script&window.userData = { "name":"Tom"};&/script&，当在AJAX请求回调函数中执行完$( "#MyDiv ").html(data)后，在window上就马上有了这一变量。如果采用第一种方法，将不可避免eval(document.getElementById("UserData").innerHTML)。如果在window对象存放大量数据的话，这些数据不用时要及时手动清理它们，它们是要等浏览器刷新或重启后才会消失的，这就会增加内存开销。
16、永远不要忽略代码优化工作
代码最优化是每个程序员应该努力达到的目标，也应该成为程序员永远的追求。写代码的时候，不应该急着把功能实现出来，要想一下如何写代码，代码的执行效率才是较好的。
举个例子：假设有定义getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)}，那么有人可能会写出这样的代码$("MyDiv").parentNode.removeChild($("MyDiv"))，其实这里执行了两次getElementById DOM查找，如果改成这样将更好：var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv)。还好getElementById的DOM查找算比较快，如果换成getElementsByTagName则更应该注重优化了。jQuery开发团队也有提醒大家要注意这方面的问题。
当然，代码优化技巧也是需要个人不断积累的。曾有朋友跟我说他写网站后台代码从来不用考虑优化的，因为他们网站用的是至强四核服务器，我觉得这是很可笑的。
17、会分析策划文档，能用面向对象方法进行接口定义和代码组织
这一能力对于每一个程序员来说都是非常重要的，这也是决定一个程序员水平高低的一个重要因素。能够把需求细化并抽象出不同的类，然后有条理地编写代码，使代码结构清晰，可读性高，代码易于维护，不至于太过程化而且杂乱无章，这样才算是一个优秀的程序员。作者：WebFlash 出处：http://webflash.cnblogs.com
最新技术文章:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！
(C)9IT.COM,E-mail:www_169it_com#163.com(请将#改为@)posts - 458,&
comments - 290,&
trackbacks - 0
&许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下.
& &&First&- 我们明确在使用jQuery的Ajax忽略掉的问题,那就是Ajax的操作本身是操作一个XMLHttpRequest对象,所有的请求发送和监听都是围绕它进行的.
& & 在不同浏览器中,以及IE的不同浏览器版本下都会有不一样的Function创建这个对象,或者方法不同或者参数不同.
function&CreateXHR() {
&&&&&&&&&&&&var&xhrobj =&false;
&&&&&&&&&&&&try&{
&&&&&&&&&&&&&&&&xhrobj =&new&ActiveXObject("Msxml2.XMLHTTP");&
&&&&&&&&&&&&}
&&&&&&&&&&&&catch&(e) {
&&&&&&&&&&&&&&&&try&{
&&&&&&&&&&&&&&&&&&&&xhrobj =&new&ActiveXObject("Microsoft.XMLHTTP");&
&&&&&&&&&&&&&&&&}&catch&(e2) {
&&&&&&&&&&&&&&&&&&&&xhrobj =&false;
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&&&&&if&(!xhrobj &&&typeof&XMLHttpRequest !=&'undefined') {&
&&&&&&&&&&&&&&&&xhrobj =&new&XMLHttpRequest();
&&&&&&&&&&&&}
&&&&&&&&&&&&return&
& & 为了最终创建出正确的XHR对象,不断用try-catch进行尝试.
& &&Second&- 有了XHR对象,接下来我们调用XMLHttpRequest对象的各个方法就可以了,Ajax对于所谓的异步请求发送无外乎就是通过几个方法来进行的.
& & 我们这里是通过Javascript原生编写异步请求,但是其实并不复杂,只需要记住几个function就可以了.
var&xhr = CreateXHR();
xhr.open("POST",&"demo.jsp",&true);
xhr.setRequestHeader("Content-Type",&"application/x-www-form-urlencoded");
xhr.setRequestHeader("If-Modified-Since",&"0");
xhr.onreadystatechange =&&
xhr.send(null);&
xhr.send("isAjax=1&na=123");&
& & 这里就完成了请求发送,也定义了请求的回调是callback函数,所以最后我们的请求的结果就是在callback函数中.
& &&Third&- 定义callback函数,Ajax的返回是有状态的,这里不同于jQuery的success,所以要自己判断状态码是否正确.
function&callback() {
&&if&(xhr.readyState == 4) {
&&&&if&(xhr.status == 200) {
&&&&&&var&res = xhr.reponseT&
&&&&&&console.log(res);
& & 这样就完成了通过原生Javascript发送Ajax请求.
阅读(...) 评论()