GVKun编程网logo

JavaScript 新兴的API——“其他新API”的注意要点

4

在本文中，我们将为您详细介绍JavaScript新兴的API——“其他新API”的注意要点的相关知识，此外，我们还会提供一些关于JavaScriptAjax与Comet——“XMLHttpReques

在本文中，我们将为您详细介绍JavaScript 新兴的API——“其他新API”的注意要点的相关知识，此外，我们还会提供一些关于JavaScript Ajax与Comet——“XMLHttpRequest2级”的注意要点、JavaScript Ajax与Comet——“XMLHttpRequest对象”的注意要点、JavaScript Ajax与Comet——“跨源资源共享”的注意要点、JavaScript Ajax与Comet——“进度事件”的注意要点的有用信息。

本文目录一览：

JavaScript 新兴的API——“其他新API”的注意要点

JavaScript 新兴的API——“其他新API”的注意要点

早期的动画循环

在js中创建动画的典型方式就是用setInterval方法控制所有动画：

(function() {
    function animations() {
        //animations...
    }
    setInterval(animations, 100);
})()

最平滑动画的最佳循环间隔是100ms/60，约为17ms；大多数电脑显示器的刷新频率是60Hz。

但是如果UI线程繁忙，比如忙于处理用户操作，那么即使把代码加入到列队也不会立即执行。

循环间隔的问题

CSS的动画优势在于浏览器知道动画什么时候开始，因此会计算出正确的循环间隔，在恰当的时候刷新UI，而对于JavaScript动画，浏览器无从知晓什么时候开始。

目前，W3C已经着手起草requestAnimationFrame()API。

Page Visibility API

该API包括以下三个部分：

  • document.hidden：是否隐藏

  • document.visibilityState：4个可能的状态值

    • 后台标签或最小化

    • 前台标签

    • 实际页面隐藏，但用户看到页面预览

    • 屏幕外执行预渲染

  • visibilitychange事件

如：

document.addEventListener("visibilitychange", function () {
    console.log(document.hidden);
});

Geolocation API

navigator.geolocation这个对象包括三个方法：

  • getCurrentPosition：接收3个参数（成功回调函数、可选的失败回调函数、可选的选项对象）

    • 成功回调函数会接收到一个Position对象参数，该对象有两个属性：coords和timestamp。

      • coords：对象包括latitude和longitude以及accuracy

    • 失败回调函数接收error对象

      • error对象有code和message两个属性

    • 可选对象接收一个对象：对象内容有enableHighAccuracy、timeout以及maximumAge

  • watchPosition：该方法接收的参数与上面的一致。配合clearWatch方法使用，类似setTimeout和clearTimeout

  • clearWatch

如：

navigator.geolocation.getCurrentPosition(function(position) {
    do_something(position.coords.latitude, position.coords.longitude); //第一个参数为成功的回调函数
});

navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position.coords.latitude);
    console.log(position.coords.timestamp);
}, function(err) { //第二个参数为失败的回调函数
    console.log("Error code: " + err.code);
    console.log("Error message: " + err.message);
});

navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position.coords.latitude);
    console.log(position.coords.timestamp);
}, function(err) {
    console.log("Error code: " + err.code);
    console.log("Error message: " + err.message);
}, { //第三个参数接收对象
    enableHighAccuracy: true,
    timeout: 1000,
    maximumAge: 30000
});

File API

HTML5 DOM中添加了元素files集合，通过文件输入字段选择一个或多个文件，files集合中将包括一组File对象，每个File对象对应着一个文件，每个File对象有下面的只读属性：

  • name：本地文件系统中的文件名

  • size：文件的字节大小

  • type：字符串，文件的MIME类型

  • lastModifiedDate：字符串，上次文件被修改的事件

如：

var files = document.getElementById("files");
files.onchange = function () {
    var list = event.target.files; //FileList对象
    // console.log(list); //name: lastModified: lastModifiedDate: webkitRelativePath:
    for (var i = 0, len = list.length; i < len; i++) {
        console.log("name: " + list[i].name + "; type: " + list[i].type + "; size: " + list[i].size + "bytes"); //name: opening.png; type: image/png; size: 324991bytes
    };
};

