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

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

CharlesJoker

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

阅读量919

点赞数

分类专栏：个人随笔文章标签： jsonp js 传值方法 ajax

本文链接：https://blog.csdn.net/q535999731/article/details/32101787

版权

个人随笔专栏收录该内容

9 篇文章 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：

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文件内容如下：

alertJsonName({"jsonName" : "testJson"})

html文件内容如下：

<!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文件内容如下：

<!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部份。