Trust
Trust
  • 发布:2016-08-30 21:08
  • 更新:2021-10-28 16:57
  • 阅读:34137

【示例】mui.ajax()方法中的XMLHttpRequest

分类:MUI

XMLHttpRequest和AJAX

XMLHttpRequest(以下简称为“XHR”)中文可以解释为“可扩展超文本传输请求”,Xml可扩展标记语言,Http超文本传输协议,Request请求。XMLHttpRequest对象是“异步JavaScript和XML”(Asynchronous Javascript And XML)——AJAX实现的核心。

mui.ajax()中的XHR

mui.ajax()中的XHR对象有两种:
window.XMLHttpRequest
5+XMLHttpRequest

异步/同步

AJAX最大的优点就是异步,但是在某些情况下依旧需要进行同步的请求。window的XHR是支持同步的,但是5+的XHR并不支持。也就是说,当使用window的XHR时,可以通过设置async属性来调整异步/同步。

mui.ajax({  
    url: 'http://192.168.0.101:8080/test'  
    data: {},  
    async: true || false, // 异步 || 同步  
    dataType: 'json',  
    type: 'post',  
    timeout: 10000,  
    success: function(data) {  
        // 请求成功  
    },  
    error: function(xhr, type, errorThrown) {  
        // 请求失败  
    }  
});  

关于mui.ajax()的使用,在其API中已经做出了较为全面的说明,这里主要说明mui.ajax()对两种XHR在不同场景下的使用。

5+运行环境

在5+运行环境下,才可以调用plus相关的API,可以使用5+的XHR。
5+运行环境目前有:5+App、流应用基座、360手机助手。

crossDomain

mui.ajax()配置信息的settings中有个参数crossDomain,说明为“强制使用5+跨域”,此时使用5+的XHR

mui.ajax({  
    url: 'http://192.168.0.101:8080/test'  
    data: {},  
    async: true,  
    dataType: 'json',  
    crossDomain: true, //强制使用5+跨域  
    type: 'post',  
    timeout: 10000,  
    success: function(data) {  
        // 请求成功  
    },  
    error: function(xhr, type, errorThrown) {  
        // 请求失败  
    }  
});  

跨域请求

5+默认采用UIWebview,是支持本地资源跨域请求的。即,此时会调用window的XHR。
当然,你也可以设置crossDomain为true,强制使用5+XHR。

WKWebview

5+的webview在创建的时候,可以设置窗口使用的内核,但是只能在iOS8.0及以上系统中使用。
WKWebview出于安全的设计,不支持window的XHR跨域。所以当使用WKWebview时,始终调用5+的XHR

其他

除了上述提到的场景,mui.ajax()均会调用window的XHR

手机浏览器环境

浏览器环境,一定使用的是window的XHR。
关于微信等浏览器环境开发中的跨域,请参考mui.getJSONP()实现Web跨域

12 关注 分享
BoredApe 赵梦欢 lhyh 2***@qq.com w***@163.com 7***@qq.com 小莫骚麦 9***@qq.com 1***@qq.com w***@qq.com lifeng_dev ancientry

要回复文章请先登录注册

IceDew

IceDew

你好,有个问题想请教一下,现在我们用mui开发的h5+混合app,要在手机上安装一个vpn,请求到现场的内网环境测试,但是请求一直失败请求状态是Pending,但是这个内网接口用电脑上安装vpn用postman测试可以通的,想问这是什么问题是mui.ajax跨域问题吗,但是加了crossDomain: true也是请求不到
2021-10-28 16:57
lifeng_dev

lifeng_dev

好文
2019-09-21 15:55
小莫骚麦

小莫骚麦

crossDomain: true, //强制使用5+跨域 解决了部分手机跨域的问题。
2017-08-21 15:07
7***@qq.com

7***@qq.com

非常感谢!现在才知道是UIWebview中的window XHR本身就支持跨域,解决了困扰我好久的疑问。对安卓不了解哈,哪知道webview还分种类的,学习了
2017-03-12 17:56
w***@163.com

w***@163.com

学习了
2016-11-07 16:45