FileReader

浏览器都支持前两个方法：

  • readAsText；

  • readAsDataURL

  • readAsBinaryString

  • readAsArrayBuffer

如下例子：

var files = document.getElementById("files");
files.onchange = function() {
    var files = event.target.files,
        info = "",
        output = document.getElementById("output"),
        type = "default",
        reader = new FileReader();

    if (/image/.test(files[0].type)) {
        reader.readAsDataURL(files[0]);
        type = "image";
    } else {
        reader.readAsText(files[0]);
        type = "text";
    }

    reader.onerror = function () {
        output.innerHTML = "Could not read, error: " + reader.error.code;
    };
    reader.onprogress = function () {
        if (event.lengthComputable) {
            output.innerHTML = event.loaded + "/" + event.total;
        }
    };
    reader.onload = function () {
        var html = "";
        switch (type) {
            case "image":
                html = "<img src=" + reader.result +  ">";
                break;
            case "text":
                html = reader.result;
                break;
        }
        output.innerHTML = html;
    };
};

如果想中断则需要调用abort方法。

读取部分内容

Blob的实例，slice()方法

blob.slice(startByte, length)

对象URL

引用保存在File或Blob中数据的URL：

window.URL.createObjectURL()方法

要释放内存则把对象URL传给：

window.URL.revokeObjectURL()方法

拖放文件

var droptarget = document.getElementById("drop");
droptarget.addEventListener("dragenter",function () {
    event.preventDefault();
});
droptarget.addEventListener("dragover",function () {
    event.preventDefault();
});
droptarget.addEventListener("drop",function () {
    event.preventDefault();
    var file = event.dataTransfer.files[0];
    console.log(file.name)
});

在drop事件中，可以通过event.dataTransfer.files读取文件信息。

XHR方法上传文件

略

data = new FormData();
...
data.append("file" + i, files[i]);
...
xhr.send(data);

Web 计时

Web Timing API

  • window.performance对象

    • PerformanceNavigation.redirectCount

    • type

  • performance.timing属性

    • navigationStart

    • unloadEventStart

    • unloadEventEnd

    • redirectStart

    • redirectEnd

    • fetchStart

    • domainLookupStart

    • domainLookupEnd

    • connectStart

    • connectEnd

    • secureConnectionStart

    • requestStart

    • responseStart

    • responseEnd

    • domLoading

    • domInteractive

    • domContentLoadedEventStart

    • domContentLoadedEventEnd

    • domComplete

    • loadEventStart

    • loadEventEnd

    • toJSON

Web Workers

略

JavaScript Ajax与Comet——“XMLHttpRequest2级”的注意要点

JavaScript Ajax与Comet——“XMLHttpRequest2级”的注意要点

并非所有的浏览器都完整的实现了XMLHttpRequest 2 级的规范， 但是所有的浏览器都实现了它部分的规范。

FormData

  • FormData类型

  • append()向其添加数据，包含两个参数：键和值；

如：

var data = new FormData();
data.append("name", "oliver");

也可以用表单元素的数据预先想其中填入键值对：

var data = new FormData(document.forms[0]);

它是为序列化表单以及创建于表单格式相同的数据提供了遍历:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            console.log(xhr.responseText);
        } else {
            console.log("error");
        }
    }
};
xhr.open("post", "postexample.php", true);
var form = document.getElementById("form1");
xhr.send(new FormData(form));

它的方便之处在于不用明确的在XHR对象上设置请求头部。

超时设定

IE8+唯一支持的超时设定事件，XHR对象的ontimeout事件。XHR对象的timeout设定超时时间，单位是毫秒数。这些设定要方法open之后，send之前。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            console.log(xhr.responseText);
        } else {
            console.log("error");
        }
    }
};
xhr.open("get", "getexample.php", true);
xhr.timeout = 1000;
xhr.ontimeout = function () {
    alert("Request did not return in a second.");
};
xhr.send(null);

overrideMimeType()方法

