java 生成js jsonp_js跨域交互之jsonp - 看完就能让你了解jsonp原理 (原)

跨域?

跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。

同源策略?

一般来说 a.com 的网页无法直接与 b.com的服务器沟通， 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。

如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，通过后台代码发起请求，再将数据返回前端。(我几乎没有用到过jsonp,都是把跨域请求交给至高无上的服务端)

解决问题的jsonp小概念出现了

浏览器端有可以直接跨域拿数据的,比如HTML 的

现在使用jsonp基本都是用ajax方式,来路是jquery将jsonp封装为ajax的一种形式,但它们的本质区别并不是跨域,ajax的核心通过XMLhttpRequest获取非本页内容,jsonp则是动态添加

本文重点来了,小本本拿出来,考试要考哟~~~~~~

使用jquery的jsonp如何发起跨域请求及其原理

先看下准备环境：两个端口不一样，构成跨域请求的条件。

获取数据：获取数据的端口为9090

请求数据：请求数据的端口为8080

1、先看下直接发起ajax请求会怎么样

下面是发起请求端的代码：

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

2

3

4

跨域测试

5

6

7 $(document).ready(function() {

8

9 $("#btn").click(function() {

10 $.ajax({

11 url: 'http://localhost:9090/student',

12 type: 'GET',

13 success: function(data) {

14 $(text).val(data);

15 }

16 });

17

18 });

19

20 });

21

22

23

24

25

26

27