分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

jsonp跨域请求的方式

发布时间:2023-09-06 02:00责任编辑:赖小花关键词:jsjson跨域

1、jsonp一种请求方式、用于解决一个棘手的问题:

由于浏览器具有同源策略:即可以通过后台去访问其他网站,而不能通过浏览器(ajax请求)访问其他网页或域(阻止ajax请求,但是无法阻止<script src="">请求,所有带src属性的都不阻止

巧妙的实现方式:

创建一个<script>标签,设置它的src属性为需要访问的地址,返回的数据必须是json格式的、只能发get请求

实现原理:

在src里面带一个callback=fun参数,参数的值是需要服务端构造的函数来返回。服务端会返回return Httprequest(fun(数据))然后需要在本地script脚本里面加一个fun函数,函数内容可以是function fun(arg){
console.log(arg)
}
这里的arg就是服务端返回的数据,完成后再删掉这个script标签

实现源码:

script> ???????function getContent(){ ???????????/* ???????????var xhr = new XMLHttpRequest(); ???????????xhr.open(‘GET‘,‘http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2‘); ???????????xhr.onreadystatechange = function(){ ???????????????console.log(xhr.responseText); ???????????}; ???????????xhr.send(); ???????????*/ ???????????/* ???????????var tag = document.createElement(‘script‘); ???????????tag.src = ‘http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403‘; ???????????document.head.appendChild(tag); ???????????document.head.removeChild(tag); ???????????*/ ???????????$.ajax({ ???????????????url: ‘http://www.jxntv.cn/data/jmd-jxtv2.html‘, ???????????????type: ‘POST‘, ???????????????dataType: ‘jsonp‘, ???????????????jsonp: ‘callback‘, ???????????????jsonpCallback: ‘list‘ ???????????}) ???????} ???????function list(arg){ ???????????console.log(arg); ???????}

  更多:https://www.cnblogs.com/wupeiqi/p/5703697.html

jsonp跨域请求的方式

原文地址:https://www.cnblogs.com/qiangayz/p/9211421.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved