原生js实现jsonp
有时候用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的更多相关文章
- 基于原生JS的jsonp方法的实现
基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...
- 用原生js来处理跨域的数据(jsonp)
说明总结: 1.ajax和jsonp其实本质上是不同的东西.ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提 ...
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 原生js实现简单JSONP
JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- Ajax进阶之原生js与跨域jsonp
什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...
- 用原生js实现ajax、jsonp
转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...
- 原生JS和jQuery分别使用jsonp来获取“当前天气信息”
需掌握的技能点: jsonp.跨域相关等. 以下两种代码,均可直接运行. 1.使用原生JS: <!DOCTYPE html> <html lang="en"> ...
- 用原生JS实现AJAX和JSONP
前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
随机推荐
- 前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...
- Request method ‘POST‘ not supported。 Failed to load resource: net::ERR_FAILED
1.问题描述 技术栈:前后端项目分离(Springboot+Vue+MybatisPlus) 前端报错信息: 后端报错信息: 2.问题分析 这里使用了ResultFul风格的接口设计方式.增删改查对应 ...
- echarts在Vue项目中的实际运用效果图
文章目录 1.在后台系统首页中.可以根据需求制作相应的图表 2.在Vue中使用echarts的详细过程参照这个链接 1.在后台系统首页中.可以根据需求制作相应的图表 2.在Vue中使用echarts的 ...
- 齐博x1自定义字段关联其它字段的隐藏显示
如下图,对于单选\多选\下拉框这种表单类型, 选择某一项后, 你还想他关联其它选项的隐藏或显示,你可以加多一个参数设置处理通常情况,用得最普遍的,就是两项参数,用竖线隔开,比如下面的1|洋房2|别墅 ...
- NLP之TextRNN(预测下一个单词)
TextRNN @ 目录 TextRNN 1.基本概念 1.1 RNN和CNN的区别 1.2 RNN的几种结构 1.3 多对多的RNN 1.4 RNN的多对多结构 1.5 RNN的多对一结构 1.6 ...
- 重新整理 .net core 实践篇 ———— linux 上线篇 [外篇]
前言 简单整理一个linux 简单上线. 这个是该系列的外篇,该系列继续更新.献给刚学的人. 正文 安装实例 dotnet new webapp -n AspNetCoreDemo -o firstw ...
- Linux--多线程(二)
线程的同步和互斥 基本概念 概述:现在操作系统基本都是多任务的操作系统,同时有大量可以调度的实体在运行.在多任务操作系统当中,同时运行的多个任务可能: 都需要访问/使用同一种资源 多个任务之间有依赖关 ...
- python的一些运算符
# 1.算术运算符 print('1.算术运算符') # 1.1 + 求和 a = 10 b = 20 c = a + b print(c) print('a+b={}'.format(c)) pri ...
- ES6 学习笔记(三)原始值与引用值
总结: 1.原始值,表示单一的数据,如10,"abc",true等. 1.1. ES的6种原始值: Undefined.Null.Boolean.Number.String.Sym ...
- 「浙江理工大学ACM入队200题系列」问题 J: 零基础学C/C++83——宁宁的奥数路
本题是浙江理工大学ACM入队200题第八套中的J题 我们先来看一下这题的题面. 题面 题目描述 宁宁参加奥数班,他遇到的第一个问题是这样的:口口口+口口口=口口口,宁宁需要将1~9 九个数分别填进对应 ...