基于原生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.prototype.toString;
    var head = doc.getElementsByTagName(‘head‘)[0] || doc.head || doc.documentElement;
    if (op.call(cfg) === ‘[object Function]‘) {
        success = cfg;
        cfg = {};
    }
    var type = cfg.type || ‘script‘,
        jsonpCallback = cfg.jsonpCallback || ‘fn‘;
    jsonp = type == ‘jsonp‘ ? (cfg.callbackName || ‘callback‘) : ‘‘, data = cfg.data || ‘‘, dataToParam = function (data) {
        var ret = [],
            key, e = encodeURIComponent;
        for (key in data) {
            ret.push(key + ‘=‘ + e(data[key]))
        }
        return ret.join(‘&‘);
    }, url = url + (/?/.test(url) ? ‘&‘ : (jsonp || data) ? ‘?‘ : ‘‘) + (jsonp ? (jsonp + ‘=‘ + jsonpCallback) : ‘‘) + (data ? ‘&‘ + dataToParam(data) : ‘‘);
    loadScript = function (url, callback) {
        var script = doc.createElement("script");
        script.type = "text/javascript";
        script.charset = "utf-8";
        if (script.readyState) { //IE
            script.onreadystatechange = function () {
                if (/loaded|complete/i.test(script.readyState)) {
                    script.onreadystatechange = null;
                    callback && callback.call(this);
                }
            };
        } else { //Others
            script.onload = function () {
                callback && callback.call(this);
            };
        }
        script.src = url;
        head.insertBefore(script, head.firstChild);
    }, removeScript = function () {
        var arg = arguments,
            script = arg[0],
            jsonpCallback = arg[1],
            type = Object.prototype.toString;
        //移除脚本
        if (script && /script/i.test(script.tagName)) {
            script.parentNode.removeChild(script);
        }
        //移除回调
        if (jsonpCallback && type.call(jsonpCallback) === ‘[object String]‘) {
            window[jsonpCallback] = null;
        }
        success();
    };
    var callback = window[jsonpCallback] = success;
    loadScript(url, function () {
        removeScript(this, jsonpCallback);
    });
}

调用方法：load(url,{"type":"script":"data":{}},calback);,原理和方法都很简单，但是jsonp方法只适合于GET方法儿不适合POST方法，这个还是需要注意的。

 

收藏了

http://lidongbest5.com/blog/20/

原生javascript里jsonp的实现原理

ajax不能跨域，jsonp可以跨域跨域的核心思想：     调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据) jsonp传进来的数据是{url:‘‘,data:{ ... 查看详情

原生javascript里jsonp的实现原理

ajax不能跨域，jsonp可以跨域跨域的核心思想：     调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据) jsonp传进来的数据是{url:‘‘,data:{ ... 查看详情

原生javascript实现jsonp的封装

JSONP即JSONwithPadding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接... 查看详情

json和jsonp的区别，以及使用方法

...流浏览器的跨域数据访问的问题。二、特点不同1、JSON：基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。2、JSONP：在客户端调用提供JSONP支持的URLService，... 查看详情

基于原生js的图片轮播效果简单实现

基本效果如下：实现了三张图片自动轮播+按键点击切换的效果。 基本思想：图片轮播的效果和老式电影院的胶片放映形式很相似，在老式的电影院放映中，使用长长的胶片记录影片，胶片上是按顺序排列的一系列图片，通... 查看详情

原生js取代一些jquery方法的简单实现

原生JS取代一些JQuery方法的简单实现下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 1.选取元素//jQueryvarels=$(‘.el‘);//Nat... 查看详情

原生js实现查询天气的小应用

demo：https://zsqosos.github.io/weather/截图：实现功能：打开网页时显示用户所在城市的天气状况，在输入框输入城市可查询其它城市。实现过程：先调用百度地图的API来获取用户所在的城市，随后调用聚合数据的天气API将数据放在页... 查看详情

原生js实现查询天气的小应用

demo：https://zsqosos.github.io/weather/截图：实现功能：打开网页时显示用户所在城市的天气状况，在输入框输入城市可查询其它城市。实现过程：先调用百度地图的API来获取用户所在的城市，随后调用聚合数据的天气API将数据放在页... 查看详情

json.stringify()方法的原生js实现

...浏览器运行如下代码运行结果本文的JSON.stringify()方法的原生JS实现属于对javascript灵活应用的基本功。实现思路来自于笔者平日的工作与思考的总结。希望大家都能掌握以便在面试中脱颖而出。有需要前端学习资料的同学可以私... 查看详情

原生js实现ajax

...来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？  JQuery提供的Ajax方法：1$.ajax({2url:,3type:‘‘,4dataType:‘‘,5data:{67},8success:function(){910},11error:function(){1213}14})　　原生js实现 查看详情

js怎样用原生js实现jquery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，只是与window.onload方法还是有差别的。总的来说，window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行。$(document).ready()是DOM结构绘制完成... 查看详情

原生js发送ajax请求jsonp(代码片段)

一、JS原生AjaxAjax=异步Javascript+XML；ajax是一种数据请求的方式，不需要刷新整个页面。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。ajax的核心技术当然是XMLHttpRequest对象；ajax请求过程：创建XMLHttpReque... 查看详情

jsonp实现跨域请求

直接用原生ajax请求另一个域的资源，会被同源策略限制，而用<scriptsrc="url"></script>这种方式“引入url”，实际上引入了一个js代码，就不会被同源策略限制，可以请求到。用这个有一个前提就是对方网站后台的返回确实... 查看详情

js原生方法原理探究：如何实现object.assign()？

这是JS原生方法原理探究系列的第七篇文章。本文会介绍如何实现Object.assign()方法。Object.assign()的基本用法要实现Object.assign()，首先了解它的大概用法：接受的第一个参数表示目标对象（浅拷贝的结果），如果是null或者undefined，... 查看详情

javascript的jsonp

 目录索引：一、AJAX的概念二、POST&&GET三、原生实现AJAX简单示例　　3.1实现代码　　3.2重点说明四、框架隐藏域　　4.1基本概念　　4.2后台写入脚本　　4.3JS主动判断Iframe的改变　　4.4表单提交数据实战五、JQ的AJAX　　... 查看详情

js原生方法原理探究：如何实现instanceof？

这是JS原生方法原理探究系列的第五篇文章。本文会介绍如何实现instanceof方法。typeof操作符返回一个表示数据类型的字符串，它可以应付常规场景下的数据类型判断。对基本数据类型undefined、boolean、string、number、Symbol和引用数... 查看详情

浅谈用原生js实现数组的slice方法

slice方法有这几种情况：不传参、传一个参数、传两个参数。并且传参支持负数，具体每个情况的效果在这里就不说了。核心方法：通过for循环遍历调用此方法的数组，把要取出的内容放入新数组，然后将新数组返回。一切的条... 查看详情

浅谈用原生js实现函数的bind方法

bind的作用是让目标函数执行时候的this改为指定的上下文。一般情况下，this取决于调用者，谁调用函数this就是谁（自执行函数、定时器……之类的特殊情况除外）。有那么一句话，在JavaScript中，万物皆对象。1varwant=functionwant(){2... 查看详情