关于AJax与Jsonp跨域访问的问题

本文给大家汇总介绍了javascript的ajax，jquery的ajax以及利用jsonp实现跨域访问的问题，非常的细致全面，有需要的小伙伴可以参考下。

####JavaScript的AJax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）
设计AJax使用的一种重要技术是XMLHttpRequest对象。

创建XMLHttpRequest对象的方式：

xmlhttp = new ActiveObject(“Microsoft.XMLHTTP”); // IE浏览器支持的创建方式
xmlhttp = new XMLHTTPRequest(); // FireFox,Opera等浏览器支持的创建方式
XMLHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。可用于模拟http的GET和POST请求。
可以判断window.XMLHttpRequest对象是否可用然后创建XMLHttpRequest对象。
以下是XMLHttpRequest对象的属性和使用方法，粘贴过来的，注释的很详细。

登录后复制  

简单一点来说，就是利用XMLHttpRequest对象向服务器发出了请求，然后获取服务器返回信息这样一个过程，
以上是JavaScript的Ajax技术原理。和后面要说的Jsonp实现跨域 访问的原理完全不一样。

###JQuery的AJax

JQuery对ajax这种技术进行了封装，使用起来更为方便。

$.ajax的一般形式

$.ajax({  type: 'POST',  url: url ,  data: data ,  dataType: dataType  success: success ,  });

登录后复制

在场景不一样的时候，我们需要变换使用Ajax。 1.拼装json数据。 2.序列化表格内容。var formParam = $(“#form1”).serialize(); 3.拼接URL 。。。 比如我们的数据中有特殊字符串（比如&）的时候拼接字符串不好用，可能会使提交内容不完整。这时候采用Json的形式会比较好用。

###利用jsonp实现跨域访问

什么是Jsonp？
和json有什么关系？
jsonp是怎么实现跨域访问的？

首先解释一下，为什么Ajax不能跨域访问，浏览器为什么限制跨域访问。

假设浏览器支持跨域访问，我们可以在A站通过XmlHttpRequest访问B站，这时候已经通过了B站的验证，得到了B站的Cookie，然后我们就可以随意访问B站了，这时候A站冒用B站的身份可以操作B站一切不需要进一步验证的操作，这是相当危险的。

我们如何获取跨域的数据呢？

我们发现Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如script、img、iframe等等。我们可以利用js的这一性质来获取我们想要的数据。

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

下面我们来看一下jsonp到底做了什么事情。

1、我们知道，哪怕跨域js文件中的代码（当然指符合web脚本安全策略的），web页面也是可以无条件执行的。 远程服务器remoteserver.com根目录下有个remote.js文件代码如下：

alert(‘我是远程文件’);
本地服务器localserver.com下有个jsonp.html页面代码如下：

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    

登录后复制

毫无疑问，页面将会弹出一个提示窗体，显示跨域调用成功。 这就是最基本的jsonp的思想。

2、现在我们在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用。 　　jsonp.html页面代码如下：

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">      var localHandler = function(data){    alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);  };    

登录后复制

remote.js文件代码如下：

localHandler({“result”:”我是远程js带来的数据”});
运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，并且还接收到了远程js带来的数据。 跨域访问数据的目的已经实现了，可是我怎么让远程js知道它应该调用的本地函数叫什么名字呢？

3.可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码，请你返回给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应了。

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">      // 得到航班信息查询结果后的回调函数  var flightHandler = function(data){    alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');  };  // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）  var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";  // 创建script标签，设置其属性  var script = document.createElement('script');  script.setAttribute('src', url);  // 把script标签加入head，此时调用开始  document.getElementsByTagName('head')[0].appendChild(script);  

登录后复制

在服务器端，我们获取callback，并且拼装好需要的js。

String callback = request.getParemeter(“callback”);
response.getWriter.print(callback + “(” + json +”)”);
这样返回给页面的内容是：

flightHandler({  "code": "CA1998",  "price": 1780,  "tickets": 5});

登录后复制

4.Jquery也对jsonp实现了封装。（形式比较像ajax）

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">              jQuery(document).ready(function(){    $.ajax({       type: "get",       async: false,       url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",       dataType: "jsonp",       jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)       jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据       success: function(json){         alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');       },       error: function(){         alert('fail');       }     });   });         

登录后复制

最后申明，Ajax和jsonp是两个完全不一样的东西。 ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为’jsonp’：

$.ajax({    dataType: 'jsonp',    jsonp:'callback',    url: 'http://www.a.com/user?id=123',       success: function(data){           //处理data数据       }   });

登录后复制

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){       //处理data数据   });

登录后复制

也可以简单地使用getScript方法：

//此时也可以在函数外定义foo方法   function foo(data){       //处理data数据   }   $.getJSON('http://www.a.com/user?id=123&callback=foo');

登录后复制

JSONP的应用

JSONP在开放API中可以起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

三种AngularJS中获取数据源的方式

Angular HMR(热模块替换)功能的实现方法

以上就是关于AJax与Jsonp跨域访问的问题的详细内容，更多请关注【创想鸟】其它相关文章！