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

冷不防 2021-09-11 05:48 228阅读 0赞

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>