ajax+jquery库 跨域的学习

跨域解决方案有很多

其中对jsonp的跨域进行学习:
Jsonp的本质是动态创建标签,通过src属性向服务端发送跨域请求,通过响应的内容动态调用方法(通过传递的参数得到服务端响应的数据)

后台接口传递$cb,前台就要在callback=cb保持一致,在function cb()也要保持一致。则函数名字就是根据后台接口传过来的函数名字保持一致。
在这里插入图片描述这里的callback也是由后台接口_GET['']里面设定的在这里插入图片描述很方便传递参数

jsonp的本质:动态创建script标签,然后通过src属性发送跨域请求,然后服务端响应的数据格式【函数调用(foo(实参)】,在发送请求前声明一个函数,函数名字与参数传递的名字一致。这里声明的函数是由服务器响应的内容,(可理解为服务器调用)。

callback名字,还有callback后的值都可以在接口中重新定义。

jsonp不是ajax

Jquery中已经帮我们封装了jsonp。
dataType:‘jsonp’,
jsonp:‘cb’,
//jsonp属性的作用就是自定义参数名字,(callback=cb)这个值指的是等号前面的键。这里是cb则后端接口获取也是cb。
jsonpcallback:‘abc’,
//指定服务端返回的值是什么,callback=abc,这里指的是abc。
data:{},
![jsonp:'',使用jquery可以对后端获取的值自定义名称。](https://img-blog.csdnimg.cn/20191005135622768.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzZGZ3eHk=,size_16,color_FFFFFF在这里插入图片描述
以上学习使用,还有部分没有完善,有错误感谢指正。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
跨域是指浏览器限制了由一个域名下的网页向另一个域名下的服务器发送请求的行为。这是为了保护用户的隐私和安全而设立的安全策略。然而,在某些情况下,我们可能需要在前端使用jQueryajax方法发送跨域请求。为了解决这个问题,可以使用JSONP或CORS进行跨域请求。 JSONP(JSON with Padding)是通过在请求中添加一个回调函数的方式来实现跨域请求的。回调函数会将服务端返回的数据包裹在函数中,从而解决了跨域问题。通过设置dataType为"jsonp",可以告诉jQuery使用JSONP来发送跨域请求。例如: ```javascript $.ajax({ url: "http://example.com/api/data", dataType: "jsonp", success: function(response) { console.log(response); } }); ``` CORS(Cross-Origin Resource Sharing)是一种更为现代化的跨域请求解决方案。通过在服务端设置响应头中的Access-Control-Allow-Origin字段,允许指定的域名来访问资源。如果服务端允许跨域请求,那么在前端使用jQueryajax方法发送请求时,就不再会受到浏览器的限制。例如: ```javascript $.ajax({ url: "http://example.com/api/data", type: "GET", success: function(response) { console.log(response); } }); ``` 总的来说,如果需要在前端使用jQueryajax方法进行跨域请求,可以使用JSONP或CORS来解决跨域问题。具体的解决方案取决于服务端是否支持和设置了相应的跨域策略。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [jQuery(五)Ajax跨域](https://blog.csdn.net/weixin_53072519/article/details/120292253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [jqueryajax处理跨域的三大方式](https://blog.csdn.net/lgxzzz/article/details/119900540)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值