首页 > 其他分享 >2023.04.07 - 用jQuery发起JSONP请求时jsonpCallback和success的回调区别在哪?

2023.04.07 - 用jQuery发起JSONP请求时jsonpCallback和success的回调区别在哪?

时间:2023-04-07 20:24:30浏览次数:48  
标签:jQuery 函数 success handleData 2023.04 跨域 JSONP 请求

在使用 jQuery 发起跨域请求时,可以通过指定 dataTypejsonp 来实现 JSONP 跨域请求。此时,jQuery 会自动生成一个回调函数,并将其作为参数发送给服务器。服务器需要将返回数据包装在回调函数中,以便于客户端解析。

以下是一个简单的 jQuery 实现 JSONP 跨域请求的示例:

$.ajax({
  url: 'http://example.com/api/data',
  dataType: 'jsonp',
  jsonpCallback: 'handleData', // 指定回调函数名称
  success: function(data) {
    console.log(data);
  }
});

function handleData(data) {
  console.log(data);
}

其中 url 是需要请求的 URL;dataType 指定请求数据的类型,这里指定为 jsonpjsonpCallback 可以指定回调函数的名称,若不指定则 jQuery 自动添加一个随机生成的名称。

需要注意的是,Ajax 跨域请求需要服务器端支持JSONP格式的数据返回,且需要设置头部支持当前域名。因此服务器端需要设置相应的CORS或者JSONP机制,和前端进行协作。

如果需要发送其他类型的跨域请求,例如 CORS,可以通过 $.ajax() 函数的 crossDomainxhrFields 属性实现。但需要注意的是,CORS 跨域请求需要在服务端进行相应的设置,客户端只能通过 xhrFields 指定额外的属性。

需要注意的是,跨域请求可能会带来安全风险,因此需要在服务端进行一定的安全处理,例如跨域来源的校验等。

在 jQuery 发送 JSONP 请求时,指定的回调函数名称作为请求参数发送到服务器端,并由服务器端返回一段 JavaScript 代码,在浏览器端被解析并执行。

在上面的代码中,jsonpCallback 指定的回调函数名称为 handleData,这意味着 jQuery 会生成类似以下的请求 URL:

http://example.com/api/data?callback=handleData

服务器需要按照 JSONP 的约定,将返回数据包裹在 handleData 函数中,例如:

handleData([
  { text: 'item 1' },
  { text: 'item 2' },
  { text: 'item 3' }
])

当 jQuery 获取到这段 JavaScript 代码时,浏览器会将其当作一段脚本代码执行,在全局环境中定义了名为 handleData 的函数,并执行该函数。同时,该函数的参数值为服务器返回的数据,被传递给了 success 回调函数。

因此,handleDatasuccess 这两个回调函数的作用是类似的,都是用来处理返回的数据的。不同的是,handleData 函数是由服务器端生成的,而 success 回调函数是由客户端定义的。在请求成功后,jQuery 会先执行 handleData 函数,然后才执行 success 回调函数。

标签:jQuery,函数,success,handleData,2023.04,跨域,JSONP,请求
From: https://www.cnblogs.com/yehuda/p/17297239.html

相关文章

  • 【2023.04.06】我要否定“为善不欲人知”
    从小到大家人给我的教育就是做好事不要留名,这是做好事的最高境界,因为做好事留名的话,也许会让别人觉得你贪慕名声,你是个爱慕虚荣的人像我自己的话,每个月都会固定捐款给山区孩子,或许是“为善不欲人知”的想法,我从来没有炫耀过我自己做过的这些事,因为我不想将我的道德“强行”施加给......
  • jquery 根据开始日期加天数计算有效期
    functiondateTime(startDate,dayTime){//起始日期,天数  vardate=newDate(startDate);  varnewDate=newDate(date.getFullYear(),date.getMonth(),date.getDate()+dayTime);  varyear1=date.getFullYear();  varmonth1=date.getMonth()+1;  var......
  • 2023.04.06 - vue组件中动态指定监听的值
    业务场景:高拍仪给出的视频信息API回调里会不断返回图像数据。因为有主副摄像图像信息,并且两个图像信息会二选一展示在DOM容器里。所以就是二对一的关系。//主摄像数据letpriPic:string='';//副摄像数据letsubPic:string='';//展示在容器的数据=主摄像数据||副摄像......
  • NuGet Response status code does not indicate success: 401 (Unauthorized).
    Retrying'FindPackagesByIdAsyncCore'forsource'https://nexus-cn/repository/nuget-group/FindPackagesById()?id='Moq'&semVerLevel=2.0.0'.Anerroroccurredwhilesendingtherequest.Therequestwasaborted:Therequest......
  • 2023.04.06 - 使用mixin动态混入,对vue组件中的数据做兼容经验总结(xp)
    业务场景:在一个高拍仪的硬件设备中,厂家给了两套不同的API,分别支持winXP和winXP以上版本的系统,而这两套API的实现方式截然不同,一套使用的是http通信,一套是使用scoket通信,方法的调用自然也是不同。我需要在同一组件兼容这两套代码。这种需求下很明显,我除了修改组件里的函数方法,......
  • jquery触发/失去焦点事件
    触发焦点:$("Element").focus()触发每一个匹配元素获得焦点事件。$("Element").focus(function)事件会在获得焦点的时候触发,既可以是鼠标行为,也可以是按tab键导航触发的行为,并且绑定一个处理方法。失去焦点:$("Element").blur()触发每一个匹配元素失去焦点事件。$("Element"......
  • 最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor
     最近项目中用到了JqueryEasyui和KindEditor等框架组件,问题真不少啊~ 一些看起来很简单理所当然的事情,竟然花费了不少时间,才解决好~  1.readonly和disable的区别 readonly:只读,不可编辑,提交表单时,值会提交到后端。 disable:禁止(包含了“只读”......
  • jQuery实现Ajax通讯的几种常用方式
    这里介绍3种jQuery.get(url,[data],[success(data,textStatus,jqXHR)],[dataType])jQuery.post(url,[data],[success(data,textStatus,jqXHR)],[dataType])jQuery.ajax(url,[settings])第三种是我最常用的,看个人习惯了,其实都OK第一种不支持中文,要用......
  • Js/Jquery获取自定义属性的方法
    html:<spanid="item"data-test='test'></span>方法一、原生JS的getAttribute获取自定义属性设置属性.setAttribute("属性","值")获取属性.getAttribute("属性")varspan=document.getElementById('item').ge......
  • js和jquery获取屏幕宽高以及加margin和padding等边距的宽高
    Javascript:网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的高)网页正文全文宽:document.body.scrollWidth网页正文......