jQuery的AJAX跨域请求----笔记2017-09-13

在项目中有时需要跨站点获取相关数据，而普通的ajax请求因为同源策略影响无法直接访问，会产生跨域问题，这时候我们可以考虑使用jQuery的$.ajax(),$.getJSON()来完成跨域访问。

1. $.getJSON(url,[data],[callback])其中data可以卸载url后面也可以单独写在data中

1.1 $.getJSON("api.xxx.com/servers/users?id=1&name=xiaoqiang&jsoncallback=?",function(data){

console.log(data)//data就是从服务器接口返回的json数据

})

1.2 $.getJSON("api.xxx.com/servers/users?jsoncallback=?",{"id":"1","name":"xiaoqiang"}function(data){

console.log(data)//data就是从服务器接口返回的json数据

})

2.$.ajax({.....})

2.1  $.ajax({

type:"post",

url:"api.xxx.com/server/users",

data:{"id":1,"name":"xiaoqiang"},

async:true,//可以不写，默认就是true，就是异步请求的意思

dataType:"jsonp",

jsonp:callback,//默认就是callback,回调函数的参数名

jsonpCallback:"myCallback",//默认是jQuery自动生成的随机函数名

success:function(data){

console.log(data)//这里就是从数据库获取的json数据了

}

})

我本来以为就这样就能够顺利的跨域请求获得服务器提供的接口的json数据了，其实不是的，服务器端的输出数据的格式必须符合jsonp格式，很多后端可能只是做的json格式的数据，不支持jsonp，这时候，你在控制台打印data,会提示“Uncaught SyntaxError: Unexpected token :”，

但是你点开这个报错，可以看到服务器返回的数据，但是就是无法console.log()出来，会一直报这个错误。所以可以让后端协助修改一下：

String jsonStr = "{\"name\":\"小强\",\"age\":28}";

//最终返回的数据为：myCallback({"name":"小强","age":28})

String renderStr = callbackName+"("+jsonStr+")";

response.setContentType("text/plain;charset=UTF-8");

response.getWriter().write(renderStr);

服务端必须按照以上格式输出支持jsonp的数据，以上后端数据摘自:

    http://www.duwaiweb.com/blog/20120918_e51195f8-2261-48cf-a883-3013a576fa51.html

如果后端不肯改，那就只能用普通的请求方式+php curl来进行跨域请求了:

1.js代码如下，正常的请求，不带跨域功能

$('#btn').click(function(){

let id=1;

let name="xiaoqiang";

$.ajax({

type:"post",

url:"data/user.php",

data:{"id":id,"name":name},

async:true,//可以不写，默认就是true，就是异步请求的意思

success:function(data){

let obj=JSON.parse(data);//json字符串转为json对象，这样好处理数据

console.log(obj)//这里获取的是请求操作成功还是失败的数据信息,比如status是否200

}，

error:function(err){

console.log(err)//当请求出错是返回的数据

}

})

})

2.php代码，采用curl请求方式，代理请求，解决跨域问题

<?php
    // 初始化一个 cURL 对象
    $ch = curl_init();
    // 设置cURL 参数
    $id=$_REQUEST['id'];
    $name=$_REQUEST['name'];
    $str="?id=".$id."&name=".$name;
    // 设置你需要抓取的URL
    curl_setopt($ch, CURLOPT_URL,'http://，xxx.com/servers/users'.$str);
    // 设置header 响应头是否输出
    curl_setopt($ch, CURLOPT_HEADER,0);
    // 1如果成功只将结果返回，0不自动输出任何内容。如果失败返回FALSE
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    // 运行cURL，请求网页
    $data = curl_exec($ch);
    // 关闭URL请求
    curl_close($ch);
    // 显示获得的数据
    print_r($data);
?>

新手笔记，可能有些地方不对，多谢指正！