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

发布时间：2020-12-16 00:30:50 所属栏目：百科来源：网络整理

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

首先来说，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 plain 
   copy 
    
    
    
   
 varjsonObj={
 "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文件内容如下：

[html] 
   

<!DOCTYPEHTML>

<html>
scripttype="text/javascript" varalertJsonName=function(jsonObj){
alert(obj.jsonName);
};
</scriptscripttype="text/javascript"src="http://jsonptest.com/jsonptest.js">body>

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

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

html文件内容如下：

//回调函数

//提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）

//返回格式：可以通过id查询想要的数据，然后callback是生成js中的方法

//类似alertJsonName({"jsonName","jsonName"})

varurl="http://jsonptest.com/jsonp/*******.aspx?id=jsonptest&callback=alertJsonName";

//创建script标签

varscript=document.createElement('script');

//将请求的url绑到生成的script上

script.setAttribute('src',url);

//把script标签加入head，此时调用开始

document.getElementsByTagName('head')[0].appendChild(script);

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!