【示例】mui.getJSONP()实现Web跨域

问题描述

许多开发者使用mui.ajax()在浏览器中调试时，控制台总会出现这样的错误信息：
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
出现这种错误的原因在于浏览器的同源策略，使得本域脚本只能读写本域内的资源，而无法访问其它域的资源，造成了我们常说的“跨域”问题。

问题分析

Web跨域访问的实现

浅谈WEB跨域的实现（前端向）
Web应用跨域访问解决方案汇总
网上有许多关于跨域问题的解决方案，这里知识提供两篇文章供大家参考。

JSON和JSONP

提起跨域实现，其实最容易想到的就是JSONP。这种技术方案已经非常流行，网上也有大量的资料供我们学习和参考。
说说JSON和JSONP，也许你会豁然开朗
jsonp详解
JSONP 的工作原理是什么？
JSONP 教程

解决方案

mui.ajax()

查看源码我们会发现mui.ajax()会根据运行情景的不同，而创建不同的XMLHttpRequest。
扩展阅读：mui.ajax()方法中的XMLHttpRequest

在5+默认的UIWebview中被允许调用window的XHR进行跨域访问。
并且5+提供的XHR也是可以进行跨域访问的。
如何判断Runtime是否支持5+ API

mui.getJSONP()

mui同样提供了JSONP的插件（mui.jsonp.js见附件）来实现Web跨域，方法为mui.getJSONP()。
该方法有三个参数：

• url——请求发送的目标地址（String）
• data——发送到服务器的业务数据（Object）
• callback——请求回调函数（Function）

请求方式默认并始终是GET方式，因为JSONP实际是在客户端动态添加了个然后将url指向要请求的地址，script是没有同源策略的。

示例（后端为php）

php部分

<?php  
header('Content-type: application/json');  
//获取回调函数名  
$callbackName = $_GET["callback"];  
//json数据  
$json_data = '["customername1","customername2"]';  
//输出jsonp格式的数据  
echo $callbackName."(" . $json_data . ")";  
?>  

JS部分

需要引入mui.js以及mui.jsonp.js

var data = {  
    name: 'xiaoming',  
    code: '200'  
};  
mui.getJSONP('http://192.168.12.74/jsonp.php', data, function(data) {  
    console.log(data);  
});  

mui.getJSONP()方法传递给服务器的回调函数的请求参数名在callback的参数中。

源码

附上源码，测试的时候记得更换下IP地址。