絮语:按这个步骤走,你就会明白JSONP是什么鬼。
1.工程目录:
ng-mywork demo.html test.js
2.nginx的server配置
server {
listen ;
server_name scan_80; root E:/ng-mywork/; location / { } error_page /50x.html;
location = /50x.html {
root html;
} } server {
listen ;
server_name scan_90; root E:/ng-mywork/; location / { } error_page /50x.html;
location = /50x.html {
root html;
}
}
配置了两个域名不同,端口不同的域。
不会配置?
请看:nginx+php的使用
3.get的xhr的异步请求
//XMLHttpRequest
// true:异步请求
//监听onreadystatechange事件句柄
//设置timeout,回调
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://scan_90:90/test.js', true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
alert("请求成功!")
}
}
}
xhr.ontimeout = function(){
alert("请求超时")
}
xhr.timeout = 1000;
xhr.send(null);
谷歌下请求没问题,因为我设置对浏览器设置了跨域参数。
但是火狐确是不行的,因为是跨域。
4.get的xhr的同步请求
//不能设置超时 因为系统会默认设置为0
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://scan_90:90/test.js', false);
xhr.send(null);
if(xhr.readyState === 4){
if(xhr.status === 200){
alert("请求成功")
}
注意这里的超时注释,同步是不能设置的。
5.使用jsonp进行跨域解决不能跨域请求的问题
//进行jsonp跨域请求
var script = document.createElement('script');
script.src = 'http://scan_90:90/test.js?callback=dothings';
script.type = "text/javascript";
document.body.insertBefore(script, document.body.children[0]);
请求成功了,但是好像跟我们想象的是有点区别的?因为我们常见的返回是这样的。
dothings([1,2,3]); //然后我们可以调用:
function dothings(arr){
//....
}
那是因为这不只是前端做的,还有服务端也需要做些修改来配合返回值。
增加php文件:
<?php
$callback = $_GET['callback'];
$data = array('1','2','3');
echo $callback.'('.json_encode($data).')';
?>
改下js:
var script = document.createElement('script');
script.src = 'http://scan_90:80/test.php?callback=dothings';
script.type = "text/javascript";
document.body.insertBefore(script, document.body.children[0]); //请求完毕后立即执行dothings
function dothings(arr) {
console.log(arr)
}
OK,大功告成!
总结:jsonp的跨域使用的就是script可以跨域的特性(还有其他很多标签都可跨域,如img)。通过服务端跟前端的配合使得返回的js是我们定义的方法,以便可以在前端调用执行。
实例操作JSONP原理的更多相关文章
-
黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理
黑马vue---40.结合Node手写JSONP服务器剖析JSONP原理 一.总结 一句话总结: 服务端可以返回js代码给script标签,那么标签会执行它,并且可带json字符串作为参数,这样就成功 ...
-
跟vczh看实例学编译原理——一:Tinymoe的设计哲学
自从<序>胡扯了快一个月之后,终于迎来了正片.之所以系列文章叫<看实例学编译原理>,是因为整个系列会通过带大家一步一步实现Tinymoe的过程,来介绍编译原理的一些知识点. 但 ...
-
Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
-
JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
-
面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?
本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...
-
跨域及JSONP原理
什么是跨域:a.com 域名下的js无法操作b.com或是c.a.com域名下的对象 为什么浏览器要引入跨域问题? 跨域问题来源于浏览器的同源策略,为啥要有这个策略呢? 为了安全.假设现在有a.com ...
-
ajax工作原理,Jsonp原理
Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...
-
跨域篇--JSONP原理
一篇文章让你明白 jsonp原理详解 什么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自 ...
-
Java JUC之Atomic系列12大类实例讲解和原理分解
Java JUC之Atomic系列12大类实例讲解和原理分解 2013-02-21 0个评论 作者:xieyuooo 收藏 我要投稿 在java6以后我们不但接触到了Loc ...
随机推荐
-
asp.net登录时验证码的制作与验证
1.新建一个页面,ImageCode.aspx 2.在Page_Load中添加如下代码 string tmp = RndNum(4); HttpCookie a = new HttpCookie(&q ...
-
UVA 110 Meta-Loopless Sorts(输出挺麻烦的。。。)
Meta-Loopless Sorts Background Sorting holds an important place in computer science. Analyzing and ...
-
Linux UDP严重丢包问题的解决
测试系统在Linux上的性能发现丢包率极为严重,发210000条数据,丢包达110000之巨,丢包率超过50%.同等情形下Windows上测试,仅丢几条数据.形势严峻,必须解决.考虑可能是因为协议栈B ...
-
python可变参数调用函数的问题
已使用python实现的一些想法,近期使用python这种出现的要求,它定义了一个函数,第一种是一般的参数,第二个参数是默认,并有可变参数.在第一项研究中python时间,不知道keyword可变参数 ...
-
rxJava rxandroid 学习
学习地址 很全面: http://blog.csdn.net/meegomeego/article/details/49155989 final String[] words = {"Hel ...
-
[国嵌攻略][137][DM9000网卡驱动编程]
DM9000数据发送 DM9000数据发送函数是在/drivers/net/dm9000.c中的dm9000_start_xmit函数 static int dm9000_start_xmit(str ...
-
SpringBoot------Servlet3.0的注解自定义原生Servlet
1.添加需要使用的依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://w ...
-
mint-ui之toast使用(messagebox,indicator同理)
toast为消息提示框,支持自定义位置.持续时间和样式. 一,注意事项 方法1 引入整个 Mint UI 组件,并需要再次单独引入Toast组件 Toast,它并不是一个全局变量,需要先引入 im ...
-
vue 运行npm run dev报错
npm run dev运行时报错,原因有很多. 一般用下面这种方法都能解决的. 最简单粗暴的方法: 1.删除依赖包node_modules 2.然后重新npm install就行了 (如果这步报错了, ...
-
Mybatis 之 缓存结构
Mybatis默认提供两种缓存方式,一级缓存是SqlSession 级别的缓存,二级缓存是Mapper 级别的缓存 SqlSession 级别的缓存,每个缓存是相对独立,互不影响:Mapper 级别 ...