用于重写XHR响应的MIME类型。它能强迫服务器返回的数据类型给些为本方法提供的类型。使用方法：
在open之后，send之前。

xhr.open("get", "getexample.php", true);
xhr.overrideMimeType("text/xml");
xhr.send(null);

JavaScript Ajax与Comet——“XMLHttpRequest对象”的注意要点

JavaScript Ajax与Comet——“XMLHttpRequest对象”的注意要点

在IE5中，XHR对象是通过MSXML库中的ActiveX对象实现的。在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MXSML.XMLHttp.6.0。

适用于IE7之前的浏览器的代码：

function createXHR() {
    if (typeof arguments.callee.activeXString != "string") {
        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
            i, len;
        for (var i = 0, len = versions.length; i < len; i++) {
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            } catch (e) {
                //
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
}

IE7之后的版本和其他浏览器都会使用下面的函数来创建：

var xhr = new XMLHttpRequest();

兼容代码：

function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
        if (typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                i, len;
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (e) {
                    //
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR Object available.");
    }
}

兼容代码的应用：

var xhr = new createXHR();

XHR的用法

在使用XHR对象时，要调用的第一方法时

  • open（），它接收三个参数：要发送请求的类型，请求的URL和表示是否异步发送请求的布尔值。

如：

xhr.open("get", "note.txt", false);

open()表示启动一个请求以备发送，send()方法才是真正的发送；

要发送特定的请求，要向下面一样调用

  • send()方法：

如：

xhr.open("get", "note.txt", false);
xhr.send(null);

XHR从服务器返回后，发生变化的属性，即保存服务器相应数据的属性为：

  • responseText:作为响应主体被返回的文本

  • responseXML:如果响应类型是"text/xml"和"application/xml"，则保存着响应数据的XML DOM文档

  • status：响应的HTTP状态

  • statusText：HTTP状态的说明

一般来说，可以将HTTP状态吗为200作为成功标志，此时responseText属性内容准备就绪，responseXML也应该能够访问。此外状态吗为304表示请求的资源没有被修改，可以直接使用浏览器中缓存的版本。

完整代码如下：

var xhr = new XMLHttpRequest();

xhr.open("get", "note.txt", false);
xhr.send(null);

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    document.write(xhr.responseText);
} else {
    alert("Request was unsuccessful: " + xhr.status);
}

要注意的是：

我们在多数情况下都要发送异步请求的，才能让js继续执行而不必等待响应。

可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

  • 0：未初始化。尚未调用open()；

  • 1：启动。已经调用open()但未调用send()；

  • 2：发送。已经调用send()但尚未接收到响应；

  • 3：接收。已经接收到部分响应数据；

  • 4：完成。已经接收到全部响应数据，而且可以在客户端中使用；

具体格式如下：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
            //......
        }
    }
};
xhr.open("get", "user.json", true);
xhr.send();

举个例子：

json文件：

[{
    "name": "oliver",
    "age": 18,
    "user": true
}, {
    "name": "troy",
    "age": 26,
    "user": true
}]

dom：

<pre id="pre"></pre>
<button id="btn">insert</button>

js：

var btn = document.getElementById("btn"),
    pre = document.getElementById("pre"),
    obj = null;

btn.onclick = function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                obj = JSON.parse(xhr.responseText);
                pre.innerHTML = obj[1].name; //troy
            }
        }
    };
    xhr.open("get", "user.json", true);
    xhr.send();
};

当点击btn时，pre部分显示获取的json文件中的部分信息。

另外在接收到响应之前还可以调用

  • abort()方法来取消异步请求。

如下所示：


xhr.abort();

在终止请求之后，还应该对XHR对象进行解引用操作。由于内存原因，不建议重用XHR对象。

HTTP头部信息

XHR对象提供了操作请求头部和响应头部信息的方法。 在默认情况下，在发送XHR请求同时，还会发送下列头部信息：

  • Accept： 浏览器能够处理的内容类型

  • Accept - Charset： 浏览器能够显示的字符集

  • Accept - Encoding: 浏览器能够处理的压缩编码

  • Accept - Language: 浏览器当前设置的语言

  • Connection: 浏览器与服务器之间连接的类型

  • Cookie: 当前页面设置的任何Cookie

  • Host: 发送请求的页面所在的域

  • Referer: 发送请求的页面的URI

  • User - Agent: 浏览器的用户代理字符串

