实例操作JSONP原理

时间:2022-09-13 21:57:03

絮语:按这个步骤走,你就会明白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的使用

   nginx的使用

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);

谷歌下请求没问题,因为我设置对浏览器设置了跨域参数。

但是火狐确是不行的,因为是跨域。

实例操作JSONP原理

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]);

实例操作JSONP原理

请求成功了,但是好像跟我们想象的是有点区别的?因为我们常见的返回是这样的。

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)
}

实例操作JSONP原理

实例操作JSONP原理

OK,大功告成!

总结:jsonp的跨域使用的就是script可以跨域的特性(还有其他很多标签都可跨域,如img)。通过服务端跟前端的配合使得返回的js是我们定义的方法,以便可以在前端调用执行。

实例操作JSONP原理的更多相关文章

  1. 黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理

    黑马vue---40.结合Node手写JSONP服务器剖析JSONP原理 一.总结 一句话总结: 服务端可以返回js代码给script标签,那么标签会执行它,并且可带json字符串作为参数,这样就成功 ...

  2. 跟vczh看实例学编译原理——一:Tinymoe的设计哲学

    自从<序>胡扯了快一个月之后,终于迎来了正片.之所以系列文章叫<看实例学编译原理>,是因为整个系列会通过带大家一步一步实现Tinymoe的过程,来介绍编译原理的一些知识点. 但 ...

  3. Ajax跨域:Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  4. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  5. 面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?

    本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...

  6. 跨域及JSONP原理

    什么是跨域:a.com 域名下的js无法操作b.com或是c.a.com域名下的对象 为什么浏览器要引入跨域问题? 跨域问题来源于浏览器的同源策略,为啥要有这个策略呢? 为了安全.假设现在有a.com ...

  7. ajax工作原理,Jsonp原理

    Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...

  8. 跨域篇--JSONP原理

    一篇文章让你明白 jsonp原理详解 什么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自 ...

  9. Java JUC之Atomic系列12大类实例讲解和原理分解

    Java JUC之Atomic系列12大类实例讲解和原理分解 2013-02-21      0个评论       作者:xieyuooo 收藏    我要投稿 在java6以后我们不但接触到了Loc ...

随机推荐

  1. asp&period;net登录时验证码的制作与验证

    1.新建一个页面,ImageCode.aspx 2.在Page_Load中添加如下代码 string tmp = RndNum(4); HttpCookie a = new HttpCookie(&q ...

  2. UVA 110 Meta-Loopless Sorts(输出挺麻烦的。。。)

     Meta-Loopless Sorts  Background Sorting holds an important place in computer science. Analyzing and ...

  3. Linux UDP严重丢包问题的解决

    测试系统在Linux上的性能发现丢包率极为严重,发210000条数据,丢包达110000之巨,丢包率超过50%.同等情形下Windows上测试,仅丢几条数据.形势严峻,必须解决.考虑可能是因为协议栈B ...

  4. python可变参数调用函数的问题

    已使用python实现的一些想法,近期使用python这种出现的要求,它定义了一个函数,第一种是一般的参数,第二个参数是默认,并有可变参数.在第一项研究中python时间,不知道keyword可变参数 ...

  5. rxJava rxandroid 学习

    学习地址 很全面: http://blog.csdn.net/meegomeego/article/details/49155989 final String[] words = {"Hel ...

  6. &lbrack;国嵌攻略&rsqb;&lbrack;137&rsqb;&lbrack;DM9000网卡驱动编程&rsqb;

    DM9000数据发送 DM9000数据发送函数是在/drivers/net/dm9000.c中的dm9000_start_xmit函数 static int dm9000_start_xmit(str ...

  7. SpringBoot------Servlet3&period;0的注解自定义原生Servlet

    1.添加需要使用的依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://w ...

  8. mint-ui之toast使用(messagebox,indicator同理)

    toast为消息提示框,支持自定义位置.持续时间和样式. 一,注意事项 方法1   引入整个 Mint UI 组件,并需要再次单独引入Toast组件 Toast,它并不是一个全局变量,需要先引入 im ...

  9. vue 运行npm run dev报错

    npm run dev运行时报错,原因有很多. 一般用下面这种方法都能解决的. 最简单粗暴的方法: 1.删除依赖包node_modules 2.然后重新npm install就行了 (如果这步报错了, ...

  10. Mybatis 之 缓存结构

    Mybatis默认提供两种缓存方式,一级缓存是SqlSession 级别的缓存,二级缓存是Mapper 级别的缓存 SqlSession 级别的缓存,每个缓存是相对独立,互不影响:Mapper 级别 ...