使用jquery的jsonp发起跨域请求的示例分析

  介绍

这篇文章主要介绍使用jquery的jsonp发起跨域请求的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

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

如果要在js里发起跨域请求,则要进行一些特殊处理了。或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将数据返回前端。

这里讲下使用jquery的jsonp如何发起跨域请求及其原理。

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

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

使用jquery的jsonp发起跨域请求的示例分析

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

使用jquery的jsonp发起跨域请求的示例分析

<强> 1,先看下直接发起ajax请求会怎么样

<强>下面是发起请求端的代码:

& lt; % @  page  pageEncoding=皍tf-8", contentType=皌ext/html; charset=utf-8",语言=癹ava", %比;   & lt; html>   & lt; head>   ,& lt; title>跨域测试& lt;/title>   ,& lt; script  src=https://www.yisu.com/zixun/" js/jquery-1.7.2.js ">   <脚本>   美元(文档)。准备好(函数(){      $ (" # btn”)。点击(函数(){   . ajax({美元   url: http://localhost: 9090/学生,   类型:“得到”,   成功:功能(数据){   $(文本).val(数据);   }   });      });      });>   <输入id=" btn " type="按钮" value="跨域获取数据"/>