jsonp原生js跨域拿新浪数据插件封装【可扩展】
//修改了一个bug,增加了手动释放垃圾
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jsonp跨域源码插件封装</title>
</head> <body>
<input type="text" id="code">
<input type="button" value="查询" id="serch">
<script>
; (function (win) {
const jsonp = function (dataPack) {
const callback = dataPack.callBack || '';
const code = dataPack.code || 'sh000001';
const getUrl = 'http://hq.sinajs.cn/list=' + code;
let scriPt = document.createElement('script');
scriPt.src = getUrl;
scriPt.id = 'xl';
const oldScript = document.getElementById('xl');
const success = function () {
const val = eval('hq_str_' + code);
//手动垃圾回收
for (let i in window) {
if (/^hq_str_/.test(i)) {
window[i] = null;
}
}
callback && callback(val);
}
const error = function () {
callback && callback('跨域发生了错误！');
}
if (oldScript) {
document.body.removeChild(oldScript);
document.body.appendChild(scriPt);
} else {
document.body.appendChild(scriPt);
} scriPt.onload = success;
scriPt.onerror = error;
}
win.jsonp = jsonp;
})(window);
document.querySelector('#serch').addEventListener('click', function () {
jsonp({
code: document.querySelector('#code').value,
callBack: function (data) {
console.log(data);
}
});
})
</script>
</body> </html>
jsonp原生js跨域拿新浪数据插件封装【可扩展】的更多相关文章
- JQuery和原生JS跨域加载JSON数据或HTML。
前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...
- jsonp实现js跨域请求
sonp是跨域通信的一个协议 具体来说jsonp实现跨域请求其实是使用js文件引用(js文件不一定是.js结尾)可跨域的性质,将请求的结果包裹在客户端需要调用的js方法内部.需要前后端配合使用. 前段 ...
- js跨域问题新方案
只要创建一个空图片. js代码: var data = "http://localhost:8080/test?id="+id+"&content="+ ...
- JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
- 初步了解关于js跨域问题-jsonp
js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...
- js跨域交互之jsonp - 看完就能让你了解jsonp原理 (原)
跨域? 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 同源策略? 一般来说 a.com 的网页无法直接与 b.com的服务器沟通, 浏览器的同源策略限制从一个源加载的文档或脚本 ...
- js跨域请求jsonp解决方案-最简单的小demo
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
随机推荐
- VMware 与Ubuntu通过samba服务器共享文件
Linux和windows在虚拟机下文件共享有很多种方式,常用的有使用VMware Tools共享和Samba服务器进行共享,使用VMware Tools这里就不说了,我使用的是Samba服务器. 其 ...
- JSP2 特性
JSP2 新特性 1.直接配置 JSP 属性 2.表达式语言 3.简化的自定义标签 API 4.Tag 文件语法 如果要使用 JSP2 语法,web.xml 文件必须使用 Servlet2.4 以上版 ...
- 7.Configurator API 详细介绍
一.Configurator类介绍与API解释 1.Configurator类介绍 1)用于设置脚本动过的默认延时 2)功能 a.可调节两个模拟动作间的默认时间间隔 b.可调节输入文本的输入时间间隔 ...
- CF760 C. Pavel and barbecue 简单DFS
LINK 题意:给出n个数,\(a_i\)代表下一步会移动到第\(a_i\)个位置,并继续进行操作,\(b_i\)1代表进行一次翻面操作,要求不管以哪个位置上开始,最后都能满足 1.到达过所有位置 2 ...
- java网络传输数据
网络文件传输的问题,实际也是一种IO读写的基本问题.对于网络的文件数据写入到服务器的进程中,然后把进程中的网络IO系统传递到客户机,这个阶段,数据以字节流的形式保存.当该字节流被客户进程接受后,客户进 ...
- Map总结
Map是键值对集合,是一对一对往上存的,要保持键的唯一性 形式:Map<K, V> 方法: 增 put(K key, V value) 若存储时Map中有相同的键,则返回原来键的值,并覆盖 ...
- 漫谈JWT
一.JWT简介[对于了解JWT的童鞋,可以直接跳到最后] 咱们就不弄那些乱七八糟的概念,就简单点说一下JWT是什么.有什么和能干什么 1. JWT概念和作用 JWT全称为json web token, ...
- redis笔记之两种持久化备份方式(RDB & AOF)
Redis支持的两种持久化备份方式(RDB & AOF) redis支持两种持久化方式,一种是RDB,一种是AOF. RDB是根据指定的规则定时将内存中的数据备份到硬盘上,AOF是在每次执行命 ...
- 爬虫实战--基于requests和beautifulsoup的妹子网图片爬取（福利哦！）
#coding=utf-8 import requests from bs4 import BeautifulSoup import os all_url = 'http://www.mzitu.co ...
- attachEvent 中this指向
IE中使用的事件绑定函数与Web标准的不同,而且this指向也不一样,Web标签中的this指向与传统事件绑定中的this一样,是当前目标,但是IE中事件绑定函数中this指向,通过使用call或ap ...