javascript --- 几个其他的跨域技术(图像Ping、JSONP、Comet)

在CORS(Cross-Origin Resource Sharing,跨域资源共享)出现以前,要实现跨域Ajax通信是很难的.
可以利用DOM中能够执行跨域请求的功能,来实现跨域通信:

浏览器到服务器的单向通信:
此项技术称为图像Ping,利用的是img.src的跨域事件
img.src只能通过侦听load和error事件来确定浏览器数据是否到达服务器,而无法获取服务器的任何内容

// 图片Ping
var img = new Image();
img.onload = img.onerror = function() {alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas";
// 由于是单向,因此最常用于跟踪用户点击页面或动态广告的曝光次数

使用回调函数的双向通信:
此项技术被称为JSONP(JSON with padding,参数式JSON).
JSONP利用了动态<script>的src属性
使用JSONP首先得确定一个回调函数(如:handleResponse)
然后在将回调函数用?callback = handleResponse的形式拼进请求url中

// JSONP
function handleResponse(response) {    // 回调函数alert("You`re at IP address " + response.ip + ", which is in " + resonse.city + ", " +response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";    // 带回调函数的url路劲放入src属性中
document.body.insertBefore(script, document.body.firstChild);// 注1: response是请求freegeoip.net主机,端口80,json文件的数据返回的,使用的是http协议

服务器向页面推送数据的技术:
Comet:是一种服务器向页面推送数据的技术,它引入了2个概念:长轮询和流的实现方式

// 长轮询:
// 页面发起一个到服务器的请求,然后服务器一直保持连接打开,直到有数据可以发送
// 发送完毕后,浏览器关闭连接,随即又发起一个新的连接并等待
// 此项技术可以通过XHR对象和setTimeout事件实现.// 流
// 使用HTTP流实现:在页面的整个生命周期内只使用一个HTTP连接
// 具体来说,就是浏览器向服务器发送一个请求,然后与服务器保持连接打开状态,周期性的向浏览器发送数据
// 在Firefox、Safari、Opera和Chrome中,通过侦听readystatechange事件及检测readyState的值是否为3(接收到部分数据)
// 就可以利用XHR对象实现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回调函数progress(result);} else if ( xhr.readyState == 4) {finished(xhr.responseText)}xhr.send(null);return xhr;
}
// 调用
var client = createStreamingClient("streaming.php", function(data) {alert("Received: " + data);}, function(data){alert("Done!");
});

参考《JavaScript高级程序设计》(第3版)P586~P589

javascript --- 几个其他的跨域技术(图像Ping、JSONP、Comet)相关推荐

JavaScript第二十二章跨域资源共享
什么叫跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 资源跳转: A链接.重定向.表单提交资源嵌入: . 什么是同源策略? 同源策略/SOP(Sam ...
一头扎进httpclient企业跨域技术从零基础到大神实战案例
一头扎进httpclient企业跨域技术从零基础到大神实战案例一头扎进httpclient企业跨域技术从零基础到大神实战案例一头扎进httpclient企业跨域技术从零基础到大神实战案例下载地址 ...
JavaScript Ajax与Comet——“其他跨域技术”的注意要点
图像Ping技术根据一个网页可以从任何网页中加载图像而不用担心使用跨域的原理, 我们可以动态的创建图像, 使用他们的onload和onerror事件处理程序来确定是否收到响应. 动态的创建图像经常用 ...
【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇"跨域,不再纠结&quo ...
javascript --- XMLHttp2级、CORS(跨域资源共享)
FormData: // 为序列化表单以及创建与表单格式相同的数据提供了便利 var data = new FromData(); data.append("name", &quo ...
跨域技术（JSONP与CROS）
JSONP 我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.&l ...
Ajax跨域提交JSON和JSONP
可以直接使用$.getJSON()方法实现跨域请求,参数中必须加上callback,如: var jsonpUrl = 'http://www.test.com/index.php?c=Api_Ord ...
跨域（三）——JSONP
一.什么是JSONP? 百度百科:JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位 ...
ajax跨域，json，jsonp
由于浏览器安全模型的同源策略,ajax存在跨域问题. 解决跨域问题: 1.服务器代理 a.com中: 页面 --> $.post( 'http://a.com/proxy.php', ..) ...

javascript --- 几个其他的跨域技术(图像Ping、JSONP、Comet)

javascript --- 几个其他的跨域技术(图像Ping、JSONP、Comet)相关推荐

最新文章

热门文章