通过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格式。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍AJAX跨域请求之JSONP获取JSON数据，包括了AJAX跨域请求之JSONP获取JSON数据的使用技巧和注意事项，需要的朋友参考一下 Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLH
-
本文向大家介绍Ajax的jsonp方式跨域获取数据的简单实例，包括了Ajax的jsonp方式跨域获取数据的简单实例的使用技巧和注意事项，需要的朋友参考一下 jsonp的调用，今天碰到了，正好整理了一下。 以上这篇Ajax的jsonp方式跨域获取数据的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery使用ajax跨域请求获取数据，包括了jQuery使用ajax跨域请求获取数据的使用技巧和注意事项，需要的朋友参考一下 跨域是我在日常面试中经常会问到的问题，这词在前端界出现的频率不低，主要原因还是由于安全限制(同源策略， 即JavaScript或Cookie只能访问同域下的内容)，因为我们在日常的项目开发时会不可避免的需要进行跨域操作，所以跨域能力也算是前端工程师的基本功
-
本文向大家介绍jQuery Ajax实现跨域请求，包括了jQuery Ajax实现跨域请求的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery Ajax跨域请求的具体代码，供大家参考，具体内容如下 html 代码清单： 服务端 validate.php 代码清单： 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
问题内容： 我想从domain2（example2.com）访问位于domain1（example.com）中的JSON文件。例如， 我想从其他网域（例如example2.com）向example.com提出这个Ajax请求。 我已经尝试过JSONP。我不明白它是如何工作的。有人可以解释其工作方式吗？ 问题答案： 您的服务必须返回jsonp，这基本上是javascript代码。您需要从ajax请求
-
本文向大家介绍jsonp跨域获取数据的基础教程，包括了jsonp跨域获取数据的基础教程的使用技巧和注意事项，需要的朋友参考一下 前言 由于浏览器有同源策略，所以要想获取非同源（协议，域名，端口三者有一不同都算非同源）的页面的数据，就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访问非同源的js脚本，所以通过src属性访问服务器会返回函数的js代码，而我们想要的数据就作为函