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

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:请求失败时调用此方法。

运行结果:

服务器返回的数据类型:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持JavaScript中文网。


上一篇:node.js基于mongodb的搜索分页示例
下一篇:全面总结Javascript对数组对象的各种操作

相关推荐

  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    1 个月前
  • (ajax)query中全局事件ajaxStart ajaxStop

    Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时, 将调用ajaxStart()方法。 同样,ajaxStop()方法则是在所有Ajax请求都完成时调用。

    1 年前
  • 高效遍历匹配Json数据,避免嵌套循环

    工作中经常会遇到这样的需求: 1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状态 2.勾选人员后,前往别的页面,再次返回,人员依旧程勾选状态 3.等等.......

    2 年前
  • 面试题|手写JSON解析器

    这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言)。

    4 个月前
  • 非ajax jQuery POST请求

    amit(https://stackoverflow.com/users/107922/amit)提出了一个问题:nonAJAX jquery POST request,或许与您遇到的问题类似。

    2 年前
  • 隐藏某些价值观输出stringify() JSON。

    Evan CarrollNilesh(https://stackoverflow.com/users/124486/evancarroll)提出了一个问题:Hide certain values in...

    2 年前
  • 随着Nodejs JSON对象响应(转换对象数组JSON字符串)

    Rudolf Olahclimboid(https://stackoverflow.com/users/9903/rudolfolah)提出了一个问题:Responding with a JSON o...

    2 年前
  • 防止重复发送 Ajax 请求

    要考虑并理解 success, complete, error, timeout 这些事件的区别,并注册正确的事件,一旦失误,功能将不再可用; 不可避免地比普通流程要要多注册一个 complete ...

    3 年前
  • 防止浏览器缓存ajax调用结果

    Mark BellSalamander2007(https://stackoverflow.com/users/43140/markbell)提出了一个问题:Prevent browser cachi...

    2 年前
  • 铬sendrequest错误:列表的循环结构转换到JSON

    SomeKittensSkizit(https://stackoverflow.com/users/1216976/somekittens)提出了一个问题:Chrome sendrequest err...

    2 年前

官方社区

扫码加入 JavaScript 社区