通过jsonp获取json数据实现AJAX跨域请求


Posted in Javascript onJanuary 22, 2017

AJAX(异步的 JavaScript 和 XML)是用于创建快速动态网页的一种技术,它在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页,ajax 使用XMLHttpRequest对象在后台与服务器交换数据,XMLHttpRequest 是 AJAX 的基础,它允许客户端 JavaScript 通过 HTTP请求连接到远程服务器。

但是,由于受到浏览器的限制,这种方法不可以进行跨域访问,如果使用这种方法进行跨域访问则会出现安全问题。不过,我们可以发现,在web页面跨域调用 js文件时,不会受到浏览器的限制,所以我们可以利用将远程服务器端的数据装入js格式的文件,然后再用来供客户端进行调用。

JSON(JavaScript 对象表示法)是一种轻量级的文本数据交换格式,它具有自我描述性,易于理解。JSON 可通过 JavaScript 进行解析,JSON 数据可使用 AJAX 进行传输。

JSON实例:

{
 "employees": [
 { "firstName":"Bill" , "lastName":"Gates" },
 { "firstName":"George" , "lastName":"Bush" },
 { "firstName":"Thomas" , "lastName":"Carter" }
 ]
 }

JSON 语法是 JavaScript 对象表示法语法的子集:

数据在名称/值对中, 数据由逗号分隔 ,花括号保存对象, 方括号保存数组

JSON的特性

  • 纯文本,易于跨平台传递
  • Javascript原生支持,后台语言几乎全部支持
  • 使用轻量级的文本数据交换格式,适合在互联网中传递
  • 比 XML 更小、更快,更易解析。

基于JSON的这些特性,可以通过使服务器动态生成JSON文件,然后将客户端需要的数据装入这个文件,再将该文件调回客户端供客户端使用。为了便于客户端使用数据,逐渐形成了一种非正式传输协议JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来装入JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

如何使用JSONP

一种简单的方式就是使用jQuery来实现:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>test</title>
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){ 
   
  $.ajax({
    type: "get",
    async: false,
    url: "http://encounter.christmas023.space/json.php?name=mavis&age=18",
    dataType: "jsonp",
    jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
    jsonpCallback:"message",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
    success: function(json){
     alert('你的名字:' + json.name + ' 年龄: ' + json.age);
     
    },
    error: function(){
     alert('fail');
    }
   });
 
  });
  </script>
</head>
<body>

</body>
</html>
  • type:请求类型,GET 或 POST,默认为 GET;
  • async:true(异步)或 false(同步),默认情况下为true,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行;
  • url:发送请求的地址(跨域请求时应为绝对地址);
  • dataType:指定服务器返回的数据类型;
  • jsonpCallback:自定义JSONP回调函数名称;
  • success:请求成功后回调函数;
  • error:请求失败时调用此方法。

运行结果:

通过jsonp获取json数据实现AJAX跨域请求

服务器返回的数据类型:

通过jsonp获取json数据实现AJAX跨域请求

返回一个指定函数名为message的回调函数,函数里面包裹的数据为JSON格式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
Node.js使用Angular简单示例
May 11 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 #Javascript
node.js基于mongodb的搜索分页示例
Jan 22 #Javascript
利用JS实现文字的聚合动画效果
Jan 22 #Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 #Javascript
jQuery实现的分页功能示例
Jan 22 #Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 #Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 #Javascript
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
PHP中的替代语法介绍
2015/01/09 PHP
JavaScript实现拼音排序的方法
2012/11/20 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
django ajax json的实例代码
2018/05/29 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
美国五金商店:Ace Hardware
2018/03/27 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
应届毕业生求职信范例分享
2013/12/17 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
创业资金计划书
2014/02/06 职场文书
通用自荐信范文
2014/03/14 职场文书
初三新学期计划书
2014/05/03 职场文书
好人好事演讲稿
2014/09/01 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python