JavaScript Ajax与Comet——“其他跨域手艺”的注重要点

2019年8月30日 165次阅读 来源: JS菌

图象Ping手艺

依据一个网页可以从任何网页中加载图象而不必忧郁运用跨域的道理， 我们可以动态的竖立图象， 运用他们的onload和onerror事宜处置惩罚递次来肯定是不是收到响应。

动态的竖立图象常常用于图象Ping。 图象Ping是与效劳器举行简朴的单向的跨域通讯的一种体式格局。

请求的数据经由历程查询字符串情势发送的，而响应可以是恣意内容， 但通常是像素图或许204响应。

经由历程图象Ping，浏览器得不到任何详细的数据， 然则经由历程侦听load和error事宜， 它能晓得是什么时刻吸收的。

var img = new Image();
img.onload = img.onerror = function() {
    alert("Done");
};
img.src = "http://ww.example.com/test?name=seacean";

图象Ping最常用于跟踪用户点击页面或动态广告暴光次数。

它有两个重要的瑕玷：只能发送get请求，没法接见效劳器的响应文本。因而， 图象Ping只能用于浏览器与效劳器间的单向通讯。

JSONP

JSONP是JSON with padding的简写，是运用json的一种新要领，在厥后的Web效劳中异常盛行。

callback({ "name": "Oli" });

JSONP由两部分构成：回调函数和数据。

回调函数是当响应到来时应该在页面中挪用的函数，回调函数的名字平常是在请求中指定的。数据就是传入回调函数的json数据。

下面是以个JSONP的例子：

http: //freegeoip.net/json/?callback=handleResponse //回调函数的名字就是handleResponse();

JSONP是经由历程动态的script元素来运用的，运用时可以为src属性指定一个跨域URL。这里的script元素有才能不受限定的同其他域加载资本。由于JSONP是有效地javascript代码，所以在请求完成后，即在JSONP响应加载到页面后会马上实行。

function handlerResponse(response) {
    alert("You're at IP address " + response.ip + ", where is in " + response.city + ", " + response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handlerResponse";
document.body.insertBefore(script, document.body.firstChild);

JSONP的上风:

在于简朴易用，直接接见响应文本，支撑浏览器与效劳器之间的双向通讯。

JSONP的不足之处:

不能肯定加载的域是不是平安，要肯定请求失利并不轻易。为了防止这些，开发人员的现行计划是用指定时间内是不是吸收到了响应来推断。

Comet

有两种完成Comet的体式格局：长轮询和流。

长轮询把传统轮询颠倒了一下，页面发送一个到效劳器的请求，然后效劳器一向坚持衔接翻开，晓得有数据可发送。发送完数据后，浏览器封闭衔接，随即又提议一个到效劳器的新请求。这个历程在页面翻开时期一向不停延续。

第二种盛行的Comet体式格局是HTTP流。流在页面的全部生命周期中只运用一个HTTP衔接。详细来说就是浏览器向效劳器发送一个请求，然后效劳器坚持衔接翻开，然后周期性的向浏览器发送数据。下面这段php剧本就是采纳流完成的效劳器中的罕见体式格局：

$i = 0;
while (true) {
    echo "Number is $i"; //输出数据然后革新缓存
    flush();
    sleep(10); //住手几秒
    $i++;
}

这段代码是完成HTTP流的症结。

下面这段代码是XHR对象完成HTTP流的典范代码：

function createStreamingClient(url, progress, finished) {
    var xhr = new XMLHttpRequest(),
        received = 0;
    xhr.open("get", url, true);
    xhr.onreadystatechange = function() {
        var result;
        if (xhr.readyState == 3) {
            result = xhr.responseText.substring(received);
            received += result.length;
            progress(result);
        } else if (xhr.readyState == 4) {
            finished(xhr.responseText);
        }
    };
    xhr.send(null);
    return xhr;
}
var client = createStreamingCilent("streaming.php", function(data) {
    alert("Received:" + data);
}, function(data) {
    alert("Done!");
});

这个createStreamingCilent函数吸收三个参数：要衔接的URL，在吸收到数据时挪用的函数以及封闭衔接时挪用的函数。

效劳器发送事宜

SSE（ Server – Sent Events， 效劳器发送事宜） 是缭绕只读Comet交互推出的API或许形式。 SSE API用于竖立到效劳器的单向衔接， 效劳器经由历程这个衔接可以发送恣意数目的数据。 效劳器响应的MIME范例必需是text / event – stream， 而且是浏览器中的Javascript API能剖析的花样输出。 SSE支撑短轮询， 长轮询和HTTP流， 而且可以在断开衔接时自动肯定什么时候从新衔接。

SSE API

SSE是为javascript api与其他通报音讯的javascript api很类似。 要预定新的事宜流， 要竖立新的EventSource对象， 并传入一个进口点：

var source = new EventSource("myevents.php");

注重： 要传入的URL必需与竖立对象的页面同源。 EventSource的实例有一个readyState属性， 值为0示意正衔接到效劳器， 值为1示意翻开了衔接， 值为2示意封闭衔接。 别的另有三个事宜：

  • open： 在竖立衔接时触发

  • message： 在从效劳器吸收到新事宜时触发

  • error： 在没法竖立衔接时触发

效劳器返回的数据以字符串的花样保存在event.data中。 假如想强迫马上断开而且不再从新衔接， 可以挪用close() 要领。

事宜流

多段数据发送时， 要以换行符举行分开差别段的数据。 而且还可以在每段数据的前面或许背面附加ID， 以便多段数据的拼接。 在设置了ID以后， EventSource对象会跟踪上一次触发的事宜。 假如衔接断开， 会向效劳器发送一个包括名为Last – Event – ID的特别HTTP头部请求， 以便效劳器晓得下次触发谁人事宜。 在屡次衔接的事宜流中， 这类机制保证了浏览器可以以准确的递次吸收到衔接的数据段。

Web Sockets

在js中web sockets运用了自定义的协定。 未加密的协定是ws: //;加密的协定是wss://.现在支撑它的的浏览器有FireFox6+，safari5+,Chrome,IOS4+版safari。

竖立web sockets的例子：

var sockets = new WebSockets("ws://www.example.com/server.php");

注重， 必需给WebSockets组织函数传入相对的URL。 同源战略对它不实用。 可否与特定的域通讯完整取决于效劳器。

sockets.close(); //封闭
sockets.send("Hello word"); //可以发送字符串，json花样的字符串

sockets的事宜有onmessage： 效劳器向客户端发送音讯， sockets会触发； onopen： 胜利竖立衔接时触发； onerror： 在发作错误时触发， 衔接时不能延续； onclose： 在衔接封闭时触发。 在close事宜中的event对象有三个分外的属性： wasClean, code, reason.第一个参数示意衔接是不是明白的封闭， 布尔值。 第二个是效劳器返回的数值状况码， 而reason是一个字符串， 包括效劳器返回的信息。

Web Sockets协定比同于HTTP， 现有的效劳器不能用Web Sockets通讯， HTTP可以满足请求。 假如只需要向效劳器请求数据， 那末SSE比较轻易， 如果双向的通讯Web Sockets更好一些。 在不能运用Web Sockets的情况下， 组合XHR + SSE也能完成双向通讯。

在AJAX平安方面， 以下步伐是得力的：
请求以SSL衔接来接见可以经由历程XHR请求的资本
请求每一次请求都要附带经由响应算法盘算获得的验证码

    原文作者：JS菌
    原文地址: https://segmentfault.com/a/1190000004496316
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