使用

  • setRequestHeader()方法可以设置自定义的请求头部信息。

这个方法接收两个参数： 头部字段名和头部字段值。 要成功发送请求头部信息， 必须在调用open（） 方法之后且send（） 方法之前调用它。 建议使用自定义的头部名称。如：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
            //......
        }
    }
};
xhr.open("get", "user.json", true);
xhr.setRequestHeader("MyHeader", "MyValue"); //这里定义
xhr.send();

另外，调用XHR对象的getResponseHeader()方法传入头部字段名称，可以取得相应的响应头部信息。而调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串：

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

GET请求

用encodeURIComponent()编码后的格式如下：

xhr.open("get", "example.php?name1=value1&name2=value2", true);

下面的函数可以辅助向现有的URL的末尾添加查询字符串参数：

function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&"); //检查URL是否包含问号（以确定是否已经有参数存在），没有就加上问好，否则添加一个和号
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}

举个例子：

var url = "example.php";
url = addURLParam(url, "name", "oli");
url = addURLParam(url, "book", "js");
xhr.open("get", url, false);

POST请求

POST请求通常用于向服务器发送应该保存的数据

使用post提交，要设置头部属性Content-type。如果不设置，会出现数据无法解码和获取等问题。

JavaScript Ajax与Comet——“跨源资源共享”的注意要点

JavaScript Ajax与Comet——“跨源资源共享”的注意要点

通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。在默认情况下，Ajax只能访问与包含它的页面位于同一个域中的资源。但是有时也需要一些跨域的请求。为了解决这个问题，现在的浏览器采用CORS（Cross-Origin Resource Sharing,跨域资源共享）策略来实现。CORS是W3C的一个工作草案，定义了必须访问跨源资源时浏览器与服务器之间如何进行沟通。这个策略的基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应的成功和失败。注意请求和响应都不包含cookie信息。

IE对CORS的实现

IE8中引入了XDR（ XDomainRequest） 类型， 这个对象与XHR类似， 但是能实现安全可靠的跨域通信。 XDR对象的安全机制部分实现了W3C的CORS规范。 以下是XDR与XHR的不同之处：
cookie不会随请求发送， 也不会随响应返回

只能设置请求头部信息中的Content - Type字段

不能访问响应头部信息

只支持GET和POST请求

XDR对象使用方法： 创建一个实例， 调用open方法， 调用send方法。 open方法只接受两个参数： 请求的类型和URL。 所有XDR的请求都是异步的。 请求返回后会触发load事件， 响应数据保存在responseText属性中。

var xdr = new XDomainRequest();
xdr.onload = function() {
    alert(xdr.responseText);
};
xdr.open("get", "http://www.somewhere-else.com/page/");
xdr.send(null);

在跨域请求上唯一可以获得响应的信息就是错误本身， 因此确定响应失败的方式就是使用onerror事件。 要放到open之前使用。

xdr.onerror = function() {
    alert("an error occurred!");
}

在请求返回之前， 可以调用取消命令abort（） 方法：

xdr.abort(); //终止请求

与XHR一样， XDR对象也支持timeout属性以及ontimeout事件处理程序。

xdr.timeout = 1000;
xdr.ontimeout = function() {
    alert("late!")
}

将这些处理程序添加到open之前才可以哦。
为了支持post请求， XDR对象提供了contentType属性， 用来表示发送数据的格式： 在open之后， send之前设置

xdr.contentType = "application/x-www-form-urlencoded";

其他浏览器对CORS的实现

使用标准的XHR对象并在open()方法中传入绝对URL即可：

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        document.getElementById("content").innerHTML = xhr.responseText;
    } else {
        console.log("error");
    }
};
xhr.open("get", "http://www.somewhere-else.com/page/", true);
xhr.send();

