跨越请求

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

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

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

1.2 Ajax跨域请求的缺陷

（1）创建testJsonp.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="/js/jquery-1.6.4.js"></script>

<title>Insert title here</title>

</head>

<body>

<textarea id="text" style="width: 1200px; height: 200px;"></textarea>

<input type="button" value="测试异步跨越" onclick="testajax()" />

<script type="text/javascript">

    function testajax(){

        $.ajax({

            url:"http://localhost:8081/category.json",

            type: "GET",

            success: function (data) {

                $("#text").val(JSON.stringify(data));

            }

        });

    }

</script>

</body>

</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方式。

<script type="text/javascript">

    function testajax(){

        $.ajax({

            url:"http://localhost:8081/category.json",

            type: "GET",

            dataType: "jsonp",   //jsonp请求

            jsonp:"callbackFunction",  //请求参数名

            jsonpCallback:"showData",  //回调函数名称

            success: function (data) {

                $("#text").val(JSON.stringify(data));

            }

        });

    }

</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. Mac和window生成ssh和查看ssh key

    一.MAC系统 mac 系统开始就已经为我们安装了ssh 如果没有安装,首先安装 打开终端:$ ssh -v 查看ssh版本 OpenSSH_6.2p2, OSSLShim 0.9.8r 8 Dec ...

  2. 在使用PhpSpreadsheet出现空行导入的问题

      在使用PhpSpreadsheet出现空行导入的问题,项目一直报错,原来是读取excel后会多读取几行,或者说读取的行数有错误.因此必须加一个,去除空行.暂时没有研究源码可能源码里面有这样的功能. ...

  3. phpstorm 使用xdebug断点

    1.下载对应版本 xdebug 下载地址:https://download.csdn.net/download/q2104574/11185239 比如你用的php7.0.12以上的版本,xdebug ...

  4. [转]JVM调优总结 -Xms -Xmx -Xmn -Xss

    Xms 是指设定程序启动时占用内存大小.一般来讲,大点,程序会启动的快一点,但是也可能会导致机器暂时间变慢. Xmx 是指设定程序运行期间最大可占用的内存大小.如果程序运行需要占用更多的内存,超出了这 ...

  5. opencv图片旋转90度

    #include<iostream> #include <opencv2/opencv.hpp> using namespace std; using namespace cv ...

  6. Spring cloud微服务安全实战-6-4权限控制改造

    授权,权限的控制 令牌里的scope包含fly就有权限访问.根据Oauth的scope来做权限控制, 要让@PreAuthorize生效,就要在启动类里面写一个注解. 里面有一个属性叫做,就是在方法的 ...

  7. Qt编写气体安全管理系统18-数据库设置

    一.前言 作为一个管理系统,数据库肯定是不可或缺的,Qt内置的sqlite数据库已经是够用的,而且本人亲测数据量能支持亿级别,而不是像网上很多人说的千万级别,我模拟过一亿多条数据,依然能够很好的查询, ...

  8. Hive Essential (4):DML-project,filter,join,union

    1. Project data with SELECT The most common use case for Hive is to query data in Hadoop. To achieve ...

  9. AD 常用策略

    配置WSUS 配置NTPS 配置用户配置文件漫游 配置漫游区磁盘配额 配置修改本地管理员用户名 配置修改本地管理员密码 配置网络验证(提示是否联网错误) 配置允许开设永久共享 配置允许开设共享打印机 ...

  10. Dockerfile-server1

    [root@lab2 docker-file]# cd server1/ [root@lab2 server1]# ls a.sh ddbes-server1-0.0.1-SNAPSHOT.jar D ...