第113天:Ajax跨域请求解决方法

一、原生JS实现ajax

第一步获得XMLHttpRequest对象

第二步:设置状态监听函数

第三步:open一个连接,true是异步请求

第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null

第五步:在监听函数中,判断readyState=4&&status=200表示请求成功

第六步:使用responseTextresponseXML接受响应数据,并使用原生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方法采用jQueryajax方法调用后端的Web服务GetSingleInfo方法,后台的GetSingleInfo方法,使用前端的回调方法OnGetMemberSuccessByjsonp包装后台的业务操作的JSON对象,返回给前端一段javascript片段执行。巧妙的解决了跨域访问问题。

JSONP的缺点:

JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魏琼东

基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET平台开发指南 - 实现插件

插件契约介绍          我们知道,要基于平台(容器)加插件的这种模式进行开发,我们必须定义一组契约,用于约束模块插件开发,也就是说,模块插件需要遵守一定...

1938
来自专栏林德熙的博客

dot net core 使用 IPC 进程通信 原理例子序列化

一般都是使用 WCF 或 remoting 做远程通信,但是 dot net core 不支持 WCF 所以暂时我就只能使用 管道通信。

1012
来自专栏丑胖侠

Zookeeper开源客户端Curator之事件监听详解

Curator对Zookeeper典型场景之事件监听进行封装,提供了使用参考。这篇博文笔者带领大家了解一下Curator的实现方式。 引入依赖 对于Curato...

5147
来自专栏木宛城主

Unity应用架构设计(13)——日志组件的实施

对于应用程序而言,日志是非常重要的功能,通过日志,我们可以跟踪应用程序的数据状态,记录Crash的日志可以帮助我们分析应用程序崩溃的原因,我们甚至可以通过日志...

2005
来自专栏大内老A

如何让ASP.NET默认的资源编程方式支持非.ResX资源存储

之前写了两篇文章《.NET资源并不限于.ResX文件》(上篇、下篇),介绍了如何通过自定义ResourceManager的方式来扩展资源的存储形式。在那篇文章中...

2088
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统-关于WebApi的用法

我们新建的WebApi集成了微软自带的HelpPage,即Api的文档,在我们编写好接口之后会自动生成一份文档

1310
来自专栏进击的君君的前端之路

AJAX

2395
来自专栏Golang语言社区

golang实现微信聊天机器人

▪ 获取UUID ▪ 根据UUID获取二维码 ▪ 显示二维码 ▪ 扫码登陆 ▪ 初始化微信信息 ▪ 打开状态同步通知 ▪ 获取通讯录 ▪ 发送信息 ▪ 同步信息...

5821
来自专栏后端之路

Mybatis实现指定时间db只读方案

背景 由于定时任务集计要求,在每天凌晨指定时间需要做库表备份 如果用户对于某些数据进行操作可能导致一些数据不平 【库存】凌晨00:00:00-00:10:00之...

2616
来自专栏JadePeng的技术博客

axios介绍与使用说明 axios中文文档

本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考。 Axios 是一个基于 Promise 的 ...

2.3K9

扫码关注云+社区

领取腾讯云代金券