JavaScript常用脚本汇总（三）

下面来详细讲解一下“JavaScript常用脚本汇总（三）”。

概述

本文是JavaScript常用脚本汇总系列的第三篇，主要介绍一些常用的JavaScript脚本及其用法，希望能为广大JavaScript开发者提供一些参考和帮助。本文内容主要包括：局部刷新页面、自动保存草稿、获取浏览器版本信息和判断是否为移动端等。

局部刷新页面

在传统的Web应用程序中，为了更新页面内容常常要重新加载整个页面，这样会造成页面闪烁，用户体验较差。因此，在Web 2.0时代，局部刷新页面技术成为了一个热门话题。局部刷新页面可以通过Ajax技术实现。下面是一个实现局部刷新的示例：

//先定义一个函数用于发送Ajax请求
function refreshContent() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("content").innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET", "ajax.txt", true);
    xmlhttp.send();
}

//定时刷新页面内容
window.setInterval("refreshContent()", 3000);

上面的代码中，我们先定义了一个用于发送Ajax请求的函数refreshContent()。该函数会通过AJAX请求获取服务器端返回的文本数据，并把数据更新到页面上指定的元素中（这里用document.getElementById("content")表示更新到id为“content”的元素中）。

接着，我们使用window.setInterval函数来定时调用refreshContent()函数，这里设置为每3秒钟刷新一次页面内容。这样就可以实现局部刷新页面了。

自动保存草稿

在一些在线系统中，比如博客、论坛等，用户在输入内容时往往需要较长时间，这时如果不能自动保存草稿，就会带来极大的不便。下面就是一段自动保存草稿的JavaScript脚本：

//监听用户输入事件（这里以input事件为例）
document.getElementById("content").addEventListener("input", function () {
    //设置一个定时器，在3秒后保存草稿
    setTimeout(function () {
        saveDraft();
    }, 3000);
});

//保存草稿函数
function saveDraft() {
    var content = document.getElementById("content").value;

    //代码省略，这里可以通过Ajax请求将草稿保存到服务器端
}

上面的代码中，我们使用addEventListener()函数监听用户输入事件（这里以input事件为例），每当用户输入完毕后，就会自动调用saveDraft()函数来保存草稿。在saveDraft()函数中，我们可以通过Ajax请求等方式将草稿保存到服务器端。

获取浏览器版本信息和判断是否为移动端

在一些前端开发中，我们需要根据用户的浏览器版本和设备类型做一些调整。下面是一段用于获取浏览器版本信息和判断是否为移动端的JavaScript脚本：

//获取浏览器版本信息
var userAgent = navigator.userAgent;
var version = "";
if (userAgent.indexOf("MSIE") > -1) {
    version = "IE";
} else if (userAgent.indexOf("Chrome") > -1) {
    version = "Chrome";
} else if (userAgent.indexOf("Firefox") > -1) {
    version = "Firefox";
} else if (userAgent.indexOf("Safari") > -1) {
    version = "Safari";
} else if (userAgent.indexOf("Opera") > -1) {
    version = "Opera";
}

alert(version);

//判断是否为移动端
var isMobile = false;
var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for (var i = 0; i < mobileAgents.length; i++) {
    if (userAgent.indexOf(mobileAgents[i]) > -1) {
        isMobile = true;
        break;
    }
}

alert(isMobile);

上面的代码中，我们使用navigator.userAgent获取了用户所用浏览器的User Agent信息。然后，我们通过判断字符串中包含的关键字来判断用户浏览器的版本号。在判断是否为移动设备时，我们定义了一个包含各类移动设备类型的数组，然后使用循环和indexOf()函数进行匹配。

结束语

以上就是关于“JavaScript常用脚本汇总（三）”的详细攻略。希望这些JavaScript脚本能对广大JavaScript开发者有所启发，提高开发效率和用户体验。