关键词：
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>
//服务器端
<?php
header(‘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实现查询天气的小应用
demo：https://zsqosos.github.io/weather/截图：实现功能：打开网页时显示用户所在城市的天气状况，在输入框输入城市可查询其它城市。实现过程：先调用百度地图的API来获取用户所在的城市，随后调用聚合数据的天气API将数据放在页... 查看详情
原生js实现查询天气的小应用
demo：https://zsqosos.github.io/weather/截图：实现功能：打开网页时显示用户所在城市的天气状况，在输入框输入城市可查询其它城市。实现过程：先调用百度地图的API来获取用户所在的城市，随后调用聚合数据的天气API将数据放在页... 查看详情
javascript原生实现jsonp(代码片段)
查看详情
javascript的jsonp
目录索引：一、AJAX的概念二、POST&&GET三、原生实现AJAX简单示例 3.1实现代码 3.2重点说明四、框架隐藏域 4.1基本概念 4.2后台写入脚本 4.3JS主动判断Iframe的改变 4.4表单提交数据实战五、JQ的AJAX ... 查看详情
原生javascript里jsonp的实现原理
ajax不能跨域，jsonp可以跨域跨域的核心思想： 调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据) jsonp传进来的数据是{url:‘‘,data:{ ... 查看详情
❤️一个有趣小案例教你如何使用原生js使用和jquery应该如何使用jsonp❤️(代码片段)
文章目录一、什么是jsonp?二、原生js中jsonp的使用三、jquery中jsonp的使用四、总结一、什么是jsonp?简单点,jsonp其实就是一个跨域解决方案。当然它和json没有半毛钱关系!浏览器处于安全考虑,制定了同源策略,即同协议、同主机名、... 查看详情
❤️一个有趣小案例教你如何使用原生js使用和jquery应该如何使用jsonp❤️(代码片段)
文章目录一、什么是jsonp?二、原生js中jsonp的使用三、jquery中jsonp的使用四、总结一、什么是jsonp?简单点,jsonp其实就是一个跨域解决方案。当然它和json没有半毛钱关系!浏览器处于安全考虑,制定了同源策略,即同协议、同主机名、... 查看详情
原生js取代一些jquery方法的简单实现
原生JS取代一些JQuery方法的简单实现下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 1.选取元素//jQueryvarels=$(‘.el‘);//Nat... 查看详情
原生javascript里jsonp的实现原理
ajax不能跨域，jsonp可以跨域跨域的核心思想： 调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据) jsonp传进来的数据是{url:‘‘,data:{ ... 查看详情
原生javascript实现jsonp的封装
JSONP即JSONwithPadding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接... 查看详情
原生js简单实现定时抢月饼
早上跟人聊起月饼来，突然就想起了去年阿里的抢月饼事件，顺手写下这个抢月饼脚本。window.onload=function(){//判断时间数字是否小于10并格式化functionformat(arr){returnarr<10?‘0‘+arr:arr}vartimeStr=‘‘varendTime=‘100000‘vartimer=nullt... 查看详情
原生js实现简单的模态框
html部分：<imgsrc="images/8.jpg"> <buttonclass="btn"id="showMax">显示大图</button> <divid="modalBox"class="modalBox"> <divclass="modalBox-mat 查看详情
使用原生js实现简单的ajax
Ajax是一种使用javascript内置对象向服务器发送请求/接收响应的技术。它可以再页面已经完全显示出来之后再和服务器进行少量的数据交互，所以可以实现局部内容的刷新。ajax的实现，主要是靠javascript中的内置对象XMLHttpRequest。... 查看详情
jsonp实现跨域请求
直接用原生ajax请求另一个域的资源，会被同源策略限制，而用<scriptsrc="url"></script>这种方式“引入url”，实际上引入了一个js代码，就不会被同源策略限制，可以请求到。用这个有一个前提就是对方网站后台的返回确实... 查看详情
原生js发送ajax请求jsonp(代码片段)
一、JS原生AjaxAjax=异步Javascript+XML；ajax是一种数据请求的方式，不需要刷新整个页面。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。ajax的核心技术当然是XMLHttpRequest对象；ajax请求过程：创建XMLHttpReque... 查看详情
一个简单用原生js实现的小游戏----flappybird
这是一个特别简单的用原生js实现的一个小鸟游戏，比较简单，适合新手练习这是html结构<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><divid="game"><d 查看详情
原生js实现一个简单的前端路由（原理）
说一下前端路由实现的简要原理，以hash形式（也可以使用HistoryAPI来处理）为例，当url的hash发生变化时，触发hashchange注册的回调，回调中去进行不同的操作，进行不同的内容的展示。直接看代码或许更直观。1functionRouter(){2this.ro... 查看详情
原生js实现一个简单轮播效果(代码片段)
代码简单，直接上：<!DOCTYPEhtml><html><head><title>轮播</title><metacharset="utf-8"><styletype="text/css">*padding:0;margin:0;.mainCsswidth:100px;height:200px;positio 查看详情