跨越请求

1.1什么是跨域（两个不同系统之间的访问、调用）

（1）域名不同，即两个不同的应用。

（2）域名相同，但是端口不同，即同一个应用中的不同子系统。

1.2 Ajax跨域请求的缺陷

（1）创建testJsonp.jsp页面

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <script type="text/javascript" src="/js/jquery-1.6.4.js"></script>
  8. <title>Insert title here</title>
  9. </head>
  10. <body>
  11. <textarea id="text" style="width: 1200px; height: 200px;"></textarea>
  12. <input type="button" value="测试异步跨越" onclick="testajax()" />
  13.  
  14. <script type="text/javascript">
  15.     function testajax(){
  16.         $.ajax({
  17.             url:"http://localhost:8081/category.json",
  18.             type: "GET",
  19.             success: function (data) {
  20.                 $("#text").val(JSON.stringify(data));
  21.             }
  22.         });
  23.     }
  24. </script>
  25.  
  26. </body>
  27. </html>

1.3测试Ajax跨越

测试发现，Ajax跨越请求失败了。

解决方案：jsonp跨域

在前面的测试中，我们发现Ajax跨越请求时，json数据被浏览器禁用了。

原因：浏览器禁止远程加载Json数据。（浏览器安全机制）

如何解决呢？

答：使用Jsonp方式。

2.1Jsonp原理

2.1.1Jsonp 实现的前提：

　　浏览器允许跨越加载同源数据。

　　即在JavaScript脚本中发送请求，就可以远程加载js格式数据。

2.1.2请求原理：

　　（1）异步请求的时候，加上一个名为callback的回调函数

　　（2）在接口中，将返回的json格式数据，伪装成js脚本格式。

　　（3）得到js格式数据后，提取里面的json数据。

2.2 修改testJsonp.jsp，指定异步请求为jsonp方式。

  1. <script type="text/javascript">
  2.     function testajax(){
  3.         $.ajax({
  4.             url:"http://localhost:8081/category.json",
  5.             type: "GET",
  6.             dataType: "jsonp",   //jsonp请求
  7.             jsonp:"callbackFunction",  //请求参数名
  8.             jsonpCallback:"showData",  //回调函数名称
  9.             success: function (data) {
  10.                 $("#text").val(JSON.stringify(data));
  11.             }
  12.         });
  13.     }
  14. </script>

2.3修改category.json文件，将返回数据包装成js脚本。

2.4 再次发送ajax异步请求，使用jsonp方式

结论：

　 （1）jsonp是ajax技术中的一种异步请求方式。

（2）jsonp能实现跨越请求。

（3）jsonp跨越时，需要指定一个回调函数，并使用该函数将返回的数据伪装成js脚本。

（4）获取返回的js脚本后，jsonp自动提取其中的json数据。

Ajax跨越请求失败,解决的更多相关文章

  1. 解决ant Design dva ajax跨越请求 （status=0）

    今天实现了antd作为前端展现,python flask作为后端的数据填充,完全两个独立的服务:过程中遇到ajax跨越请求问题,导致status一直等于0,原来是这么写的: xmlhttp.open( ...

  2. 解决js ajax跨越请求 Access control allow origin 异常

    // 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");

  3. Win10 设备管理器一个USB设备描述符请求失败解决方法

    问题:进入设备管理器,发现[通用串行总线控制器]下有一项带有黄色[!]未知USB设备(设备描述符请求失败). 或者 解决方法如下: 1.点击Windows键 +R或者(点击系统桌面左下角[开始],在开 ...

  4. jmeter 模拟ajax/ https请求 失败的解决方法

    1.去掉请求头的Content-Type字段.Host字段 即可

  5. 毕设记录（ajax第一次请求失败，之后成功的问题）

    解决方法:将button标签的type属性改为button,而不是submit,将会解决此问题,至于原因,,,还是没太搞清楚..

  6. Android Http请求失败解决方法

    1.MainActivity.java 文件中的onCreate方法改成如下: @SuppressLint("NewApi") @Override protected void o ...

  7. .NET中Ajax跨越访问

    说明:我们知道Ajax是不能进行跨域请求的,我们是可以设置我们的项目让Ajax支持跨域访问. 跨域: aa.xxx.com 中用ajax请求  bb.ccc.com中的数据成为跨域. 找了一些文章看了 ...

  8. Django中ajax发送post请求，报403错误CSRF验证失败解决办法

    今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显 ...

  9. 解决.NET Core Ajax请求后台传送参数过大请求失败问题

    解决.NET Core Ajax请求后台传送参数过大请求失败问题 今天在项目上遇到一个坑, 在.Net Core中通过ajax向mvc的controller传递对象时,控制器(controller)的 ...

随机推荐

  1. CMU Advanced DB System - Query Optimizer

    Overview Optimizer模块所处在的位置如图, 那么做optimize的目的是, 找出所有‘correct’执行计划中‘cost’最低的 那么这里首先要明确的概念,‘correct’,关系 ...

  2. Tosca : 扩展dll动态语言 识别点击下拉， 识别成table

    放到这 配置 重启 tosca  command

  3. deepin常用软件列表

    deepin常用软件列表 软件列表 Safe Eyes 视力保护程序 网址

  4. npm使用国内源

    npm使用国内源 转   https://www.jianshu.com/p/7e84d7b119bc $ npm install -g cnpm --registry=https://registr ...

  5. python哲学

    import this The Zen of Python, by Tim Peters # python的设计哲学, 作者:Tim Peters Beautiful is better than u ...

  6. 背诵四种清净明诲断淫（愿众生断淫得究竟解脱) (转自学佛网：http://www.xuefo.net/nr/article50/495158.html)

    一.为什么要戒邪淫.断淫欲 <寿康宝鉴>:盖淫念一生,诸念皆起.邪缘未凑生妄心;勾引无计,生机械心;少有阻碍,生嗔恨心;欲情颠倒,生贪着心;羡人有之,生嫉妒心;夺人之爱,生杀害心.廉耻丧尽 ...

  7. ABAP DEMO ALV-监听数据修改

    *&---------------------------------------------------------------------* *& Report YDEMO_006 ...

  8. [ kvm ] 学习笔记 4：KVM 高级功能详解

    1. 半虚拟化驱动 1.1 virtio 概述 KVM 是必须使用硬件虚拟化辅助技术(如 Intel VT-x .AMD-V)的 Hypervisor,在CPU 运行效率方面有硬件支持,其效率是比较高 ...

  9. Django：使用模态框新增数据，成功后提示“提交成功”，并刷新表格bootstrap-table数据

    废话不说先看图:  代码实现: 前台代码: {% load staticfiles %} <!DOCTYPE html> <html lang="en"> ...

  10. RabbitMQ官方教程一Hello World(GOLANG语言实现)

    介绍 RabbitMQ是消息中间件:它接受并转发消息. 您可以将其视为邮局系统:将要发送的邮件放在邮箱中时, 可以确保邮递员最终将邮件传递给收件人. 以此类推,RabbitMQ是一个邮箱,一个邮局和一 ...