原生javascript里jsonp的实现原理

ajax不能跨域,jsonp可以跨域


跨域的核心思想:

调用(拿到的接口),定义(jsonp核心处理器)分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据 )

jsonp传进来的数据是{url:‘‘,data:{

cbName=‘cb‘,(根据接口制定的命名规范,有些事叫callback)

wd=‘aaa‘,

......(之后的数据都要进行字符串拼接)

},success:function(result){}}

一:设置默认状态(容错处理)

json=json||{};

if(!json.url)return;

json.data.cbName=json.data.cbName ||‘cb‘;

json.data=json.data||{};

二:函数名做清除缓存处理

json.data[json.data.cbName ]=‘show‘+Math.random();    json.data[json.data.cbName]=json.data[json.data.cbName].replace(‘.‘,‘‘);

三:data数据转成字符串

for(var name in json.data){

arr.push(name+‘=‘+encodeURIComponent(json.data[name]));

}

var str=arr.join(‘&‘);

四:定义处理数据函数返回回调函数

window[json.data[json.data.cbName] ]=function(result){

success&&success(result);

oH.removeChild(oS);//数据获取到后删除掉oS

};

五:存放数据到script ,获取调用接口

var oH=document.getElementsByTagName(‘head‘)[0];

var oS=document.createElement(‘script‘);

oS.src=json.url+‘?‘+str;

oH.appendChild(oS);


1.把拿到的数据存到一个script里面它的src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abb&cb=show "这里相当于数据调用的地方

其真实面目是:show({q:"abb",p:false,s:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]});

2.定义

function show(json){

json.s//取到的数据是一个数组:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]

}

function jsonp(url//数据形参){

//存数据到地址到新的script

var oH=document.getElementsByTagName(‘head‘)[0];

var oS=document.createElement(‘script‘);

oH.appendChild(oS);

}

当某个事件触发的时候调用:

jsonp(url//数据地址实参);


1.拿到jsonp接口

拿到百度搜素接口的步骤

1.F12

2.Network==找开头是su的文件,并且关键词是相应的

3.https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abb&json=1&p=3&sid=18285_1423_17948_18205_17001_17072_15711_12291_18086_18016&csor=3&cb=jQuery110207279864843003452_1456310625782&_=1456310625787

4.删除没有用的信息

5.地址删减完:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abb&cb=show

wd             word          关键字

cb             callback     回调函数

6.地址放入浏览器得出的数据是:

show({q:"abb",p:false,s:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]});

jsonp提供的数据接口相当于一个调用函数

所以需要在跨域的时候先定义一个函数show

地址接口相当于是获取了这些数据

注意:1.人家给你接口你才能用

2.jsonp的回调函数,必须是全局的

时间: 2024-10-14 04:40:03

原生javascript里jsonp的实现原理的相关文章

原生javascript实现jsonp的封装

JSONP即JSON with Padding.由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源.如果要进行跨域请求, 我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象. 这种跨域的通讯方式称为JSONP. 我们可以动态的去创建一个script标签,利用他的src属性没有跨域的限制来实现的,相当于我们引入一个js文件 附上源码: jsonp: funct

JSONP与CORS原理与示例

jQuery实现JSONP $.getJSON实现跨域 $.getJSON("http://localhost:8080/bean?callback=?", {id:2,name:'李四',sex:'男'}, function(data) { alert(data.id+data.name+data.sex); }); 使用jquery插件jquery.jsonp.js实现跨域 $.jsonp({ url: 'http://localhost:8080/bean?callback=?'

原生 JavaScript 实现 AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据

javascript实现jsonp跨域问题+原理

在工作中往往存在跨域的问题 ,跨域是什么概念就不在这里了,搜这类问题的肯定已经知道了.下面直接探讨jsonp跨域原理 jspon跨域原理: 1.动态创建一个script标签 var script = document.createElement("script"); 2.添加src属性,value也就是所谓的接口的写入(注:此处要返回的是一个回调函数callback:这里可以省略callback字段写成 script.src = "http://xxxx.com/?user=

jsonp 跨域原理详解

JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在

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

基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuery直接封装有jsonp的方法,很简便,只需在ajax请求的参数中加入datatype:jsonp,jsonp:jsonpcallback即可,这里写下用原生js实现jsonp的源码. load= function (url, cfg, success) { var op = Object.proto

JavaScript事件委托的技术原理

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

常见的dom操作----原生JavaScript与jQuery

1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document.createElement("div");if(document.body){ document.body.appendChild(newDiv);}else{ document.documentElement.appendChild(newDiv);} document.createTe

使用原生javascript如何读写css样式?

一说起操作css样式很多人都会想到jQuery的css方法: $(selector).css(name) ,但是有思考过如何使用原生javascript来实现类似的功能么?本文和大家分享的就是使用原生javascript实现css样式相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 大家最熟悉的原生js操作样式的方法非DOM中的Style对象莫属了,但是这个方法只能获取和修改html文档中的内联样式,无法操作非内联样式(内部样式和外部样式表).我通过搜索和整理,总结了使用原生