JavaScript编程常用函数

1.addLoadEvent()

在html页面加载完毕时，经常需要调用相应脚本来对页面进行操纵，通常情况下，我们会使用如下的代码：

//假设函数func()已经定义过
window.onload = func；

但是以上代码有个问题，如果在html页面加载完毕时，我们需要调用多个函数来对html页面进行操纵，只能像下面这样：

//假设函数firstFunction()，secondFunction()已经定义过
window.onload = firstFunction;
windoe.onload = secondFunction;

可事实上在JavaScript里每个事件处理函数只能绑定一条指令，所以上面这段代码，最终 secondFunction 将取代 firstFunction，即最后一次绑定的处理函数会覆盖掉之前所有的绑定函数。这不是我们期望的，所以此方法不可行。

有一种方法可以避免这一问题，即先创建一个匿名函数来容纳要绑定的事件处理函数，然后把那个匿名函数绑定到 window.onload 事件上。代码如下所示：

window.onload = function() {
    firstFunction();
    secondFunction();
}

上面这段代码已然能够很好的工作，如需绑定多个事件处理函数，只需在匿名函数内部添加要绑定的函数名即可。但是，在实际编程中还是不够完美，试想一下：如果脚本代码量巨大，需要绑定在onload事件上的函数非常多且事先我们不知道最终要绑定哪些函数，那么等到绑定时我们还需找到匿名函数的函数体，再把对应的函数名往里填，颇有些不便。

基于设计匿名函数的思路，我们可以设计出最佳解决方案，尽管这个方案需要额外地编写一些代码，但好处是一旦有了这些代码，把函数绑定到 window.onload 事件就非常方便易行了。现在设计一个函数 addLoadEvent()，用来包含这些代码，在需要绑定新的函数时，只需调用 addLoadEvent()。代码如下：

//函数addLoadEvent()的形参func表示函数名，调用此函数时，只需把要绑定的函数名传给它
function addLoadEvent(func) {
    //声明变量 oldOnload 存储现有的 window.onload 事件处理函数的值
    var oldOnload = window.onload;  
    //检测 oldOnload 的类型，若不是函数调用，说明在这个处理函数上还没有绑定任何函数，就把新函数func传给它
    if (typeof oldOnload != "function") {  
        window.onload = func;
    } else {
        //若已经绑定过了函数，则把新函数追加到现有指令的末尾
        window.onload = function() {
            oldOnload();
            fun();
        }
    }
}

函数 addLoadEvent()编写完毕，现在若需绑定新的事件处理函数，直接调用它即可。

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

函数 addLoadEvent() 使用频率比较高，我们可以编写一个js文件把它保存在里面，日后在需要时在html文件里直接引用，然后在其他的js文件里脚即可直接调用它。

2.insertAfter()

DOM提供了 insertBefore() 函数，这个函数可以用来把一个新元素插入到一个现有元素的前面。函数 insertBefore() 有两个参数，它的使用语法如下：

//newElement为要插入的新元素，targetElement为目标元素，即把newElement插入到targetElement元素之前
//parentElement为目标元素的父元素，用来调用insertBefore()函数
parentElemenent.insertBefore(newElemeent,targetElement);

然而，DOM并没有提供一个 insertAfter() 函数，用来把新元素插入到目标元素之后。这并不是bug，因为有了DOM提供的 insertBefore() 函数以及其他工具，我们可以很容易编写出类似的insertAfter() 函数，于是，DOM也就没必要另外提供相似的 insertAfter() 函数了。

事实上，将一个新元素插入到某个目标元素之后的位置，等价于将一个新元素插入到某个目标元素的下一个兄弟节点之前的位置。但是这里有一种例外情况，即目标元素不是其父元素的最后一个子节点，因为如果这样，那么目标元素便没有后一个兄弟节点。这个例外情况，我们可以使用 append() 方法将这个新元素直接追加为目标元素的父元素的最后一个子节点。具体代码如下：

