模拟服务器端的PHP文件：
service：
1 <?php
2 //允许访问
3 header('Access-Control-Allow-Origin:*');
4 @$callback=$_GET['callback'];
5 //创建数据
6 $userInfo = array('id'=>1,'username'=>'Scott Jeremy','email'=>'673457942@qq.com');
7 //编译成JSON
8 $result = json_encode($userInfo);
9 echo $callback."({$result})";
service2：
1 <?php
2 header('Access-Control-Allow-Origin:*');
3 $userInfo = array('id'=>1,'username'=>'Scott Jeremy','email'=>'673457942@qq.com');
4 echo json_encode($userInfo);
原生Javascript：
1 function jsonpCallback(result) {
2 //alert(result);会返回jsonpCallback({"id":1,"username":"Scott Jeremy","email":"673457942@qq.com"})
3 alert('My ：'+result.username+'.'+'My email:'+result.email);
4 }
5 //创建script标签
6 var script = document.createElement('script');
7 //定义script标签的url
8 script.src = 'http://localhost/service.php?callback=jsonpCallback';
9 //把标签放到head中
10 document.getElementsByTagName('head')[0].appendChild(script);
利用jQuery实现跨域请求有三种方法：
1：AJAX请求 1 $('#btn1').on('click',function () {
2 $.ajax({
3 //设置url
4 url:'http://localhost/service2.php',
5 //用什么方式请求
6 type:'GET',
7 //返回来用什么形式解析
8 dataType:'json',
9 success:function (data) {
10 alert(data.username);
11 alert(data.email);
12 },
13 error:function () {
14 alert('error');
15 }
16 });
17 });
2:JSONP实现跨域请求
1 $('#btn2').on('click',function () {
2 $.ajax({
3 url:'http://localhost/service.php',
4 type:'GET',
5 dataType:'JSONP',
6 //JSONP回调函数名
7 jsonp:'callback',
8 //JSONP回调后的JSON名，相当于JSON文章中的book
9 jsonpCallback:'Jeremy',
10 success:function (data) {
11 alert(data.username);
12 alert(data.email);
13 }
14 })
15 });
3：getJSON（最简单的一种：缩写）
1 $('#btn3').on('click',function () {
2 $.getJSON('http://localhost/service.php?callback=?',function (data) {
3 alert(data.username);
4 alert(data.email);
5 })
6 });