JavaScript常用方法

总结的一些JavaScript常用方法

1.获取url参数

/** 获取url参数 **/

function getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if( r != null) {
		return unescape(r[2]); 
	}
	return null;
}

2.原生ajax

/** 原生ajax **/

var ajax = function (options) {
    options = options || {};
    options.type = (options.type || "GET").toUpperCase();
    options.dataType = options.dataType || "json";
    var params = formatParams(options.data);

    //创建 - 非IE6 - 主流浏览器提供了XMLHttpRequest对象
    if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
    } else {
    	//低版本的IE浏览器没有提供XMLHttpRequest对象，IE6以下
    	//所以必须使用IE浏览器的特定实现ActiveXObject
        var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //连接 和 发送
    if (options.type == "GET") {
        xhr.open("GET", options.url + "?" + params, true);
        xhr.send(null);
    } else if (options.type == "POST") {
        xhr.open("POST", options.url, true);
        //设置表单提交时的内容类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }

    //接收 - readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if (status >= 200 && status < 300) {
                options.success && options.success(xhr.responseText, xhr.responseXML);
            } else {
                options.fail && options.fail(status);
            }
        }
    }
}

//格式化参数 --- 处理参数
function formatParams(data) {
    var arr = [];
    for (var name in data) {
        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
    }
    arr.push(("v=" + Math.random()).replace(".",""));
    return arr.join("&");
}

3.动态加载JavaScript

// 方法一：动态加载js文件
// 动态加载js脚本文件
function loadScript(url) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}
// 测试
loadScript("javascript/lib/cookie.js");

// 方法二：动态加载js文件
// 动态加载js脚本
function loadScriptString(code) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    try{
        // firefox、safari、chrome和Opera
        script.appendChild(document.createTextNode(code));
    }catch(ex) {
        // IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
        script.text = code;
    }
    document.body.appendChild(script);
}
// 测试
var text = "function test(){alert('test');}";
loadScriptString(text);
test();

4.动态加载css

// 方法一：动态加载css文件
// 动态加载css文件
function loadStyles(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}
// 测试
loadStyles("css/secondindex.css");

// 方法二：动态加载css文件
// 动态加载css脚本
function loadStyleString(cssText) {
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        // firefox、safari、chrome和Opera
        style.appendChild(document.createTextNode(cssText));
    }catch(ex) {
        // IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性
        style.styleSheet.cssText = cssText;
    }
    document.getElementsByTagName("head")[0].appendChild(style);
}
// 测试
var css = "body{color:blue;}";
loadStyleString(css);