jQuery封装jsonp

最新推荐文章于 2024-08-20 08:45:37 发布

yjx_43750162

最新推荐文章于 2024-08-20 08:45:37 发布

阅读量284

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/99674925

版权

对于经常用jQuery的开发者来说，能注意到jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:“jsonp”，就能实现JSONP跨域了。
如下是封装的方法：
html页面代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="ajax3.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    
    $('#btn').click(function(){
     ajax({
      type:'get',
      url:'http://tom.com/jsonp.php',
      dataType:'jsonp',
      jsonp:'cb',
      jsonpCallback:"haha",
      data:{username:'张无忌',password:'1234'},
      success:function(data){
       console.log(data);
      }
     });
    })
    
   })
  </script>
 </head>
 <body>
  <input type="button" name="btn" id="btn" value="点击测试" />
 </body>
</html>

js代码：

function ajax(obj){
 var defaults={
  type:'get',
  async:true,
  url:'#',
  dataType:'text',
  jsonp:"callback",
  data:{},
  success:function(data){console.log(data);}
 }; 
 for(var k in obj){
  defaults[k]=obj[k];
 }
 if(defaults.dataType=='jsonp'){
  ajax3Jsonp(defaults);
 }else{
  ajax3Json(defaults);
 }
}
function ajax3Jsonp(defaults){
 // var cbName='jQuery12334342342_35435435435';
 //expando: "jQuery" + (m + Math.random()).replace(/\D/g, ""),
 var cbName='jQuery'+('2.1.1'+Math.random()).replace(/\D/g,"")+'_'+(new Date().getTime());
 if(defaults.jsonpCallback){
  cbName=defaults.jsonpCallback;
 }
 // 这里就是回调函数,调用方式, 服务器响应内容来调用 
 // 向window对象中添加一个方法, 方法的名称 是cbName
 window[cbName]=function(data){
  //console.log('=============');
  defaults.success(data);
 }
 var param='';
 for(var attr in defaults.data){
  param+=attr+'='+defaults.data[attr]+'&';
 }
 if(param){
  param=param.substring(0,param.length-1);
  param='&'+param;
 }
 // 动态 的创建script标签
 var script=document.createElement('script');
 // "http://tom.com/data.php?callback=jQuery211039499647145023986_1564708609916^&_=1564708609917"
 script.src=defaults.url+'?'+defaults.jsonp+'='+cbName+param;
 var head=document.getElementsByTagName('head')[0];
 head.appendChild(script);
}
function ajax3Json(defaults){
 // 创建xhr对象
 var xhr=null;
 if(window.XMLHttpRequest){
  xhr=new XMLHttpRequest();
 }else{
  xhr=new ActiveXObject("Microsoft");
 }
 var param='';
 // 重点： 
 for(var attr in  defaults.data){
  param+=attr+'='+defaults.data[attr]+'&';// username=张三&password=123&
 }
 if(param){
  param=param.substring(0,param.length-1);
  // alert(param);
 }
 // 处理get请求参数  并且 处理中文乱码的问题
 if(defaults.type=='get'){
  defaults.url+='?'+encodeURI(param);
 }
 // 准备发送  设置 发送的参数
 xhr.open(defaults.type,defaults.url,defaults.async);
 var data=null;
 if(defaults.type=='post'){
  data=param;
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 }
 // 执行发送请求
 xhr.send(data);
 // 回调函数
 xhr.onreadystatechange=function(){
  if(xhr.readyState==4){
   if(xhr.status==200){
    var data=xhr.responseText;
    if(defaults.dataType=='json'){
     data=JSON.parse(data); // 转换为 字符串json对象
    }
    defaults.success(data);
   }
  }
 }
}

php代码：

<?php
$arr=array("name"=>"sd","pwd"=>"135");
 $cb=$_GET['cb'];
 echo $cb.'('.json_encode($arr).')';
?>

yjx_43750162

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