分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

原生js实现简单JSONP

发布时间:2023-09-06 01:41责任编辑:傅花花关键词:jsJSONP

JSONP是一种非常常见的实现跨域请求的方法。其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输。

用原生JS实现JSONP非常简单,无非几点:

1)定义一个函数,用于处理接收到的跨域数据。

2)生成一个dom节点(script节点),然后src属性上面记入发送的目的URL以及参数。

3)在跨域服务器端接收GET请求,返回数据(返回之前定义函数的调用的字符串)。

4)删除之前生成的script节点。

演示如下:

1)首先需要一个是同源服务器,一个跨域访问的服务器。

最简单的方式就是使用apache配置两个虚拟主机。

//浏览器器端<script type="text/javascript"> ???//定义一个发送Jsonp请求的函数 ???function jsonp(obj) { ???????//定义一个处理Jsonp返回数据的回调函数window["callback"] = function(object) { ???????????obj.success(JSON.parse(object)); ???????} ???????var script = document.createElement("script"); ???????//组合请求URL ???????script.src = obj.url + "?fn=callback"; ???????for(key in obj.data){ ???????????script.src +="&" + key + "=" + obj.data[key]; ???????} ???????//将创建的新节点添加到BOM树上 ???????document.getElementsByTagName("body")[0].appendChild(script); ???}</script><script type="text/javascript"> ???//调用Jsonp函数发送jsonp请求 ???jsonp({ ???????url:"http://localhost/index.php", ???????data:{ ???????????name:"小明", ???????}, ???????success:function(obj) { ???????????alert("性别" + obj.sex); ???????} ???});</script>

  

//服务器端<?phpheader(‘Content-Type: application/json; charset=UTF-8‘);$fn = $_GET["fn"];$name = $_GET["name"];$result = array();if($name == "小明"){$result["sex"] = "男";} else if($name == "小红"){$result["sex"] = "女";}else {$result["sex"] = "未知";}echo $fn . "(‘" . json_encode($result) ."‘)";

  

原生js实现简单JSONP

原文地址:https://www.cnblogs.com/cryRoom/p/8418961.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved