您的位置：首页 > Web前端 > JavaScript

用最简单的例子演示如何使用js或者$.ajax进行跨域请求

2016-12-29 15:19 881 查看

js跨域请求的原理：先在script里声明一个callbackHandler函数，往header里添加一个script标签，script的src属性值为远端的请求地址，并传入刚才声明的函数名称（如：callbackHandler），远端服务器收到请求后，返回结果拼装的格式为 callbackHandler({“name”:”zhangsan”}),实际上就是一段javascript代码，调用刚才注册的函数。

下面是一个很简单的例子

//远端的服务器里的代码
public class HomeController : Controller
{
/// <summary>
/// 处理请求的action，不管是asp、php、asp.net、jsp....实现类似的功能就行
/// 本例中访问的完成路径将是  http://xxx.xxx.xxx.xxx:port/home/getdata /// </summary>
/// <param name="callback">客户端传来的js里的function名称</param>
/// <returns></returns>
public string GetData(string callback)
{
return callback + "({\"name\": \"sd\"})";
}
//这个action只作为显示页面用，在跨域请求中没有用
public ActionResult Index()
{
return View();
}
}

下面的发出跨域请求页面的完整代码，里面有详细的注释

//可以直接是一个静态的html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<a href="javascript:;" class="js">纯js调用</a>
<a href="javascript:;" class="ajax">ajax调用</a>
<script>
//用于纯js跨域请求的回调函数
var callbackHandler = function (json) {
alert('采用纯js跨域请求，返回的结果' + json.name);
};
$(function () {
//纯js跨域请求的处理代码
$(".js").on('click', function () {
// 远端服务器的url地址（不管是什么类型的地址，比如：asp、php、asp.net、jsp等，最终生成的返回值都是一段javascript代码）
var url = "http://localhost:15493/home/getdata?callback=callbackHandler"; //这里的localhost:15493根据实际情况进行修改
// 创建script标签，设置src属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head
document.getElementsByTagName('head')[0].appendChild(script);
//本例中 服务器返回的结果为 callbackHandler({"name": "sd"});实际上就是调用本js里的callbackHandler函数
//本方法每执行一次，head就会新添加一次 script,使用$.ajax的方法则不会
});
//使用jquery的jsonp进行跨域请求的代码
$(".ajax").on('click', function () {
$.ajax({
type: "get",
async: false,
url: "http://localhost:15493/home/getdata",//这里的localhost:15493根据实际情况进行修改
data: {},
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名
//jsonpCallback: "getName",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function (json) {
alert('采用纯jQuery的jsonp进行跨域请求，返回的结果' + json.name);
},
error: function () {
alert('fail');
}
});
});

});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript jquery ajax 跨域跨域请求

相关文章推荐

新的分享

章节导航