0

0

AJax与Jsonp跨域访问问题小结

高洛峰

高洛峰

发布时间:2017-01-09 10:59:21

|

1351人浏览过

|

来源于php中文网

原创

####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对象的说明DEMO 
 
 
 
  

简单一点来说,就是利用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页面代码如下:




  
  



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

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

剪映
剪映

一款全能易用的桌面端剪辑软件

下载



  
  
  



remote.js文件代码如下:

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

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




  
  



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

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

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

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


 
 
   Untitled Page
   
   
   
 
 
 

最后申明,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方式调用的)。

更多AJax与Jsonp跨域访问问题小结相关文章请关注PHP中文网!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
AJAX跨域解决方案:JSONP视频教程
AJAX跨域解决方案:JSONP视频教程

共5课时 | 1.4万人学习

传智播客JQuery编程视频教程
传智播客JQuery编程视频教程

共36课时 | 6.9万人学习

韩顺平Jquery视频教程
韩顺平Jquery视频教程

共15课时 | 3.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号