mui 框架跨域_MUI框架学习(5)–AJAX跨域问题
做web开发的同学,肯定都知道跨域的问题,为了安全,所有的ajax请求必须在同一域名下进行,二级域名也不可以,第一次做web APP的时候,对于跨域问题也是不了解,后来使用了Jquery的Jsonp,当然还有一些其他的方法,都可以参考,但是在APP上是没有跨域概念的,只有web有,所有MUI集成了AJAX方法。
Ajax
mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。
1
2
3
4
mui.ajax(url[,settings])
url
Type:String
请求发送的目标地址
settings
Type: PlainObject
key/value格式的json对象,用来配置ajax请求参数,支持的完整参数参考如下mui.ajax([settings])方法
mui.ajax([settings])
settings
Type: PlainObject
key/value格式的json对象,用来配置ajax请求参数,支持的详细参数如下:
data
Type: PlainObject||String
发送到服务器的业务数据
dataType
Type: String
预期服务器返回的数据类型;如果不指定,mui将自动根据HTTP包的MIME头信息自动判断;支持设置的dataType可选值:
“xml”: 返回XML文档
“html”: 返回纯文本HTML信息;
“script”: 返回纯文本JavaScript代码
“json”: 返回JSON数据
“text”: 返回纯文本字符串
error
Type: Functon(XMLHttpRequest xhr,String type,String errorThrown)
请求失败时触发的回调函数,该函数接收三个参数:
xhr:xhr实例对象
type:错误描述,可取值:”timeout”, “error”, “abort”, “parsererror”、”null”
errorThrown:可捕获的异常对象
success
Type: Functon(Anything data,String textStatus,XMLHttpRequest xhr)
请求成功时触发的回调函数,该函数接收三个参数:
data:服务器返回的响应数据,类型可以是json对象、xml对象、字符串等;
textStatus:状态描述,默认值为’success’
xhr:xhr实例对象
timeout
Type: Number
请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调
type
Type: String
请求方式,目前仅支持’GET’和’POST’,默认为’GET’方式
代码示例:如下为通过post方式向某服务器发送鉴权登录的代码片段
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
mui.post()方法是对mui.ajax()的一个简化方法,直接使用POST请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法),使用方法: mui.post(url[,data][,success][,dataType]),如上登录鉴权代码换成mui.post()后,代码更为简洁,如下:
1
2
3
4
5
6
7
8
9
mui.post('http://server-name/login.php',{
username:'username',
password:'password'
},function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},'json'
);
mui.get()方法和mui.post()方法类似,只不过是直接使用GET请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法),使用方法:mui.get(url[,data][,success][,dataType]),如下为获得某服务器新闻列表的代码片段,服务器以json格式返回数据列表
1
2
3
4
5
6
mui.get('http://server-name/list.php',{category:'news'},function(data){
//获得服务器响应
...
},'json'
);
如上mui.get()方法和如下mui.ajax()方法效果是一致的:
1
2
3
4
5
6
7
8
9
10
11
12
mui.ajax('http://server-name/list.php',{
data:{
category:'news'
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
success:function(data){
//获得服务器响应
...
}
});
mui.getJSON()方法是在mui.get()方法基础上的更进一步简化,限定返回json格式的数据,其它参数和mui.get()方法一致,使用方法: mui.get(url[,data][,success]),如上获得新闻列表的代码换成mui.getJSON()方法后,更为简洁,如下:
1
2
3
4
5
mui.getJSON('http://server-name/list.php',{category:'news'},function(data){
//获得服务器响应
...
}
);
mui 框架跨域_MUI框架学习(5)–AJAX跨域问题相关推荐
- jsonp解决ajax跨域问题,用JSONP解决ajax跨域问题
JSONP:JSON With Padding 要点: 1.script标签 2.用script标签加载资源是没有跨域问题的 概要: 在资源加载进来之前先定义一个函数,这个函数接受一个参数(数据),函 ...
- vue ajax跨域提交,vue-cli开发时ajax跨域的方法
目的:使用vue-cli构建的项目,在开发时,想要访问后台接口获取数据,这时就会出现跨域问题. 在config/index.js中进行如下配置 [即在进行ajax请求时,地址中任何以/api开头的请求 ...
- ajax跨域请求wcf服务,jQuery ajax跨域发布到WCF休息服务
我试图做一个跨域POST到WCF休息服务.以下是我的服务代码,获取请求jQuery ajax跨域发布到WCF休息服务 [WebInvoke(UriTemplate = "", Me ...
- ashx 跨域_使用ashx解决ajax跨域访问的问题
由于跨域访问是被IE的安全访问拒绝掉的 需要使用web代理 新建一个proxy.ashx文件 在proxy.ashx里建一个webservice 代码如下: [WebService(Namespace ...
- ashx 跨域_使用ashx解决ajax跨域访问的问题 | 学步园
由于跨域访问是被IE的安全访问拒绝掉的 需要使用web代理 新建一个proxy.ashx文件 在proxy.ashx里建一个webservice 代码如下: [WebService(Namespace ...
- apache ajax 跨域访问,AJAX跨域访问(从Tomcat8到Apache/Nginx)
1.在Tomcat的Root目录下放入如下的文件 apache-tomcat-8.0.12X64\webapps\ROOT clientaccesspolicy.xml文件 crossdomain.x ...
- ajax跨域请求Jsonp实现,使用jsonp实现ajax跨域请求
Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example ...
- ajax中cors解决跨域,AJAX 跨域 CORS 解决方案
两种跨域方法 在 Javascript 中跨域访问是比较常见的事情 就像现在比较流行写单页应用,而单页应用在访问 API 的时候就会有跨域的问题 要解决跨域的问题,其实也并不复杂,有两种方案可以选择 ...
- ajax跨域练习-第三方api全国天气查询
最近学习了ajax跨域,看到教程视频通过调用第三方的api来进行查询数据,于是我也自己尝试下调用当做一个小练习.过程还是不难的,第三方api的教程也很清晰明了,很容易就能调用了. demo截图: 不要 ...
- apache ajax 跨域访问,Apache 实现AJAX跨域请求
当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯 ...
最新文章
- ATS 5.3.0日志字段分析(续)
- gulp将多张小图自动合成雪碧图
- 移动端适配方案 flexible.js
- 当薪资倒挂成为常态,然后呢?
- Java集合框架(3)
- onlyoffice修改字号
- shadows a parameter
- Asp.net--DropDownList控件绑定数据库数据
- JDK源码(12)-Enum
- H264 profile and level
- java动态编译无法导包_java动态编译整个项目,解决jar包找不到问题.doc
- Spring的标签和验证等模块
- MATLAB画qpsk的矢量图,matlab仿真QPSK.doc
- Android 增强版百分比布局库 为了适配而扩展
- 分布式系统容错性方案设计:重试与幂等
- zigbee芯片cc2430资料
- 阿凡题UWP的源码公开
- android 侧滑栏教程,Android控件开发——DrawerLayout侧滑菜单的实现
- 饥荒如何修改服务器人数,饥荒联机怎么改房间人数?饥荒修改房间人数方法
- 基础算法(三) --- 轮询
热门文章
- flash花屏 html,电脑中Firefox火狐浏览器出现卡顿、花屏、Flash崩溃等问题的解决方法...
- 计算机程序设计员( 国家职业标准三级),计算机程序设计员国家职业标准
- 解决在使用rtx2060跑算法时遇到显存不足的问题
- android 4.4新功能介绍(Kitkat)
- DM manager工具使用
- java 象棋人机开源码,中国象棋人机博弈程序(扁平化棋局) C语言实现
- CSS:光标跟随实现
- 什么是即时通讯系统?
- 计算机毕设 SpringBoot+Vue车辆租赁管理系统 网上汽车租赁系统 汽车租赁管理系统 汽车分时租赁系统Java Vue MySQL数据库 远程调试 代码讲解
- Google Chrome OS