JS中跨域技术集锦

 图像ping

1、简介:

图像ping是与服务器进行简单、单向的跨域通信的一种方式,请求的数据是通过查询字符串的形式发送的,而相应可以是任意内容,但通常是像素图或204相应(No Content)。

2、使用方法:

var img = new Image();
img.onload = img.onerror = function(){
   alert("done!");
};
img.src = "http://www.example.com/test?name=Nicalos";

 3、应用:

图像ping常用于跟踪用户点击页面或动态广告曝光次数。

4、优缺点:

图像ping有两个主要缺点:首先就是只能发送get请求,其次就是无法访问服务器的响应文本。

 JSONP

     1、简介:

jsonp(json with padding),jsonp与json看起来差不多,只不过jsonp是被包含在函数调用中的json。jsonp由两部分组成,一部分是回调函数,一部分是数据。回调函数就是当响应到来时应该在页面中调用的函数,数据就是传入回调函数中的json数据。

2、使用方法:

function handleResponse(response){
    alert("you are at IP address"+response.ip+",which is in"+response.city+","+response.region_name);
}

var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResaponse";
document.body.insertBefore(script,document.body.firstChild);

  3、 优点:第一,他能直接访问响应文本;第二,jsonp支持在浏览器与服务器之间的双向通信。

4、 缺点:无法保证加载的来自其他域的代码是安全的,还有就是无法判断jsonp的请求是否失败。

Comet

   1、简介:comet是一种更高级的ajax技术,但是ajax是一种从页面向服务器请求数据的技术,而comet则是一种服务器向页面推送数据的技术。comet能够让信息近乎实时的被推送到页面上。适合处理体育比赛的分数和股票报价。

2、实现方式:

长轮询-即,浏览器定时向服务器发送请求,看有没有更新的数据。

http流-在整个页面的生命周期中只使用一个http连接,就是浏览器向服务器放松一个请求,而服务器保持连接打开,然后周期性的向浏览器发送数据。

 Web Sockets

1、简介:

websockets的目标是在一个单独的持久连接上提供全双工、双向通信。在js中创建websockets之后,会有一个http请求发送到浏览器以发起连接,在取得服务器的响应后,建立的连接会由使用http交换为使用web sockets协议。 未加密的连接为:ws://,加密的连接为: wss://。

2、使用方法:

//websockets必须传入绝对url
var socket  = new WebSocket("ws://www.example.com/server.php");

var message = {
     time:new Date();
     text:"helloword";
     clientId:"ddddd"
};
//websocket发送的数据与得到的返回数据一样都是纯文本数据
socket.send(JSON.stringify(message));

//服务器向客户端发来消息时,就会触发onmessage事件
socket.onmessage = function(event){
   var data = event.data;
}

//同样的事件还有onopen、onerror、onclose,但是只有onclose事件的event对象有额外的信息
socket.onclose = function(event){
    console.log("Was clean?"+event.wasClean+"Code="+event.code+"Reason="+event.reason);
 };

  3、优缺点:

websockets能够在客户端和服务器端发送非常少量的数据,而不用担心http那样的字节级开销,由于传递的数据包很小,因此websocket很适合移动应用,而他的缺点在于制订协议的事件比较长。

JS中跨域技术集锦

时间: 2024-11-03 22:33:12

JS中跨域技术集锦的相关文章

js中跨域请求原理及2种常见解决方案

一.同源策略: 说到跨域请求,首先得说说同源策略: 1995年,同源政策是由 Netscape 公司引入浏览器的.目前,所有浏览器都实行了这个政策. 同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同:目的就是为了保证用户信息的安全,防止恶意的网站窃取数据,防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 举例来说,http://www.example.com/dir/page.html 这个网址协议是 ttp://域名是 www.e

一日一练-JS 了解几种跨域技术

子曰:了解几种跨域机制 简单介绍 首先简单了解一下同源策略相关知识点: 1.同源策略 限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的重要机制. 2.源的定义:如果两个页面的协议.端口和域名都相同,则两个页面具有相同的 源 3.同源策略规定,是XHR 实现Ajax 通信的一个主要限制.默认情况下,XHR 对象只能访问与包含它的页面位于同一个域中的资源.这种安全策略可以预防某些恶意行为.但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的.

js跨域方法

JavaScript跨域总结与解决办法 什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用HTML5 postMessage 6.利用flash 本文来自网络(http://f2e.me/200904/cross-scripting/,该网址已不能访问),仅作个人读书笔记之用,并稍作修改和补充. 什么是跨域 JavaScript出于安全方面的考虑,不

使用proxyTable 解决webpack+vue-cli+vue-resource中跨域问题

当游览器报这样的错时,表示你的请求需要跨域! 这里,我说的是使用webpack+vue-cli+vue-resource中跨域问题, 在config文件下面有index.js文件里有一个叫proxyTable的配置参数 proxyTable: { '/restful':{ target:'http://xxxxx/member/service/', changeOrigin:true, pathRewrite:{//可以不写 '^/restful':'/restful' } } }, chang

同源策略与跨域技术

待整理:1-2参见<JavaScript高级程序设计>P586;3-5参见http://mp.weixin.qq.com/s/asmzA8a1HuYQxyx8K0q-9g 一.同源策略 https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy 浏览器的同源策略限制了 从一个源加载的文档或脚本与来自另一个源的资源的交互.它是隔离潜在恶意文档的关键安全机制. 具体限制: 不能通过ajax的方法去请求不同源的资源

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

Js 跨域上传文件

代码在github上( https://github.com/andygithubchen/jsUpload ),请结合github上的文件阅读. 主要实现js跨域上传文件,这里的跨域目前只在两个域名所指向的服务器在同一局域网内. 当然,这两种方案都可以做同域名上传. 例如: 192.168.1.60 www.test.cn 192.168.1.61 www.video.cn 如果要在www.test.com域名下上传文件到www.video.com域名下,可以使用下面这两个方案: 方案一(在s

利用JS跨域做一个简单的页面访问统计系统

其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们需要自己来设计统计系统.由于前段时间公司的业务需求,我也是自己尝试了下,本文提供的是一个基本思路,统计系统也比较简单. 几个基本统计需求: 1.统计web每个页面用户访问量 2.统计用户访问者的和IP地址信息 3.页面之间的跳转情况 4.访问高峰时间段 服务器结构: 数据库表设计: 以上只是我简单列

三种方法实现js跨域访问

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实