JavaScript常用脚本汇总(一)

前端之家收集整理的这篇文章主要介绍了JavaScript常用脚本汇总(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

jquery限制文本框只能输入数字

jquery限制文本框只能输入数字,兼容IE、chrome、FF(表现效果不一样),示例代码如下:

代码如下:

上面的代码的作用是:只能输入大于0的正整数。

代码如下:

上面代码的作用是:只能输入0-9的数字和小数点。

封装DOMContentLoaded事件

代码如下:

用原生JS对AJAX做简单封装

首先,我们需要xhr对象。这对我们来说不难,封装成一个函数

代码如下:
4037"> var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest(); } catch (e2) { window.alert("您的浏览器不支持ajax,请更换!"); } } return xhr; };

然后,我们来写核心函数

代码如下:
函数可选 var success = conf.success; if (type == null){ //type参数可选,默认为get type = "get"; } if (dataType == null){ //dataType参数可选,默认为text dataType = "text"; } // 创建ajax引擎对象 var xhr = createAjax(); // 打开 xhr.open(type,url,true); // 发送 if (type == "GET" || type == "get") { xhr.send(null); } else if (type == "POST" || type == "post") { xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); xhr.send(data); } xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { if(dataType == "text"||dataType=="TEXT") { if (success != null){ //普通文本 success(xhr.responseText); } }else if(dataType=="xml"||dataType=="XML") { if (success != null){ //接收xml文档 success(xhr.responseXML); } }else if(dataType=="json"||dataType=="JSON") { if (success != null){ //将json字符串转换为js对象 success(eval("("+xhr.responseText+")")); } } } }; };

最后,说明一下此函数用法

代码如下:
", data:"name=dipoo&info=good", dataType:"json", success:function(data){ alert(data.name); } });

跨域请求之JSONP

代码如下:
增加对请求失败的处理,虽然这个功能用处不太大,但研究了各个浏览器下script的差异性 * 1,IE6/7/8 支持script的onreadystatechange事件 * 2,IE9/10 支持script的onload和onreadystatechange事件 * 3,Firefox/Safari/Chrome/Opera支持script的onload事件 * 4,IE6/7/8/Opera 不支持script的onerror事件; IE9/10/Firefox/Safari/Chrome支持 * 5,Opera虽然不支持onreadystatechange事件,但其具有readyState属性.这点甚是神奇 * 6,用IE9和IETester测试IE6/7/8,其readyState总为loading,loaded。没出现过complete。 * * 最后的实现思路: * 1,IE9/Firefox/Safari/Chrome 成功回调使用onload事件,错误回调使用onerror事件 * 2,Opera 成功回调也使用onload事件(它压根不支持onreadystatechange),由于其不支持onerror,这里使用了延迟处理。 * 即等待与成功回调success,success后标志位done置为true。failure则不会执行,否则执行。 * 这里延迟的时间取值很有技巧,之前取2秒,在公司测试没问题。但回家用3G无线网络后发现即使所引用的js文件存在,但由于 * 网速过慢,failure还是先执行了,后执行了success。所以这里取5秒是比较合理的。当然也不是绝对的。 * 3,IE6/7/8 成功回调使用onreadystatechange事件,错误回调几乎是很难实现的。也是最有技术含量的。 * 参考了 * 使用nextSibling,发现不能实现。 * 令人恶心的是,即使请求的资源文件不存在。它的readyState也会经历“loaded”状态。这样你就没法区分请求成功或失败。 * 怕它了,最后使用前后台一起协调的机制解决最后的这个难题。无论请求成功或失败都让其调用callback(true)。 * 此时已经将区别成功与失败的逻辑放到了callback中,如果后台没有返回jsonp则调用failure,否则调用success。 * * * 接口 * Sjax.load(url,{ * data // 请求参数 (键值对字符串或js对象) * success // 请求成功回调函数 * failure // 请求失败回调函数 * scope // 回调函数执行上下文 * timestamp // 是否加时间戳 * }); * */ Sjax = function(win){ var ie678 = !-[1,], opera = win.opera, doc = win.document, head = doc.getElementsByTagName('head')[0], timeout = 3000, done = false; function _serialize(obj){ var a = [],key,val; for(key in obj){ val = obj[key]; if(val.constructor == Array){ for(var i=0,len=val.length;i

调用方式如下:

代码如下:

千分位格式化

代码如下:
3) { result = ',' + num.slice(-3) + result; num = num.slice(0,num.length - 3); } if (num) { result = num + result; } return result; }

以上就是本文给大家分享的javascript常用脚本了,希望大家能够喜欢。

猜你在找的JavaScript相关文章