ajax jsonp跨域【转】

跨域的基本原理：
JSONP跨域GET请求是一个常用的解决方案，
JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。

需要ajax跨域请求，用cors跨域方案。
服务端设置：

header('Access-Control-Allow-Origin: http://front.ls-la.me');

header('Access-Control-Allow-Headers: X-Requested-With');

设置了：

后端需要的头信息，原生ajax以表单方式post提交数据，json数据data转换成key1=val1&key2=val2 的字符串格式

 1 var ajaxHdFn = function(uri, data, cb) {

 2   var getXmlHttpRequest = function() {

 3     if (window.XMLHttpRequest) {

 4       //主流浏览器提供了XMLHttpRequest对象

 5       return new XMLHttpRequest();

 6     } else if (window.ActiveXObject) {

 7       //低版本的IE浏览器没有提供XMLHttpRequest对象

 8       //所以必须使用IE浏览器的特定实现ActiveXObject

 9       return new ActiveXObject("Microsoft.XMLHttpRequest");

10     }

11

12   };

13   var xhr = getXmlHttpRequest();

14   xhr.onreadystatechange = function() {

15     console.log(xhr.readyState);

16     if (xhr.readyState === 4 && xhr.status === 200) {

17       //获取成功后执行操作

18       //数据在xhr.responseText

19       var resJson = JSON.parse(xhr.responseText)

20       cb(resJson);

21     }

22   };

23   xhr.open("post", uri, true);

24   xhr.setRequestHeader("DeviceCode", "56");

25   xhr.setRequestHeader("Source", "API");

26   xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");

27   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");

28   var dataStr = '';

29   for (var i in data) {

30     if (dataStr) {

31       dataStr += '&';

32     }

33     dataStr += i + '=' + data[i];

34   }

35   xhr.send(dataStr);

36 };

这样设置，可以直接传json字符串给后端。后端也要做相应处理。

跨域相关内容

CORS跨域的常见问题以及前后端的设置：

《Ajax——CORS跨域调用REST API 的常见问题以及前后端的设置》

data = JSON.stringify(data);

xhr.setRequestHeader("Content-Type","application/json");

巴特西

ajax jsonp跨域【转】

设置了：

跨域相关内容

最新文章

热门文章

巴特西

ajax jsonp跨域 【转】

设置了：

跨域相关内容

最新文章

热门文章

ajax jsonp跨域【转】