mui php json,【示例】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部分

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地址。