//newElement为要插入的新元素，targetElement为目标元素
function insertAfter(newElement,targetElement) {
    //parentElement为目标元素的父元素
    var parent = targetElement.parentNode;
    //检查目标元素是不是 parent 的最后一个子元素
    if (parent.lastChild == targetElement) {
        //如果是，调用 appendChild() 方法把新元素追加到 parent 元素的子节点列表最后
        parent.appendChild(newElement);
    } else {
        //若不是，即把新元素插入到目标元素的下一个兄弟元素之前的位置
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

3.预加载图像

实现预加载图像的方法很简单，只要在 JavaScript 里实例化一个 Image 对象，再把需要预加载的图像的 URL传递给它即可：

var img1 = new Image();
img1.src = "http://www.example.com/images/imgage0.gif";

需要预加载多个图像的情况是很常见的。达到这个目标的简单方式是把图像的 URL 保存在数组里，然后循环遍历数组，把每个图像 URL 赋予 image 对象，从而达到把它们保存到浏览器缓存的目的。下面这个函数绑定到 window.onload 事件上，当页面首次加载时，图像数据就保存到缓存里了。

window.onload = function() {
    var img1 = new Image();
    var img_urls = new Array();
    img_urls[0] = "http://www.example.com/images/image0.gif";
    img_urls[1] = "http://www.example.com/images/image1.gif";
    img_urls[2] = "http://www.example.com/images/image2.gif";
    for (var i=0; i<img_urls.length; i++) {
        img1.src = img_urls[i];
    }
}

4.cookie相关函数

cookie是一个具有特定格式的文本字符串：

cookieName=cookieValue;expires=expirationDateGMT;path=URLpath;domain=siteDomain;

cookiename 和 cookieValue 给 cookie 命名并赋值，这是 cookie 中唯一必须有的部分。字符串的其余部分都是可选的。expires 属性表明了 cookie 的过期日期（GMT时间格式），path 属性指定可以使用 cookie 的目录，domain 属性向浏览器指明 cookie 属于哪个域。

还可以在一个页面上设置多个 cookie，格式如下：

"cookieName1=cookieValue1;expires=expireationDateGMT1;path=sitePath1;domain=siteDomain1";
"cookieName2=cookieValue2;expires=expireationDateGMT2;path=sitePath2;domain=siteDomain2"

同样，只有名称和值对是必须有的字段。
split(“; “) 命令将多个 cookie 记录分隔为数组，各个 cookie 从零开始编号。注意：这个命令中分号后面有一个空格。cookieArray[0] 是多个 cookie 记录中的第一个 cookie，cookieArray[1] 是下一个 cookie，以此类推。

4.1.编写cookie

//编写cookie的函数createCookie()
//参数name为cookie的名称；value为cookie的值；days为cookie的有效日期，即此cooke能在硬盘保留多少天；
//path为cookie存储的URL路径；domain为cookie存储的域
function createCookie(name,value,expireDate,path,domain) {
    if (expireDate) {
        //如果指定了此cookie的有效天数,便据此推算出cookie的过期日期保存在cookie的expires属性里
        var expireDate = new Date();
        expireDate.setTime(expireDate.getTime() + (days*24*60*60*1000));
        var expires = expireDate.toGMTString();
    } else {
        var expires = "";
    }
    cookieString = name + "=" + escape(value);
    if (expires) {
        //某些字符不能在cookie里使用，包括分号、逗号及空白符号等。
        //在把数据存储到cookie之前，需要使用escape()函数对其进行编码
        cookieString += ";expires=" + escape(expires);
    }
    if (path) {
        cookieString += ";path=" +escape(path);
    }
    if (domain) {
        cookieString += ";domain=" + escape(domain);
    }
    document.cookie = cookieString;
}

4.2.读取cookie

//读取cookie的函数getCookie()
//参数name表示要读取的cookie的名称
function getCookie(name) {
    var nameEquals = name + "=";
    //使用split("; ")将此页面存储的多个cookie分离开保存在数组里
    var thisCookie = document.cookie.split("; ");
    for (var i=0; i<thisCookie.length; i++) {
        var theCookie = thisCookie[i];
        //比对每个cookie的首部是否与字符串nameEquals相同，以此检测要读取的cookie
        if (theCookie.indexOf(nameEquals) == 0) {
            //使用substring()函数提取要读取的cookie的值，即cookie字符串中"cookieName="之后的部分
            //注意：需要使用unescape()函数对cookie的值进行解码后才能输出
            return unescape(theCookie.substring(nameEquals.length,theCookie.length));
        }
    }
    return null;
}

4.3.删除cookie

要删除一个cookie，只需要把它的失效日期设置为今天以前的日期，浏览就会认为它已经失效了，从而删除它。

//删除cookie的函数deleteCookie()
//参数name为要删除的cookie的名称
function deleteCookie(name) {
    //再次调用编写cookie的函数createCookie()，将值-1传给它的days参数即可
    create(name,"",-1);
}

5.Ajax相关函数

XMLHttpRequest 对象的 open() 方法让 XMLHttpRequest 对象做好与服务器通信的准备。它有三个参数，第一个参数指定要使用的 HTTP 方法（GET 或 POST），第二个参数指定请求的目标 URL（如果是使用 GET 类型的请求，URL 需要进行适当的编码，其中要包含全部的参数及其值），第三个参数指定处理请求的方式（默认为 true，表示异步；为 false 时，表示同步）。

在使用 open() 方法准备好 XMLHttpRequest 对象之后，就可以利用 send() 方法发送请求了，它接收一个参数。如果使用的是方式是 GET，那么请求的内容就必须编码到目标 URL，然后调用 send() 方法时就可以使用参数 null；如果是发送 POST 请求，请求的内容（也需要适当的编码）会以参数方式传递给 send() 方法。

5.1.跨浏览器创建XMLHttpRequest对象

function getXMLHttpRequest() {
    try {
        try {
            //在早期版本IE里
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            //安装了不同版本的XML解析器的IE
            return new ActiveXObject("Msxml2.XMLHTTP");
        }
    } catch (e) {
        //本身支持XMLHttpRequest对象的浏览器
        return new XMLHttpRequest();
    }
}

有了这个编写好的函数，再创建 XMLHttpRequest 对象时就只需要调用 ：

var req = getXMLHttpRequest();

5.2.处理GET请求

任何浏览器都维护着访问页面的“缓存”，也就是页面内容在浏览器所在计算机硬盘上的存储。当用户请求访问特定的 Web 页面时，浏览器首先会尝试从缓存里加载页面，而不是立即提交新的 HTTP 请求。虽然这种方式可能对于缩短页面加载时间有些好处，但它给编写 Ajax 程序制造了困难。因为 Ajax 是关于与服务器通信的，而不是从缓存里重新加载信息。当我们向服务器发出一个异步请求时，要求每次都生成一个新的 HTTP 请求。

解决这个问题的一种常见技巧是在请求数据里添加一个参数，给它赋予一个随机的无意义的值。在使用 GET 请求时，这就意味着要在 URL 末尾添加一个新的“参数=值”对。只要 URL 里的随机内容每次都是不一样的，就能让浏览器觉得这是一个发给新地址的请求，从而生成一个新的 HTTP 请求。

基于此，我们有两种解决方案：
1.在 URL 末尾添加一个随机数，例如：myserverscript.php?surname=Smith&rand=1374654163
2.在 URL 末尾添加当前日期和时间组成的字符串，例如：myserverscript.php?username=Smith&1444313185651

//处理 GEI 请求的 requestGET() 函数
//参数 url 为请求的目标 URL，
//query 为附加到 URL 的查询字符串，包含了服务器端程序所需的全部参数，以“参数=值”对的形式进行编码，
//req 为实现调用的 XMLHttpRequest 对象
function requestGET(url,query,req) {
    var myRandom = parseInt(Math.random()*99999999,10);
    if (query == "") {
        //此处也可写为`var callUrl = url + "?rand=" + new Date().getTime()`
        var callUrl = url + "?rand=" + myRandom;  
    } else {
        //此处也可写为`var callUrl = utl + "?" + query + "&rand=" + new Date().getTime()`
        var callUrl = url + "?" + query + "&rand=" + myRandom;
    }
    req.open("GET",callUrl,true);
    req.send(null);
}

注意：在调用 requestGET() 函数之前,传递给 query 参数的值必须已经完成了必要的编码。

这个函数为确保查询字符串的格式正确做了一点处理。对于没有查询字符串的调用，随机数附加在附加到 URL 时必须要跟在问号之后，例如：www.example.com?rand=634684135 而当查询字符串不为空时，随机数必须跟在“&”之后，例如：www.example.com?username=admin&rand=416341313

5.3.处理POST请求

POST 请求不像 GET 请求那样会受到缓存的影响，所以不需要给查询字符串添加随机内容。POST 请求不是把参数信息附加到字符串，而是把它作为一个参数传递给 send() 方法。同时，还需设置一个 HTTP 标题，告诉服务器端程序我们发送何种类型的数据。

//处理 POST() 请求的 requestPOST() 函数
//三个参数的意义与 requestGET() 函数的参数意义相同
function requestPOST(url,query,req) {
    req.open("POST",url,true);
    //函数 setRequestHeader("x","y") 有两个参数，用于设置“参数=值”对（x=y），把它赋予与请求一起发送的标题
    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    req.send(query);
}

5.4.实现Ajax调用

为了尽可能地具有通用性，要让用户能够指定使用的回调函数，也就是说在调用 doAjax() 函数时把回调函数的名称（注意：传递的是一个字符串）作为参数传递给 doAjax()，然后在 doAjax() 内部，把 Ajax 调用返回的数据作为参数传递给回调函数，并执行回调函数。假设变量 item 存储了 Ajax 获得的从服务器返回的数据，且回调函数定义为：

function cback(text) {
    //此处为回调函数内部要做的操作
}

那么在 doAjax() 函数内部，把 item 作为参数传递给回调函数并且调用回调函数的代码如下：

//eval() 方法会计算或运行作为参数传递给它的字符串
//本行语句实际上等价于 eval( "cback(item)" ) <=> cback(item)
eval("cback" + "(item)");

基于以上分析，编写实现 Ajax 调用的 doAjax() 函数如下：

//实现 Ajax 调用的 doAjax() 函数
//参数 url 为目标URL，query 为讲过编码的字符串，callback 为回调函数的名称（传递的是一个字符串），
//retype 为 POST 或 GET，getxml 值为1时表示获取 XML 数据（值为0时表示获取文本数据）
function doAjac(url,query,callback,reqtype,getxml) {
    var myreq = getXMLHttpRequest();
    //XMLHttpRequest 对象的 onreadystatechange 属性相当于一个事件，主要用来绑定事件处理器（执行函数）
    myreq.onreadystatechange = function() {
        //XMLHttpRequest 对象的 readyState 属性值为4时，表示服务器请求彻底处理完成可以进行下一步处理了
        if (myreq.readyState == 4) {
            //XMLHttpRequest 对象的 status 属性为服务器返回的 HTTP 状态代码
            //为了达到双重保险，还可以检测 status 的值，若它的值是200，表示服务器成功响应了异步 HTTP 请求
            if (myreq.status == 200) {
                var item = myreq.responseText;
                if (getxml == 1) {
                    item = myreq.responseXML;
                }
                eval(callback + "(item)");
            }
        }
    }
    if (reqtype.toUpperCase() == "POST") {
        requestPOST(url,query,myreq);
    } else {
        requestGET(url,query,myreq);
    }
}