有关AJAX跨域的解决办法-JSONP

最新推荐文章于 2024-04-27 14:33:42 发布

北京龙爷

最新推荐文章于 2024-04-27 14:33:42 发布

阅读量401

点赞数

分类专栏： ajax javascript

ajax 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

首先来说，AJAX垮与需要考虑2个问题：

1.Ajax交换数据的格式

2.Ajax跨域的需求如何解决

目前较为流行的处理方式就是：将要交换的数据设置成JSON（javascript原生支持）格式，然后使用JSONP跨域。

但是请明白一点AJAX和JSONP完全是两种东西，ajax使用的是xmlhttprequest，而JSONP利用的<script>标签。

JSON就不详细说了，可以理解为一段javascript片段，

**********************以下来自百度解释JSON**************************************

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构

1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为对象.key 获取属性值，这个属性值的类型可以是数字、字符串、数组、对象几种。

2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 [”java“,"javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。

***************************百度解释完毕********************************************

like this：

[javascript]view plaincopy 
   
 var jsonObj = {  
     "objName" : "JSONNAME",  
     "objType"  : [{"default" : "object"},{"setType" : "JSON"}]  
 }  

其中大括号内，包含大括号这一段就是JSON，当前这个JSON我将它赋值给jsonObj，在冒号前面的值就可以理解为jsonObj的属性，

假设我要获取objName对应的值，跟JS写法一样，”对象.属性“获取值，类似这么写jsonObj.objName，对应的值就是JSONNAME，这个在下文中会有使用。

接下来进入正题，JSONP

对于AJAX来说，无法请求直接请求普通文件，但是，在web项目中，对于JS脚本、img等一些文件，我们可以通过src标签引用到页面上，同时，

JSON既是一种数据格式，有可以理解为一段js片段，那我们是不是可以综合起来，通过前台向后台发请求，然后后台给返回一段json格式的代码呢

没错，这就是JSONP。

设定模拟环境

1.假设环境为远程服务器名为jsonptest.com

2.静态html为jsonptest.html

3.远程服务器根目录下有jsonptest.js文件

A.我们模拟一个html引用JS，然后在JS中调用页面的方法的过程：

js文件内容如下：

[javascript]view plaincopy 
   
 alertJsonName({"jsonName" : "testJson"})  

html文件内容如下：

[html]view plaincopy 
   
 <!DOCTYPE HTML>  
 <html>  
 <script type="text/javascript">  
 var alertJsonName = function(jsonObj){  
     alert(obj.jsonName);  
 };  
 </script>  
 <script type="text/javascript" src="http://jsonptest.com/jsonptest.js"></script>  
 <body>  
 </body>  
 </html>  

然后运行，发现回调函数alertJsonName成功响应。

B.将请求回来的JS内容动态生成（JSONP无框架实现）

html文件内容如下：

[html]view plaincopy 
   
 <!DOCTYPE HTML>  
 <html>  
 <head>  
 <script type="text/javascript">  
     //回调函数  
     var alertJsonName = function(jsonObj){  
         alert(obj.jsonName);  
     };  
     // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）  
     //返回格式：可以通过id查询想要的数据，然后callback是生成js中的方法  
     //类似alertJsonName({"jsonName","jsonName"})  
     var url = "http://jsonptest.com/jsonp/*******.aspx?id=jsonptest&callback=alertJsonName";  
     // 创建script标签  
     var script = document.createElement('script');  
     //将请求的url绑到生成的script上  
     script.setAttribute('src', url);  
     // 把script标签加入head，此时调用开始  
     document.getElementsByTagName('head')[0].appendChild(script);  
 </script>  
 </head>  
 <body>  
 </body>  
 </html>  

执行后，发现回调方法成功响应，这就是JSONP的无框架实现。

PS：有点累了，暂时写这么多吧，现在jQuery中JSONP的框架，之后会对本文章进行补充，解读jQuery中的JSONP部份。

北京龙爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关AJAX跨域的解决办法-JSONP

首先来说，AJAX垮与需要考虑2个问题：1.Ajax交换数据的格式2.Ajax跨域的需求如何解决目前较为流行的处理方式就是：将要交换的数据设置成JSON（javascript原生支持）格式，然后使用JSONP跨域。但是请明白一点AJAX和JSONP完全是两种东西，ajax使用的是xmlhttprequest，而JSONP利用的标签。JSON就不详细说
复制链接

扫一扫

专栏目录