通过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 相关文章推荐
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
树结构之JavaScript
Jan 24 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 Javascript
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
模仿OSO的论坛(四)
2006/10/09 PHP
PHP自定义函数收代码
2010/08/01 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
Vue渲染函数详解
2017/09/15 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python装饰器用法示例小结
2018/02/11 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
党校培训思想汇报
2014/01/03 职场文书
大学生表扬信范文
2014/01/09 职场文书
十佳青年事迹材料
2014/08/21 职场文书
2014年党建工作总结
2014/11/11 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
小学运动会入场词
2015/07/18 职场文书
战友聚会致辞
2015/07/28 职场文书