Angular2系列教程（九）Jsonp、URLSearchParams、中断选择数据流
大家好，今天我们要讲的是http模块的第二部分，主要学习ng2中Jsonp、URLSearchParams、observable中断选择数据流的用法。例子例子的第一个程序，上节课已经讲过了。这节课我们学习第二个程序，从wiki的api中跨域获取数据，可实现300毫秒内中断和选择最近请求等炫酷功能，这些功能都来自于observable！运行方法：在http目录或者上级目录起个服务即可：http-server没有则需要安装http-server：sudonpminstallhttp-server-g源代码：https://github.com/lewis617/angular2-tutorial/tree/gh-pages/httpdemo演示：http://lewis617.github.io/angular2-tutorial/httpJsonp在讲解observable的api前呢？我们还是把例子的代码给讲解完app/wiki/wikipedia.service.tsimport{In
JSONP
今天面试被问到“听说过JSONP吗？”，虽然名字很熟悉，却不记得在哪听过用过，于是回家立马研究一下是什么，本文就是研究后的小结。跨域访问曾经想做一个“豆瓣FM”的第三方客户端，用的是node-webkit，即可以用HTML+CSS+JS写桌面客户端。网上已经有人分析出了豆瓣FM的API，理论上只需要乖乖调用便可。但当我把其中用到的页面在浏览器打开的时候，却什么都加载不出来。后来查看console才发现原来JQuery的$.get()是不支持跨域访问的。那什么什么是跨域访问呢？用前面的例子，假如我做了一个网页，最终放在了自己的域名lotabout.me下，那么这个网页里的JS代码，如果试图访问除了域名‘lotabout.me’外的其它域名的内容，就称为跨域访问。传统上，浏览器的实现禁止XMLHttpRequest请求跨域访问，因为这样会引发安全问题。具体会引发什么安全问题，可以参考Stackoverflow:Whythecrossdomainajaxisasecur
json与jsonp区别浅析（json才是目的，jsonp只是手段）
一言以蔽之，json返回的是一串数据；而jsonp返回的是脚本代码（包含一个函数调用）；JSON其实就是JavaScript中的一个对象，跟varobj={}在质上完全一样，只是在量上可以无限扩展。简单地讲，json其实就是JavaScript中的对象(Object)和数组(Array，其实也是对象)这倆好基友在那儿你嵌我我嵌你地套上n多层，以此模拟出许多复杂的数据结构。json易于人阅读和编写，也易于机器解析和生成，相对网络传输速率较高，功能型网站前后端往往要频繁大量交换数据，而json凭借其强大的表现力和高颜值渐渐地成为理想的前后端数据交换语言。那xml前辈呢，我觉得应该会像微软的xp那样功成身退。同源（不懂同源策略的童鞋请自行百度）下的前后端数据交换格式确定使用json了，那么问题来了，如果我想获取别人网站上提供的数据肿么做到呢？也就是跨域读取数据问题（不要钻牛角说你不需要读取其他网站的数据，相信我，你早晚得需要），json行不行呢？答案是NoWay，为什么呢，因为json只是普通的文本格式，能让你这样就轻松拿到那服务端就没
说一说javascript跨域和jsonp
同源策略在浏览器的安全策略中“同源策略”非常如雷贯耳，说的是协议、域名、端口相同则视为同源，域名也可换成IP地址，不同源的页面脚本不能获取对方的数据。要是想使用XMLHttpRequest或者常规的AJAX请求获取另一个站点的数据，浏览器会告诉你“XXXXisnotallowedbyAccess-Control-Allow-Orign”.因为同源策略的存在，防止了跨域访问的安全问题，但同时也损失了方便获取资源的便利。跨域的src属性世事又非绝对，浏览器还是允许几个元素跨域访问外部资源的，如：
脆弱的jsonp
jsonp能用来做什么，除了利用不当的jsonp会出现信息泄露之外，对callback处理不当的jsonp依然存在很大的危险callback可以控制，但是content-type已经限制了非html了，这安全了吗？这样处理的jsonp，似乎可以避免xss的产生，但是依然可以借助这个jsonp，绕过一些“防止加载外部js”的xss。这个jsonp可以作为一个跳板，因为jsonp其实就是一段js，而通过注释jsonp的内容，可以让js的释义发生变化。同样的，这样的jsonp还可以被黑客很方便的用来绕过浏览器的xss-filter，别忘了，浏览器不会觉得子目录下的js是危险的。案例：qq邮箱某处dom-xss//待更新
Java 下的 JSON库性能比较：JSON.simple vs. GSON vs. Jackson vs. JSONP
JSON已经成为当前服务器与WEB应用之间数据传输的公认标准，不过正如许多我们所习以为常的事情一样，你会觉得这是理所当然的便不再深入思考了。我们很少会去想用到的这些JSON库到底有什么不同，但事实上它们的确是不太一样的。因此，我们运行了一个基准测试来对常用的几个JSON库进行了测试，看看在解析不同大小的文件时哪个库的速度是最快的。下面我会把结果分享给大家。JSON通常用于传输及解析大文件。这对运行在Hadoop或者是Spark集群上的数据处理程序而言是个很常见的场景。在给定的文件大小下，你可以看到不同库之间的解析速度存在着明显的差别。高吞吐量的情况下，会频繁地传输并解析小文件，因此一开始的时候可能性能的差距并不明显。但如果你需要在非常高负载下频繁地解析大量的小文件，差距就开始增大了。微服务及分布式架构经常会使用JSON来传输此类文件，因为这已经是WEBAPI的事实标准。不是所有的JSON库都叫"特仑苏"。如何根据使用场景才选择正确的库是相当重要的。希望这个基准测试能够对你有所帮助。JSON.simplevsGSONvs
JSONP浅析
DEMO:JSONP示例为什么使用JSONPJSONP和JSON是不一样的。JSON是一种基于文本的数据交换方式，或者叫做数据描述格式。而JSONP是一种方式或者说非强制性协议。它是为了解决某个难题而产生的一种技术方式。为什么会用到JSONP呢？我们平时在用ajax请求服务端数据时，一般是这么写的：$.ajax({type:"get",url:"getData.php",dataType:"json",success:function(data,textStatus,jqXHR){console.log(data);},error:function(XMLHttpRequest,textStatus,errorThrown){alert('fail');}});这是一段很普通的基于jQuery的AJAX请求，不会有什么问题。注意到：url里是getData.php，说明这个文件url是基于当前服务器的，例如可能是localhost，也就是前端发出的请求来源是loc
为什么是 JSONP
AJAX、JSON、JSONP在WEB开发中，经常见到诸如AJAX、JSON、JSONP这些词，但这三种东西到底是什么，又有什么关系和区别。AJAX（AsynchronousJavaScript+XML）Ajaxisn’tatechnology.It’sreallyseveraltechnologies,eachflourishinginitsownright,comingtogetherinpowerfulnewways.Ajaxincorporates:standards-basedpresentationusingXHTMLandCSS;dynamicdisplayandinteractionusingtheDocumentObjectModel;datainterchangeandmanipulationusingXMLandXSLT;asynchronousdataretrievalusingXMLHttpReq
分布式架构2.0发布--Proxy代理平台优势
一、安全问题处理1.在服务内部通过加密算法传递秘钥,不会在网络传输的时候暴漏安全信息。2.通过代理虚拟服务地址，将服务地址加密二、负载处理可以通过apache、nginx服务器代理服务地址，通过代理地址访问真正的服务地址并进行负载均衡处理。三、跨域问题处理系统与系统之间集成，在不同的域名下进行服务调用，在没有服务总线或者管控平台的情况下，会出现跨域问题，如果使用jsonp的方式，服务的定义标准就会很杂乱（json、jsonp等）。如果采用iframe的方式，则对用户的体验或者前端开发人员增加工作量动态写js更不建议，所以使用JeeszProxy代理平台可以防止跨域问题的出现。四、可配置化解决方案（数据库读写分离）可以通过可配置化的解决方案，对所有的服务代理进行配置，包括针对于数据库读写分离的解决方案进行分布式部署。
JSONP 实现
functioneditAtGithub(isRaw){varurl_parts=document.location.pathname.split('/');varpostname=url_parts[url_parts.length-2];if(url_parts.length==3){//isapage(wikiaboutetc)postname=postname+'/index.org';}else{postname='_posts/'+postname+'.org';}varurl='https://github.com/CodeFalling/codefalling.com/tree/source/source/'+postname;if(isRaw)url='https://raw.githubusercontent.com/CodeFalling/codefalling.com/source/source/'+postname;window.open(url);
前端中的一些面试问题
近段时间看了不少的前端面试题，很多大牛也对此做了整理。这篇文就算是借花献佛啦。总体来说基本上每家问的问题也差不多，可能不同业务的公司问的问题的侧重点也不太一样，有的侧重于移动端适配CSS布局浏览器兼容IEhack，而有的侧重于JS逻辑面向对象设计模式考察等。可能将实际工作中会遇到的问题的场景，以及各种技术的坑作为面试题，这样一则可以看出他的经验多少，二则也可以防止他做笔试题的时候手机搜索结果。【手写事件模型及事件代理/委托】这个算是被问到的最多次数的问题了，首先要求描述下js里面的“事件的三个阶段”，如果没有听说过三个阶段，那基本上就没戏了。分别是捕获，目标，冒泡阶段，低版本IE不支持捕获阶段。然后可能问到IE和W3C不同绑定事件解绑事件的方法有什么区别，参数是什么，以及事件对象e有什么区别等等。如果上述都没问题，接下来可能会问“事件的代理/委托”的原理以及优缺点，这是靠事件的冒泡机制来实现的，优点是1、可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒2、可以实现当新增子对象时无需再次对其绑
同源策略&跨域请求
同源策略是浏览器最核心也是最基本的安全的功能。所谓同源，指的是协议、域名、端口号都相同，不同源的客户脚本（JavaScript）在没有明确授权的情况下，只能读写本域下的资源，不能读写对方的资源；2.什么是跨域？跨域有几种实现形式？跨域是指突破JavaScript同源策略的限制，a.com域名下的js可以操作b.com或者child.a.com下的对象中的数据。实现形式：降域（最简单形式）；对于主域相同子域不同（http://www.a.com/，http://child.a.com）的情况，可以同时设置两个域名下html文件(index1.html，index2.html)document.domain=a.com,然后在index1.html中创建一个iframe,去控制iframe的contentDocument，这样就实现了不同子域的跨域。iframe和相同主域是其限制条件；JSONP跨域：由于直接用XMLHttpRequest请求不同域上的数据
原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题，其实所谓的熟悉原生JS，怎样的程度才是熟悉呢？最近都在做原生JS熟悉的练习。。。用原生Js封装了一个Ajax插件，引入一般的项目，传传数据，感觉还是可行的。。。简单说说思路，如有不正确的地方，还望指正^_^一、Ajax核心，创建XHR对象Ajax技术的核心是XMLHttpRequest对象（简称XHR），IE5是第一款引入XHR对象的浏览器，而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的，因此在IE中可能有3个版本，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0。所以创建XHR对象的时候要用兼容性写法：createXHR:function(){if(typeofXMLHttpRequest!='undefined'){returnnewXMLHttpRequest();}elseif(typeofActiveXObject!='undefined'){if(typeofarguments.callee.activeX
Web Api之Cors跨域以及其他跨域方式（三）
我们知道ajax不能跨域访问，但是有时我们确实需要跨域访问获取数据，所以JSONP就此诞生了，其本质使用的是Script标签，除JSONP以外还有另外实现跨域方式一、手动实现JSONP跨域1、首先创建一个Web项目，在这里我使用一般处理程序1publicclassDemo:IHttpHandler2{3publicvoidProcessRequest(HttpContextcontext)4{5//接收参数6stringcallBack=context.Request["callBack"];7stringuName=context.Request["uName"];8stringdata="({\"name\":\""+uName+"\",\"age\":\"23\"})";9stringjosnStr=
js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
一、浏览器同源策略首先我们需要了解一下浏览器的同源策略，关于同源策略可以仔细看看知乎上的一个解释。传送门总之：同协议，domain（或ip），同端口视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。(现代浏览器在安全性和可用性之间选择了一个平衡点。在遵循同源策略的基础上，选择性地为同源策略"开放了后门"。例如imgscriptstyle等标签，都允许垮域引用资源。)下表给出了相对http://store.company.com/dir/page.html同源检测的示例:
jsonp与cors跨域的一些理解
浏览器的同源策略，即是浏览器之间要隔离不同域的内容，禁止互相操作。比如，当你打开了多个网站，如果允许多个网站之间互相操作，那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为，获取你在各个网站的相关信息，很明显这是不安全的，所以同源策略避免了很多这样的问题。但是同时也带来了一些问题，比如有时候你想通过自己的网站去获取另一个自己的网站的一些资料信息，但是由于两者域名不同，所以就被同源策略隔离了，那么这个时候就需要了解一下浏览器的跨域问题。跨域常见的两种方式，分别是jsonp和新推出的cors，即cross-originresoursesharing，其实这货出现的时间也不短了，只是我现在才注意到而已。先说说jsonp，先说个简单的例子再讲百度的例子。我们有个www.a.com的页面
借助node实战JSONP
一、前言：浏览器安全是基于同源策略的。所谓同源策略就是三相同：1、协议相同；2、域名相同；3、端口相同。但，凡事都是有利弊，同源策略也导致了我们想用AJAX跨域请求，但NO！！为了规避这种限制，其中有一方法就是JSONP。JSONP的基本思想：就是通过