JavaScript常用脚本汇总（一）_javascript技巧

这篇文章主要介绍了JavaScript常用脚本汇总系列的第一篇，给大家分享的是jquery限制文本框只能输入数字、封装DOMContentLoaded事件、用原生JS对AJAX做简单封装、跨域请求之JSONP、千分位格式化，有需要的小伙伴们参考下吧。

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

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

$("input").keyup(function(){ //keyup事件处理
   $(this).val($(this).val().replace(/\D|^0/g,''));
}).bind("paste",function(){ //CTR+V事件处理
   $(this).val($(this).val().replace(/\D|^0/g,''));
}).css("ime-mode", "disabled"); //CSS设置输入法不可用

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

$("#rnumber").keyup(function(){ 
        $(this).val($(this).val().replace(/[^0-9.]/g,'')); 
    }).bind("paste",function(){  //CTR+V事件处理 
        $(this).val($(this).val().replace(/[^0-9.]/g,''));  
    }).css("ime-mode", "disabled"); //CSS设置输入法不可用

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

封装DOMContentLoaded事件

//保存domReady的事件队列
    eventQueue = [];
    //判断DOM是否加载完毕
    isReady = false;
    //判断DOMReady是否绑定
    isBind = false;
    /*执行domReady()
     *
     *@param    {function}
     *@execute  将事件处理程序压入事件队列,并绑定DOMContentLoaded
     *          如果DOM加载已经完成，则立即执行
     *@caller
     */
    function domReady(fn){
        if (isReady) {
            fn.call(window);
        }
        else{
            eventQueue.push(fn);
        };
        bindReady();
    };
    /*domReady事件绑定
     *
     *@param    null
     *@execute  现代浏览器通过addEvListener绑定DOMContentLoaded,包括ie9+
     ie6-8通过判断doScroll判断DOM是否加载完毕
     *@caller   domReady()
     */
    function bindReady(){
        if (isReady) return;
        if (isBind) return;
        isBind = true;
        if (window.addEventListener) {
            document.addEventListener('DOMContentLoaded',execFn,false);
        }
        else if (window.attachEvent) {
            doScroll();
        };
    };
    /*doScroll判断ie6-8的DOM是否加载完成
     *
     *@param    null
     *@execute  doScroll判断DOM是否加载完成
     *@caller   bindReady()
     */
    function doScroll(){
        try{
            document.documentElement.doScroll('left');
        }
        catch(error){
            return setTimeout(doScroll,20);
        };
        execFn();
    };
    /*执行事件队列
     *
     *@param    null
     *@execute  循环执行队列中的事件处理程序
     *@caller   bindReady()
     */
    function execFn(){
        if (!isReady) {
            isReady = true;
            for (var i = 0; i < eventQueue.length; i++) {
eventQueue[i].call(window);
};
eventQueue = [];
};
};
//js文件1
domReady(function(){
});
//js文件2
domReady(function(){
});
//注意，如果是异步加载的js就不要绑定domReady方法，不然函数不会执行，
//因为异步加载的js下载之前，DOMContentLoaded已经触发，addEventListener执行时已经监听不到了

用原生JS对AJAX做简单封装

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

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 ajax = function(conf) {
// 初始化
//type参数,可选
var type = conf.type;
//url参数，必填
var url = conf.url;
//data参数可选，只有在post请求时需要
var data = conf.data;
//datatype参数可选
var dataType = conf.dataType;
//回调函数可选
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+")"));
}
}
}
};
};

最后，说明一下此函数的用法

ajax({
type:"post",
url:"test.jsp",
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事件，错误回调几乎是很难实现的。也是最有技术含量的。
* 参考了http://www.php.cn/
* 使用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 a.push(key + '=' + encodeURIComponent(val[i]));
}
}else{
a.push(key + '=' + encodeURIComponent(val));
}
}
return a.join('&');
}
function request(url,opt){
function fn(){}
var opt = opt || {},
data = opt.data,
success = opt.success || fn,
failure = opt.failure || fn,
scope = opt.scope || win,
timestamp = opt.timestamp;
if(data && typeof data == 'object'){
data = _serialize(data);
}
var script = doc.createElement('script');
function callback(isSucc){
if(isSucc){
if(typeof jsonp != 'undefined'){// 赋值右边的jsonp必须是后台返回的，此变量为全局变量
done = true;
success.call(scope, jsonp);
}else{
failure.call(scope);
//alert('warning: jsonp did not return.');
}
}else{
failure.call(scope);
}
// Handle memory leak in IE
script.onload = script.onerror = script.onreadystatechange = null;
jsonp = undefined;
if( head && script.parentNode ){
head.removeChild(script);
}
}
function fixOnerror(){
setTimeout(function(){
if(!done){
callback();
}
}, timeout);
}
if(ie678){
script.onreadystatechange = function(){
var readyState = this.readyState;
if(!done && (readyState == 'loaded' || readyState == 'complete')){
callback(true);
}
}
//fixOnerror();
}else{
script.onload = function(){
callback(true);
}
script.onerror = function(){
callback();
}
if(opera){
fixOnerror();
}
}
if(data){
url += '?' + data;
}
if(timestamp){
if(data){
url += '&ts=';
}else{
url += '?ts='
}
url += (new Date).getTime();
}
script.src = url;
head.insertBefore(script, head.firstChild);
}
return {load:request};
}(this);

调用方式如下：

Sjax.load('jsonp66.js', {
success : function(){alert(jsonp.name)},
failure : function(){alert('error');}
});

千分位格式化

function toThousands(num) {
var num = (num || 0).toString(), result = '';
while (num.length > 3) {
        result = ',' + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
    }
    if (num) { result = num + result; }
    return result;
} 

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