【前端学习笔记】原生Javascript中通过JSONP(前端常用方法)进行跨域
来源:互联网 发布:日立有挖机软件吗 编辑:程序博客网 时间:2024/06/14 03:29
Ajax跨域—————————————————————————-
跨域: 跨域名一个域名下的文件去请求了和他不一样的域名下的资源文件,那么就会产生跨域请求这是ajax的跨域限制问题跨域的解决 : jsonp: json width padding核心: 1.script标签 2.用script标签加载资源是没有跨域问题的 3.script只认文件的实际内容,而不是后缀。只要内容是合法的js就能用流程: 1.在资源加载进来之前定义好一个函数,这个函数接受一个参数(要取的数据) ,而将要加载过来的文件里执行这个函数并将要取的数据作为参数来传递。 2.在需要的时候,通过script标签加载对应远程文件资源,当远程资源被加载进来 的时候,就会执行定义好的函数,并将要取的数据作为参数传递到当前文件。原理拓展: 动态地加载文件,例如点击以后才加载文件,就在点击事件里给body添加script标签 然后让该sciprt的src为文件地址,用url后面的callback参数来控制调用方法的方法名。
实例:
以下代码需要在服务器环境下运行
布局代码
<body> <input type="button" value="加载数字" /> <ul></ul> <input type="button" value="加载字母" /> <ul></ul> <input type="button" value="加载数字" /> <ul></ul></body>
JS代码
function fn0(data){ var aUl = document.getElementsByTagName('ul'); for(var i = 0; i < data.length; i++) { var oLi = document.createElement('li'); oLi.innerHTML = data[i]; aUl[0].appendChild(oLi); }}function fn1(data){ var aUl = document.getElementsByTagName('ul'); for(var i = 0; i < data.length; i++) { var oLi = document.createElement('li'); oLi.innerHTML = data[i]; aUl[1].appendChild(oLi); }}function fn2(data){ var aUl = document.getElementsByTagName('ul'); for(var i = 0; i < data.length; i++) { var oLi = document.createElement('li'); oLi.innerHTML = data[i]; aUl[2].appendChild(oLi); }}window.onload=function(){ var aInput = document.getElementsByTagName('input'); var aUl = document.getElementsByTagName('ul'); for(var i=0;i<aInput.length;i++) { (function(i){ aInput[i].onclick=function(){ var oScript = document.createElement('script'); oScript.src = 'data.php?t=num&callback=fn'+i; document.body.appendChild(oScript); } })(i); };}
后端代码(php)
//data.php<?php $t = isset($_GET['t']) ? $_GET['t'] :'num'; //前端告诉后端要输出哪个数据,这里是判断输出的数组是 //$arr1还是$arr2 $callback = isset($_GET['callback']) ? $_GET['callback'] :'fn0'; //动态生成调用数据的方法,不必在后台写死,默认调用fn0 //假设数据是两个不同数组 $arr1 = array('111111','222222222','3333333333','44444444'); $arr2 = array('aaaaaaaa','bbbbbbbb','ccccccccc','dddddddd'); //按照前台的标志来判断返回的数据 if($t == 'num'){ $data = json_encode($arr1); echo $callback."(".$data.")"; } else{ $data = json_encode($arr2); echo $callback."(".$data.")"; }
0 0
- 【前端学习笔记】原生Javascript中通过JSONP(前端常用方法)进行跨域
- 【前端学习笔记】原生Javascript中的ajax
- 学习前端javascript笔记
- 前端跨域技术----jsonp
- 前端跨域调用--JSONP
- javascript前端Range学习笔记
- 前端代码学习笔记 javascript
- 【前端学习笔记】JQuery的基本思想、常用方法
- 【前端学习笔记】JQuery事件细节、JQ进阶常用方法
- jQuery中JSONP 前端+后端
- 前端日期方法学习笔记
- 前端跨域技术之JSONP
- 前端跨域解决办法之JSONP
- 前端必须会的5个原生JavaScript对象方法
- 【前端学习笔记】深入学习Javascript:Cookie
- 前端学习实践笔记--JavaScript深入【1】
- 前端学习实践笔记--JavaScript深入【2】
- 前端学习实践笔记--JavaScript深入【3】
- 关于少林事件的一点看法
- 深度学习总结
- Oracle初探(八)
- 10年工作经验老程序员推荐的7个开发类工具
- C语言 内存泄露(只对XP有效果)
- 【前端学习笔记】原生Javascript中通过JSONP(前端常用方法)进行跨域
- nodejs
- 整理:深度学习 vs 机器学习 vs 模式识别
- C++_避免调用复制构造函数
- Linux下chkconfig命令详解
- scikit-learn(工程中用的相对较多的模型介绍):1.12. Multiclass and multilabel algorithms
- Java - Thinking in Java 第7章 复用类
- 预测的原理及其实战 (1)
- Codeforces Round #Pi (Div. 2)567D One-Dimensional Battle Ships(set)