其他的浏览器都通过XMLHttpRequest对象实现了对CORS的原生支持。但是在跨域请求的时候有以下的限制：

  • 不能使用setRequestHeader()设置自定义头部。

  • 不能接受和发送cookie

  • 调用getAllResponseHeaders()方法总会返回空字符串。

无论是同源请求还是跨域请求，对于本地资源最好使用相对URL，在访问远程资源时再使用绝对URL。

Preflighted　Ｒequests

透明服务器验证机制，支持开发人员使用自定义的头部，get和post之外的方法，以及不同类型的主题内容。这种请求使用OPTIONS方法，发送下列头部：

  • Origin：与简单的请求相同

  • Access-Control-Request-Method:请求自身使用的方法

  • Access-Control-Request-Headers:(可选)自定义头部信息，多喝头部逗号分隔。

发送请求之后，服务器决定是否允许这种类型的请求。服务器通过响应发送如下的头部与浏览器进行沟通：

  • Access-Control-Allow-Origin:与简单的请求相同

  • Access-Control-Allow-Methods:允许的方法，多个方法以逗号分隔

  • Access-Control-Allow-Headers:允许的头部，多个头部以逗号分隔

  • Access-Control-Max-Age:应该将这个Preflight请求缓存多长时间（以秒表示）

带凭据的请求

通过将withCredentials属性设置为true，可以指定特定的请求应该发送凭据。如果服务器接收带凭据的请求，会用下面的HTTP头部响应

Access-Control-Allow-Credentials:true

跨浏览器的CORS

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}
var request = createCORSRequest("get", "http://somewhere-else.com/page/");
if (request) {
    request.onload = function() {
        //request.responseText
    };
    request.send();

}

JavaScript Ajax与Comet——“进度事件”的注意要点

JavaScript Ajax与Comet——“进度事件”的注意要点

有以下6个进度事件：

  • loadstart: 在接收到响应数据的第一个字节时触发。

  • progress: 在接收响应数据期间持续的触发

  • error: 在请求发生错误时触发

  • abort: 在因调用abort() 方法而终止连接时触发

  • load: 在接收到完整的响应数据时触发

  • loadend: 在通信完成或者触发error， abort， load事件后触发。

现在所有的主流浏览器都支持load事件， 前五个除了IE其他的都支持

load事件

下面是使用示例：

xhr.onload = function() {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful:" + xhr.status);
    }
}

放到open方法之前。

如：

var xhr = new XMLHttpRequest();
// xhr.onreadystatechange = function () {
//     if (xhr.readyState == 4) {
//         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
//             console.log(xhr.responseText);
//         } else {
//             console.log("error");
//         }    
//     }
// };
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        console.log(xhr.responseText);
    } else {
        console.log("error");
    }
};
xhr.open("get", "getexample.php", true);
xhr.send(null);

响应接收完毕后将触发load事件，因此也就没有必要去检查readyState属性了。

progress事件

onprogress事件处理程序会接收一个event对象，其target属性是XHR对象，但包含着三个额外属性：

  • lengthComputable

  • position

  • totalSize

其中lengthComputable表示进度信息是否可用的布尔值，position表示已经接收的字节数，totalSize表示根据Content-Length响应头部确定的预期字节数。

根据这些信息，就可以创建一个进度指示器：

xhr.onprogress = function () {
    if (event.lengthComputable) {
        document.getElementById("status").innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes.";
    }
};

要注意的是position已改为loaded;totalSize已改为total。

今天关于JavaScript 新兴的API——“其他新API”的注意要点的介绍到此结束，谢谢您的阅读，有关JavaScript Ajax与Comet——“XMLHttpRequest2级”的注意要点、JavaScript Ajax与Comet——“XMLHttpRequest对象”的注意要点、JavaScript Ajax与Comet——“跨源资源共享”的注意要点、JavaScript Ajax与Comet——“进度事件”的注意要点等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇[JavaScript]以BDD手写依赖注入(dependency injection)

下一篇JavaScript/HTML5图表开发工具JavaScript Charts v3.19.6发布【附下载】（javascript高效图形编程）

相关文章