ajax跨域问题解决方案(2)_H5之家 - 中国HTML5教程资源分享第一站

具体如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax 测试</title> </head> <body> <input type="button" value="Test" onclick="crossDomainRequest()"> <div id="content"></div> <script> var xhr = new XMLHttpRequest(); var url = ''; // var url = '?key=free&appid=0&msg=%E5%93%92%E5%93%92'; function crossDomainRequest() { document.getElementById('content').innerHTML = "<font color='red'>loading...</font>"; // 延迟执行 setTimeout(function () { if (xhr) { xhr.open('GEt', url, true); xhr.onreadystatechange = handle_response; xhr.send(null); } else { document.getElementById('content').innerText = "不能创建XMLHttpRequest对象"; } }, 3000); } function handle_response() { var container = document.getElementById('content'); if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 304) { container.innerHTML = xhr.responseText; } else { container.innerText = '不能跨域请求'; } } } </script> </body> </html>

然后对应的 test1.php 应该帮助我们实现数据请求这个过程，把 “小红的联系方式” 要到手，并返回给 “小明” 。

<?php $url = '?key=free&appid=0&msg=hello%20world.'; $result = file_get_contents($url); echo $result; ?>

下面看下代码执行的结果。

jsonp方式

JSONP（JSON with Padding）灵感其实源于在HTML页面中script标签内容的加载，对于script的src属性对应的内容，浏览器总是会对其进行加载。于是：

克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。

实现的思路就是：

在服务器端组装出客户端预置好的json数据，通过回调的方式传回给客户端。

原生实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax 测试</title> <script src="" type="text/javascript"></script> </head> <body> <input type="text" name="talk" id="talk"> <input type="button" value="Test" id="btn"> <div id="content"></div> <script type="text/javascript"> function jsonpcallback(result) { for(var i in result) { alert(i+":"+result[i]); } } var JSONP = document.createElement("script"); JSONP.type='text/javascript'; JSONP.src='?callback=jsonpcallback'; document.getElementsByTagName('head')[0].appendChild(JSONP); </script> </body> </html>

服务器端 test1.php 内容如下：

<?php $arr = [1,2,3,4,5,6]; $result = json_encode($arr); echo "jsonpcallback(".$result.")"; ?>

需要注意的是最后组装的返回值内容。

来看下最终的代码执行效果。

JQuery方式实现

采用原生的JavaScript需要处理的事情还是蛮多的，下面为了简化操作，决定采用JQuery来代替一下。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax 测试</title> <script src="" type="text/javascript"></script> </head> <body> <input type="text" name="talk" id="talk"> <input type="button" value="Test" id="btn"> <div id="content"></div> <script type="text/javascript"> function later_action(msg) { var element = $("<div><font color='green'>"+msg+"</font><br /></div>"); $("#content").append(element); } $("#btn").click(function(){ // alert($("#talk").val()); $.ajax({ url: '', method: 'post', dataType: 'jsonp', data: {"talk": $("#talk").val()}, jsonp: 'callback', success: function(callback){ console.log(callback.content); later_action(callback.content); }, error: function(err){ console.log(JSON.stringify(err)); }, }); }); </script> </body> </html>

相应的， test1.php 为了配合客户端聊天的需求，也稍微做了点改变。

<?php $requestparam = isset($_GET['callback'])?$_GET['callback']:'callback'; // 青云志聊天机器人接口： ?key=free&appid=0&msg=hello // 接收来自客户端的请求内容 $talk = $_REQUEST['talk']; $result = file_get_contents("?key=free&appid=0&msg=$talk"); // 拼接一些字符串 echo $requestparam . "($result)"; ?>

最后来查看一下跨域的效果吧。

总结

至此，关于简单的ajax跨域问题，就算是解决的差不多了。对我个人而言，对于这三种方式有一点点自己的看法。

服务器设置 Access-Control-Allow-Origin 的方式适合信用度高的小型应用或者个人应用。

代理模式则比较适合大型应用的处理。但是需要一个统一的规范，这样管理和维护起来都会比较方便。

JSONP方式感觉还是比较鸡肋的（有可能是我经验还不足，没认识到这个方式的优点吧(⊙﹏⊙)b）。自己玩玩知道有这么个东西好了。维护起来实在是优点麻烦。

参考链接：

Ajax跨域请求：

服务器端跨域设置：

分享给小伙伴们：

本文标签：跨域，ajax/">跨域，ajax

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。