本文主要包含mui.jsonp.js,mui jsonp,jsonp跨域,jsonp跨域原理,jquery jsonp跨域等相关知识,教程希望在学习及工作中可以帮助到您
");
</div>
喜欢MUI的精简和快速，所以我做webAPP时经常第一时间想到MUI，在处理跨域问题上，我以前都是使用jquery的JSONP来解决跨域，现在使用mui.ajax()方法，官方文档里没给出是否可以使用jsonp，自己尝试试了下，向服务端post方式来传用户名和密码，依然显示是不让跨域，百度了N多，在本网站也看了N多，也是找不到答案，官方说的费了老大劲以毫秒级别来提升MUI运行速度，强烈不建议引入jquery，但是跨域这个常见的问题不能解决，实在没办法ajax请求数据，实在无奈，只得引入jquery来解决跨域问题，希望官方下一个mui版本能扩大Ajax能像jquery的ajax那么强大，而且现在WebAPP那么流行，实在应该出一款纯web的MUI版本，不知道我有生之年能不能看到呢。。。。。。。
那如何解决跨域问题呢？代码如下:
mui-jsonp.zip
那如何解决跨域问题呢？代码如下:
- 普通浏览器跨域需要服务器端支持，mui中jsonp使用方法如下：
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <link href="css/mui.min.css" rel="stylesheet" />
- </head>
- <body>
- <button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
- <script src="js/mui.min.js"></script>
- <script src="js/mui.jsonp.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- mui.init()
- // http://fanyi.youdao.com/openapi.do?keyfrom=xqnblog&key=1828999753&type=data&doctype=json&version=1.1&q=good
- var url = 'http://fanyi.youdao.com/openapi.do?keyfrom=xqnblog&key=1828999753&callback=?'
- document.querySelector('#btn').addEventListener('click',function () {
- mui.getJSON(url,{
- only:"translate",
- type:"data",
- doctype:"jsonp",
- version:"1.1",
- q: 'good'
- },function(rs){
- alert("res:"+JSON.stringify(rs));
- });
- })
- </script>
- </body>
- </html>
mui-jsonp.zip