利用Jsonp跨域大发888搭建请求数据(原生和Jquery的ajax请求),简单易懂!

前言 :本文示例部署大发888搭建QQ2952777280【】 hxforum.com 在XAMPP建站集成软件包上,在localhost环境下进行测试

1、什么是跨域

由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况 :
(1)网络协议不同,如http协议访问https协议。

(2)端口不同,如8080端口访问3000端口。

(3)域名不同,如aaaa.com访问bbbb.com。

(4)子域名不同,如java.ddd.com访问qianduan.ddd.com。

(5)域名和域名对应ip,如www.a.com访问20.205.28.90.

2、Jsonp方法

因为srript标签是不存在跨域的,所以利用 script标签,加载src路径,实现跨域加载js文件。该js文件中需要定义好一个方法,将该方法名传递给服务端,服务端根据该方法名,拼装一个方法调用语句,响应给浏览器。又浏览器来执行该语句调用方法。通过参数,将响应的数据取出即可。
(1)原生JS请求方式

前端代码:
var script = document.createElement(‘script‘);
script.type = ‘text/javascript‘;
script.src = ‘./js/text.js‘;
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
console.log(res) //{name:"小明",age:24}
}

后端代码:
onBack({
name:"小明",
age:24
})

这里需要注意的是,后端的数据形式必须作为函数的参数,且函数名要前后端保持一致。
(2)Jquery中的ajax请求方式

前端代码:

$.ajax({
url:"./js/text.js",
type:"GET",
dataType:"jsonp", // 定义返回方式为jsonp
jsonpCallback:"onBack", //定义回调函数名字,前后端保持一致
success:function(data){
console.log(data) //{name:"小明",age:24}
},
error:function(res){
console.log("请求失败!")
}
})

后端代码:

onBack({
name:"小明",
age:24
})

缺点1:只能使用get请求。
缺点2:因为使用的是script标签,存在安全隐患。
优点1:支持老式浏览器,以及可以向不支持CORS的网站请求数据。

原文地址:http://blog.51cto.com/14203496/2350793

时间: 2024-12-07 18:11:05

利用Jsonp跨域大发888搭建请求数据(原生和Jquery的ajax请求),简单易懂!的相关文章

jquery下利用jsonp跨域访问实现方法

$.ajax({ async:false, url: '', // 跨域URL type: 'GET', dataType: 'jsonp', jsonp: 'jsoncallback', //默认callback data: mydata, //请求数据 timeout: 5000, beforeSend: function(){ //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 }, success: function (jso

Jsonp 跨域请求实例

关于jsonp的一个实例,其实自己也不是很了解,今天下午稍微研究了一下: 简单来说,jsonp就是为了两个不同网站之间数据传递而产生的,主要用于js脚本,因为浏览器本身是禁止跨域访问的: 本机实例: http://127.0.0.1:80/index.php <script src="http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script> <script type="tex

轻松搞定JSONP跨域请求

一.同源策略 要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑,当前域不能访问其他域的东西. 一些常见的是否同源示例可参照下表: 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的.例如我们在自己的网站通过ajax去获取豆瓣上https://developers.douban.com/wiki/?title=api_v2提供的接口数据.这里我们以搜索图书为例,参数链接为:https:

.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.WebForm使用母版页进行登录时候的验证 //新建一个页面父类 public abstract class BasePage:Page { protected void Page_Load(object sender, EventArgs e) { //1.身份验证的方法 Session if (Se

JSONP跨域请求数据报错 “Unexpected token :”的解决办法

原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Unexpected token :”,主要问题在于返回的数据格式不正确 本地虚拟两个域名,分别为:www.test.com.www.abc.com http://www.test.com/index.html页面点击按钮,请求返回 www.abc.com域名目录下的文件的数据 ,其代码为: <!DOCT

使用JSONP跨域请求数据

下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记. 使用JSONP跨域请求数据

JS的jsonp是什么?5分钟学会jsonp跨域请求

一.jsonp是什么? jsonp是解决跨域请求的一种技术.浏览器为了防止CSRF攻击会采用同源策略(协议/主机/端口均相同)限制,对非同源发起http请求(即跨域请求)会被浏览器阻止. 二.jsonp跨域请求的原理? script标签的src属性不受同源策略限制,用此方式对非同源服务器请求资源,返回的JS代码会调用指定的函数,携带的参数就是所需的数据,这样就完成了跨域请求. 三.原生JS的jsonp跨域请求: 首先声明一个处理返回数据的函数,返回的JS代码会调用此函数: function do

深入剖析jsonp跨域原理

在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理.搞明白了一些以前不是很懂的地方,比如: 1)为什么jsonp跨域只能是get请求,而不能是post请求: 2)jsonp跨域的原理到底是什么魔法: 3)除了jsonp跨域之外还有那些方法绕过“同源策略”,实现跨域访问: 4)jsonp和ajax,或者说jsonp和XMLHttpRequest是什么关系: 等等. 1.同源策略 说到跨域,首先要明白“同源策略”.同源是指:js脚本只能访问或者请求相同协议,相同domai

深入浅出:了解jsonp跨域的九种方式

什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理.这就形成了“跨域”. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交2.) 资源嵌入: <link>.<script>.<img>.&l