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。