有时候用js封装个小工具需要一些已经被封装好的函数,比如jq的jsonp

但是原生小工具如果仅仅为了这个就导入一个上百kb的jQuery不划算

然后我去网上找,一大堆废文,还是自己发一篇记录一下吧

下面是 jsonp 在 js 中的实现方法

/**
* 模拟实现jsonp
* @param {Object} url
* @param {Object} callback
*/
function jsonp(url, callback) {
var callbackName = 'jsonp_callback_' + (new Date().getTime());
window[callbackName] = function(data) {
delete window[callbackName];
document.body.removeChild(script);
callback(data);
}; var script = document.createElement('script');
script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
document.body.appendChild(script);
}

原生js实现jsonp的更多相关文章

  1. 基于原生JS的jsonp方法的实现

    基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...

  2. 用原生js来处理跨域的数据(jsonp)

    说明总结: 1.ajax和jsonp其实本质上是不同的东西.ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提 ...

  3. 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  4. 原生js实现简单JSONP

    JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接 ...

  5. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  6. Ajax进阶之原生js与跨域jsonp

    什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...

  7. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

  8. 原生JS和jQuery分别使用jsonp来获取“当前天气信息”

    需掌握的技能点: jsonp.跨域相关等. 以下两种代码,均可直接运行. 1.使用原生JS: <!DOCTYPE html> <html lang="en"> ...

  9. 用原生JS实现AJAX和JSONP

    前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...

  10. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

随机推荐

  1. JUC(8)Stream流式计算

    文章目录 1.ForkJoin 1.ForkJoin ForkJoin 在JDK1.7 ,并执行任务!提高效率,大数据量 大数据:Map Reduce (把大任务拆分为小任务) ForkJoin特点: ...

  2. 《Java并发编程的艺术》读书笔记:二、Java并发机制的底层实现原理

    二.Java并发机制底层实现原理 这里是我的<Java并发编程的艺术>读书笔记的第二篇,对前文有兴趣的朋友可以去这里看第一篇:一.并发编程的目的与挑战 有兴趣讨论的朋友可以给我留言! 1. ...

  3. python更改文件后缀名

    path = '1024.png' extension = 'jpg' for i in range(1,len(path)): if (path[-i] == '.'):#找到后缀初始点 new_p ...

  4. Java集合精选常见面试题

    前言 博主只是这篇文章的搬运工,为了加强记忆自己梳理了一遍并扩展了部分内容. 集合拓展链接:集合概述&集合之Collection接口 - 至安 - 博客园 (cnblogs.com) Java ...

  5. C# 窗体相关知识

    一  窗体 固定窗体大小,并不能最大/最小化: FormBorderStyle属性设置为:FixedSingleMaximizeBox = falseMinimizeBox = false都是在For ...

  6. SpringBoot 08: SpringBoot综合使用 MyBatis, Dubbo, Redis

    业务背景 Student表 CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) COL ...

  7. scp工具上传下载

    1.从本地复制到远程 scp local_file remote_username@remote_ip:remote_folder 或者 scp local_file remote_username@ ...

  8. 有关二级指针char **p 的问题

    int main() { char *str[] = {"welcome", "to", "Fortemdia", "Nanjin ...

  9. redis集群之主从复制集群的原理和部署

    最近在复盘redis的知识,所以本文开始希望介绍下redis的集群架构.原理以及部署:本文主要介绍redis的主从复制集群,包括其架构模型,原理,高可用等: 一.主从集群的介绍   redis的主从复 ...

  10. 《吐血整理》高级系列教程-吃透Fiddler抓包教程(35)-Fiddler如何抓取微信小程序的包-下篇

    1.简介 通过前边和宏哥的学习,我们了解到Android 7.0 之后增加了对第三方证书的限制,抓包工具(charles.fiddler等)提供的证书都无法通过校验,也就无法抓取HTTPS请求了,对测 ...