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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251092.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES5-拓展 箭头函数的this、this的优先级

让内部函数的this指向和父函数的this&#xff0c;可以显示改变this指向&#xff0c;也可以使用箭头函数 箭头代替了function关键字 箭头函数内部没有this指向&#xff0c;箭头函数的this是稳定引用父作用域的。因为它的存在就是要稳定this指向。 适用于普通函数的所有绑定规则…

java 实现压缩单个文件

先来实现一个简单的单文件压缩&#xff0c;主要是为了解一下压缩需要使用到的流。。 效果&#xff1a; 说明&#xff1a;压缩实现使用ZipOutputStream 代码&#xff1a; package com.gx.compress;import java.io.BufferedInputStream; import java.io.BufferedOutputStream; im…

jekins构建触发器详解

jenkins版本&#xff1a;2.89.2 1、触发远程构建 (例如,使用脚本)&#xff1a;通过一个网址的访问来触发构建&#xff0c;这样就不需要登录jenkins系统也能触发构建了。 示例地址&#xff1a; http://localhost:8848/job/FlashRegistration/build??token口令&cause书写构…

http --- 前端的缓存

前端的缓存分为: http缓存 和 浏览器缓存 http缓存: // 当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有"要请求资源"的副本 // 就会从浏览器缓存中提取而不是从原始服务器中提取这个资源// 常见的http缓存,只能缓存get请求响应的资源,对于其他类型的响…

ES5-拓展 隐式数据类型转换

Boolean转换原则&#xff1a;非假即真 6种虚值 原始值转换为原始值 对象转换为原始值 Date()和new Date() new Date可以不写括号(new方式返回的一定是对象)&#xff0c;返回Date对象Date()返回函数执行&#xff0c;返回时间字符串 引用值转原始值 先找valueOf方法(一般…

Swagger的简单入门【转载】

一、Swagger简介 上一篇文章中我们介绍了Spring Boot对Restful的支持&#xff0c;这篇文章我们继续讨论这个话题&#xff0c;不过&#xff0c;我们这里不再讨论Restful API如何实现&#xff0c;而是讨论Restful API文档的维护问题。 在日常的工作中&#xff0c;我们往往需要给前…

visual studio code搭建本地服务器(node.js+express)

一、安装node.js&#xff08;常规软件安装流程&#xff0c;比较简单&#xff0c;不用赘述&#xff09; 二、安装express框架 1. 打开Windows命令提示符&#xff0c;输入&#xff1a; npm install express -g&#xff0c;等待&#xff0c;安装好如下所示&#xff1a; npm instal…

es6 --- 手写一个promise

一个promise实例: var getJSON function(url) {var promise new Promise(function(resolve, reject) {// XHR对象发现ajax请求var client new XMLHttpReqeust();client.open("GET", url);client.onreadystatechange handler;client.responseType "json&qu…

最大流模版 EK

EK算法基于增广路的思想,易于理解,但由于低效并不被经常使用 #include <iostream> #include <cstdio> #include <algorithm> #include <cstring> #include <cmath> #include <queue> using namespace std; const int MAXN10005,MAXM100005…

Restrictions查询用法

Restrictions查询用法 HQL运算符 QBC运算符 含义 Restrictions.eq() 等于equal <> Restrictions.ne() 不等于not equal > Restrictions.gt() 大于greater than > Restrictions.ge() 大于等于greater than or equal < Restrictions.lt() 小…

chrome调试

技术拓展直播课8 按chrome的官方文档 长按刷新 清除缓存&#xff08;不一定好使&#xff09; Ctrl f 查找类 console控制台见b站 bilibili source面板直接打断点 效果和debugger一样 单步调试 进入到函数的下一步 网速 no throttling 是否需要过滤 domcontentloaded d…

es6 --- promise和async/await的区别

首先需要了解async函数: async是Generator函数的语法糖: // 使用Generator依次读取两个文件 var fs require(fs); var readFile function (fileName) {return new Promise(function (resolve, reject) {fs.readFile(filename, function(error, data) {if (error) return re…

Ueditor百度编辑器中的 setContent()方法的使用

百度编辑器Ueditor所提供的setContent()方法作用是&#xff1a;设置或者改变编辑器里面的文字内容或html内容 函数说明&#xff1a;setContent(string,boolean); 参数string 是需要设置到编辑器里面的内容&#xff0c;可以含有HTML代码&#xff0c;最后插入到编辑器中的内容是经…

小程序UI

从input组件说起 <input maxlength"10" placeholder"最大输入长度10" /> <div id"wrapper" disabled$"{{disabled}}">\n <p id"placeholder" class$"{{_getPlaceholderClass(placeholderClass)}}"…

61-1 认识webpack

认识webpack 面向过程开发的不便引入外部js执行顺序面向对象开发 加载多个文件耗时更多 增加了http请求 引入过多js变量来源不明 优化 使用前先import 但使用import语法需要借助工具webpack翻译为浏览器可以解析的语法安装node自动携带npmwebpack若没有全局安装 需要使用npx…

css font简写

一、字体属性主要包括下面几个 font-family&#xff0c;font-style&#xff0c;font-variant&#xff0c;font-weight&#xff0c;font-size&#xff0c;fontfont-family&#xff08;字体族&#xff09;: “Arial”、“Times New Roman”、“宋体”、“黑体”等;font-style&…

javascript --- 原生的拖拽功能实现

准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class"drag" style"width:100px;height:100px;top:0;left:0"></div>监听鼠标的按住事件: let dragDiv document.getElementsByClassName…

web安全学习-验证机制存在的问题

验证机制是应用程序防御恶意攻击的中心机制。它处于防御未授权的最前沿&#xff0c;如果用户能够突破那些防御&#xff0c;他们通常能够控制应用程序的全部功能&#xff0c;自由访问其中的数据。缺乏安全稳定的验证机制&#xff0c;其他核心安全机制&#xff08;如回话管理和访…

ES5-拓展 原型链、继承、类

Symbol不是构造函数 Object不是原型是实例对象 他的构造器继承原型上的构造器 undefined是未定义 null是空指针 一、原型链 1. 函数也是实例对象 2. 构造函数Object是由Function构造出来的 3. 有一种说法是&#xff0c;原型链的终点是null Object.prototype.__proto__指向nul…

Mysql中各种与字符编码集(character_set)有关的变量含义

mysql涉及到各种字符集&#xff0c;在此做一个总结。 字符集的设置是通过环境变量来设置的&#xff0c;环境变量和linux中的环境变量是一个意思。mysql的环境变量分为两种&#xff1a;session和global。session变量是仅在这次会话红中有效&#xff0c;在mysql中&#xff0c;一次…