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

最新推荐文章于 2024-07-30 14:28:28 发布

lhtzbj12

最新推荐文章于 2024-07-30 14:28:28 发布

阅读量4.1k

点赞数 2

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

本文链接：https://blog.csdn.net/lhtzbj12/article/details/53928394

版权

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>