文档介绍：AJAX跨域请求-JSONP获取JSON数据博客分类:Javascript/Jquery/Bootstrap/Web AsynchronousJavaScriptandXML(Ajax)是驱动新一代Web站点()的关键技术。Ajax允许在不干扰Web应用程序的显示和行为的情况下在后台进行数据检索。使用XMLHttpRequest函数获取数据,它是一种API,允许客户端JavaScript通过HTTP连接到远程服务器。Ajax也是许多mashup的驱动力,它可将来自多个地方的内容集成为单一Web应用程序。 不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误。但是,如果仅停留在自己的服务器上,Web应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略限制同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的URL的域必须与当前Web页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,。 克服该限制的一个相对简单的方法是让Web页面向它源自的Web服务器请求数据,并且让Web服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用,但它是不可伸缩的。另一种方式是使用框架要素在当前Web页面中创建新区域,并且使用GET请求获取任何第三方资源。不过,获取资源后,框架中的内容会受到同源策略的限制。 克服该限制更理想方法是在Web页面中插入动态脚本元素,该页面源指向其他域中的服务URL并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供Web页面的域上加载的。但如果该脚本尝试从另一个域上加载文档,就不会成功。幸运的是,通过添加JavaScriptObjectNotation(JSON)可以改进该技术。 1、什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON?,(JSONwithPadding)是一个非官方的协议,它允许在服务器端集成Scripttags返回至客户端,通过javascriptcallback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。 2、JSONP有什么用?由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。 3、如何使用JSONP?下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。 HTML代