美文网首页
jsonp 请求

jsonp 请求

作者: 月半女那 | 来源:发表于2018-11-15 14:07 被阅读0次

jsonp只能是GET请求不能是POST请求(说不出的痛,我一直记错了)

优点

  1. 不受同源策略限制
  2. 兼容性好
    同源策略:这是浏览器的一个安全功能,指的是:协议,域名和端口号(设置dataType:jsonp)

缺点

  1. 只支持GET不支持POST,
  2. 只支持http请求,不能解决不同域的两个页面之间如何进行j调用问题

原理

动态添加一个script标签,向服务器发送请求,通过callback参数指定回调函数名字,然后调用此回调,以json的数据格式作为参数传递,完成回调

jQuery 实现jsonp

$.ajax({
  url:'xxxxx',
  dataType:'jsonp',
  jsonp:'callback',
  success: function(data){
    xxxxx
  }
})

js实现

function loadScript(url,func){
  var head = document.head||document.getElementByTagName('head')[0];
  var script = document.createElement('script');
  script.src =  url;
  script.onload = script.onreadystatechange = function(){
  if(!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete'){
     func();
     script.onload = script.onreadystatechange = null;
   }
  }
  head.insertBefore(script,null);
}

window.baidu = {
    sug: function(data){
    console.log(data);
  }
}
loadScript('[http://suggestion.baidu.com/su?wd](http://suggestion.baidu.com/su?wd)=w',
function(){console.log('loaded')});

其他跨域方法

  1. 通过修改document.domain来跨子域

  2. 使用window.name来进行跨域

  3. window.postMessage

  4. CORS(使用自定义的HTTP头部与服务器进行沟通,从而决定请求活响应是应该成功还是失败)

function createCORS(method,url){
  var xhr = new XMLHttpRequest();
    if('withCredentials' in xhr){
        xhr.open(method, url, true);
    }else if(typeof XDomainRequest != 'undefined'){
        var xhr = new XDomainRequest();
        xhr.open(method, url);
    }else{
        xhr = null;
    }
    return xhr;
}

var request =createCORS('get','xxxxxx');
if(request){
    request.onload = function(){
        ......
    };
    request.send();
}
  1. websocket(是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工,双向通信)
    原理:在js创建websockets之后,会有一个HTTP请求发送到浏览器,取得服务器相应之后,建立的连接会使用HTTP升级从HTTP协议交换为websocketst协议
var scoket = new WebScokt('ws://xxxxxx');
scoker.send('xxxx');
scoket.onmessage = function(event){
xxxxx
}

相关文章

  • 前端 JSONP 原理及 Node 模拟 JSONP

    1、关于 JSONP 请求的注意项 a、JSONP 请求只支持 GET 形式 b、JSONP 请求返回的是一个自定...

  • ionic 京东项目笔记

    ionic 使用jsonp网络请求注意事项 jsonp请求后面务必需要拼接上&callback=JSONP_CAL...

  • JSONP、JQuery发送AJAX、JSONP请求

    1.JSONP 2.JQuery发送AJAX、JSONP请求 1.JSONP JSONP利用JavaScript...

  • javasscript - 收藏集 - 掘金

    jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp?为什么要用jsonp?JSONP(JSO...

  • angular中封装好的jsonp跨域

    1. 1.2使用创建好的jsonp发送请求 2. 2.2使用创建好的jsonp发送请求

  • 2019-11-12--钉钉手机端

    问题: 手机端无法支持自动授权,获取不到 jsonp 请求的结果 解决: jsonp 请求链接加上时间戳 原因: ...

  • jsonp解决ajax跨域的原理

    1.jsonp只能解决GET类型的ajax请求跨域问题2.jsonp请求不是ajax请求,而是一般的get请求3....

  • lesson35-JSONP

    为什么JSONP不支持POST请求? 因为JSONP是通过动态创建 实现的 动态创建 无法发起POST请求

  • JSONP

    局部刷新 用 来造get请求 用 来造get请求 JSONP JSONP就是动态创建 标签,’src‘指向get请...

  • Ajax下

    一、cors跨域请求 二、jsonp百度搜索的例子 jsonp.html jsonp.js

网友评论

      本文标题:jsonp 请求

      本文链接:https://www.haomeiwen.com/subject/eumdfqtx.html