有时候用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. 为了讲明白继承和super、this关键字,群主发了20块钱群红包

    摘要:以群主发红包为例,带你深入了解继承和super.this关键字. 本文分享自华为云社区<群主发红包带你深入了解继承和super.this关键字>,作者:共饮一杯无 . 需求 群主发随 ...

  2. javascript编程单线程之异步模式Asynchronous

    异步模式Asynchronous 不会等待这个任务结束才开始执行下一个任务,开启之后立即执行下一个任务,后续逻辑一般会通过回调函数的方式定义,异步模式对js 非常重要,没有异步任务单线程的 js 语言 ...

  3. Codeforces Round #827 (Div. 4) A-G

    比赛链接 A 题解 知识点:模拟. 时间复杂度 \(O(1)\) 空间复杂度 \(O(1)\) 代码 #include <bits/stdc++.h> #define ll long lo ...

  4. JSP Webshell免杀设计

    JSP Webshell免杀设计 @author:drag0nf1y 介绍 什么是Webshell? 被服务端解析执行的php.jsp文件 什么是RCE? remote command execute ...

  5. vulnhub靶场之CORROSION: 2

    准备: 攻击机:虚拟机kali.本机win10. 靶机:CORROSION: 2,网段地址我这里设置的桥接,所以与本机电脑在同一网段,下载地址:https://download.vulnhub.com ...

  6. win10 优化

    禁用服务中的某些不用的服务 例如 SysMain 服务 win+R键开启运行快捷方式,输入services.msc: 找到SysMain这个服务: 选择这个服务后,右键属性: 点击停止:启动类型选择禁 ...

  7. Node.js的学习(三)node.js 开发web后台服务

    一.Express -- Web开发框架 1.Express是什么? Express 是一个简洁而灵活.目前最流行的基于Node.js的Web开发框架, 提供了一系列强大特性帮助你创建各种 Web 应 ...

  8. 2022春每日一题:Day 33

    题目:[USACO 6.1.3] Cow XOR 没找到这题具体网址,这个题就是求最大异或区间(总长度尽量小,右端点尽量大) 嗯很显然一个[l,r]的异或和=s[r]s[l-1],那么现在有了优秀的n ...

  9. 前端学习 Nginx

    前端学习 nginx 本篇主要讲解 nginx 常用命令.基础概念(正向/反向代理.负载均衡.动静分离.高可用).配置文件结构,并通过简单的实验来体验反向代理和负载均衡,最后说一下 nginx 原理. ...

  10. element ui 使用Tooltip 文字提示,文本内容中输入空格

    '\u00a0'是'nbsp'的16进制表示 其他空格也可以使用下表的值: 代码如下 <el-tooltip effect="light" placement="t ...