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

前端之家收集整理的这篇文章主要介绍了有关AJAX跨域的解决办法-JSONP前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先来说,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
  1. varjsonObj={
  2. "objName":"JSONNAME",
  3. "objType":[{"default":"object"},{"setType":"JSON"}]
  4. }

其中大括号内,包含大括号这一段就是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>
  1. <html>
  2. scripttype="text/javascript" varalertJsonName=function(jsonObj){
  3. alert(obj.jsonName);
  4. };
  5. </scriptscripttype="text/javascript"src="http://jsonptest.com/jsonptest.js">body>

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

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

html文件内容如下:

    head //回调函数
  1. //提供jsonp服务的URL地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码
  2. //返回格式:可以通过id查询想要的数据,然后callback是生成js中的方法
  3. //类似alertJsonName({"jsonName","jsonName"})
  4. varurl="http://jsonptest.com/jsonp/*******.aspx?id=jsonptest&callback=alertJsonName";
  5. //创建script标签
  6. varscript=document.createElement('script');
  7. //将请求的url绑到生成的script上
  8. script.setAttribute('src',url);
  9. //把script标签加入head,此时调用开始
  10. document.getElementsByTagName('head')[0].appendChild(script);
  11. 执行后,发现回调方法成功响应,这就是JSONP的无框架实现。

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

    原文链接:https://www.f2er.com/ajax/164770.html

    猜你在找的Ajax相关文章