Ajax跨域请求解决方法
https://www.cnblogs.com/le220/p/8037990.html
一、原生JS实现ajax
第一步获得XMLHttpRequest对象
第二步:设置状态监听函数
第三步:open一个连接,true是异步请求
第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null
第五步:在监听函数中,判断readyState=4&&status=200表示请求成功
第六步:使用responseText、responseXML接受响应数据,并使用原生JS操作DOM进行显示
1 var ajax = new XMLHttpRequest(); 2 ajax.onreadystatechange = function(){ 3 console.log(ajax.readyState); 4 console.log(ajax.status); 5 if(ajax.readyState==4 && ajax.status==200){ 6 console.log(ajax.responseText); 7 console.log(ajax.responseXML);//返回不是XML,显示null 8 console.log(JSON.parse(ajax.responseText)); 9 console.log(eval("("+ajax.responseText+")")); 10 } 11 } 12 ajax.open("GET","h51701.json",true); 13 ajax.send(null);
二、ajax的跨域请求
[跨域请求处理]由于在JS中存在同源策略。当请求不同协议名,不同端口号,不同主机名下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理!
1、后台PHP进行设置:
前台无需任何设置,在后台被请求的PHP文件中,写入一条header。
header("Access-Control-Allow-Origin:*");//表示允许哪些域名请求这个PHP文件,*表示所有域名都允许
2、使用src属性+JSONP实现跨域
① 拥有src属性的标签自带跨域功能!所以可以使用script标签的src属性请求后台数据
1 <script src="http://127.0.0.1/json.php" type="text/javascript" charset="utf-8"></ script>
② 由于src在加载数据成功后,后直接将加载内容放入到script标签中
所以,后台直接返回JSON字符串将不能在script标签中解析
因此,后台应该返回给前台一个回到函数名,并将JSON字符串作为参数传入
后台PHP文件中返回:
echo "callBack({$str})";
③ 前台接收到返回的回到函数,将直接在script标签中调用。因此需要声明这样一个回调函数,作为请求成功的回调。
function callBack(data){ alert("请求成功"); console.log(data); }
3、JQuery的ajax实现JSONP
① 在ajax请求时,设置dataType为"json"
② 后台返回时,依然需要返回回调函数。但是,ajax在发送请求时会默认使用get请求将回到函数名发给后台,后台可以使用$_GET['callback']取出回调函数名:
echo "{$_GET['callback']}({$str})";
③ 后台返回以后,ajax依然可以用success作为成功的回调函数:
success:function(data){}
当然后台也可以随便返回一个回调函数名。
echo "callBack({$str})";
前台只要请求成功,就会自动调用这个函数。类似于第2条的② ③步
三、jsonp解决Ajax跨域请求问题
1、json和jsonp的区别
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成(网络传输速度快)。
JSONP(JSON with Padding)是JSON的 一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
到这里,应该明白了,JSON是一种轻量级的数据交换格式,像xml一样,是用来描述数据间的。JSONP是一种使用JSON数据的方式,返回的不是JSON对象,是包含JSON对象的javaScript脚本。
那JSONP是如何工作的呢,我们知道,由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。若要跨域请求出于安全性考虑是不行的,但是我们发现,Web页面上调用js文件时则不受是否跨域的影响,而且拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>,这时候,聪明的程序猿就想到了变通的方法,如果要进行跨域请求, 通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据,然后包装成script脚本回传,着不就突破同源策略的限制,解决了跨域访问的问题了么。
下面我们就看下怎么实现:
前端代码:
1 function CallWebServiceByJsonp() { 2 $("#SubEquipmentDetails").html(''); 3 $.ajax({ 4 type: "GET", 5 cache: false, 6 url: "http://servername/webservice/webservice.asmx/GetSingleInfo", 7 data: { strCparent: $("#Equipment_ID").val() }, 8 dataType: "jsonp", 9 //jsonp: "callback", 10 jsonpCallback: "OnGetMemberSuccessByjsonp" 11 }); 12 } 13 14 function OnGetMemberSuccessByjsonp(data) { 15 //处理data 16 alert(data); 17 }
后端的WebService代码:
1 [WebMethod] 2 [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)] 3 public void GetSingleInfo(string strCparent) 4 { 5 string ret = string.Empty; 6 HttpContext.Current.Response.ContentType = "application/json;charset=utf-8"; 7 string jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString(); 8 //string jsonCallBackFunName1 = HttpContext.Current.Request.QueryString["callback"].Trim(); 9 10 //上面代码必须 11 //中间代码执行自己的业务操作,可返回自己的任意信息(多数据类型) 12 13 BLL.equipment eq_bll = new BLL.equipment(); 14 List<Model.equipment> equipmentList = new List<Model.equipment>(); 15 equipmentList = eq_bll.GetModelEquimentList(strCparent); 16 ret = JsonConvert.SerializeObject(equipmentList); 17 18 //下面代码必须 19 HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, ret)); 20 HttpContext.Current.Response.End(); 21 }
如上所示,前端的CallWebServiceByJsonp方法采用jQuery的ajax方法调用后端的Web服务GetSingleInfo方法,后台的GetSingleInfo方法,使用前端的回调方法OnGetMemberSuccessByjsonp包装后台的业务操作的JSON对象,返回给前端一段javascript片段执行。巧妙的解决了跨域访问问题。
JSONP的缺点:
JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。
Ajax跨域请求解决方法(二)
一、什么是跨域
我们先回顾一下域名地址的组成:
http:// www . google : 8080 / script/jquery.js
http:// (协议号)
www (子域名)
google (主域名)
8080 (端口号)
script/jquery.js (请求的地址)
* 当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。
* 不同的域之间相互请求资源,就叫“跨域”。
比如:http://www.abc.com/index.html 请求 http://www.def.com/sever.php
二、处理跨域的方法1 -- 代理
比如在北京(www.beijing.com/sever.php)和上海(www.shanghai.com/sever.php)各有一个服务器,北京的后端(www.beijing.com/sever.php)直接访问上海的服务,然后把获取的响应值返回给前端。也就是北京的服务在后台做了一个代理,前端只需要访问北京的服务器也就相当与访问了上海的服务器。这种代理属于后台的技术,所以不展开叙述。
三、处理跨域的方法2 -- JSONP
假设在http://www.aaa.com/index.php这个页面中向http://www.bbb.com/getinfo.php提交GET请求,那么我们在www.aaa.com页面中添加如下代码:
1 var eleScript= document.createElement("script"); //创建一个script元素 2 3 eleScript.type = "text/javascript"; //声明类型、 4 5 eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url 6 7 document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素
当GET请求从http://www.bbb.com/getinfo.php返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用http://www.aaa.com/index.php页面中的一个callback函数。看下面一个列子:
在www.aaa.com页面中:
1 <script> 2 3 function jsonp( json ){ 4 5 document.write( json.name ); //输出周星驰 6 7 } 8 9 <script> 10 11 <script src="http://www.bbb.com/getinfo.php"></script>
在www.bbb.com页面中:
jsonp({ "name":"周星驰","age":45 });
也就是在www.aaa.com页面中声明,在www.bbb.com页面中调用。但是JSONP只支持 “GET” 请求,但不支持 “POST” 请求。
三、处理跨域的方法2 -- XHR2(推荐方法)
“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法,对跨域访问提供了很好的支持,并且还有一些新的功能。
* IE10一下的版本都不支持
* 只需要在服务器端头部加上下面两句代码:
header( "Access-Control-Allow-Origin:*" );
header( "Access-Control-Allow-Methods:POST,GET" );
关于 “XHR2” 的更多信息大家可以查看官方文档,在这里就不详细叙述了,总之这是这个很好用的方法。
四、注意事项
1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>
标签来调用服务器提供的js脚本。
3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。
4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。
5、jsonp能解决的ajax跨域请求其实相当有限,推荐还是使用CROS,因为Jsonp的请求只能是get,虽然在上面演示中,我设置的type为post,但是实际上发的请求还是get。