Mui --- app与服务器之间的交互原理、mui ajax使用

简介:
1、APP与服务器之间的交互原理

app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果。结果可以是多种格式:
1、text 文本格式
2、xml 格式
3、json 格式

2、什么是JSON?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON 语法规则:
数据在键值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
简单的例子:
{name:'小明', age:'18'}

3、使用MUI提供的Ajax工具完成与服务器端的交互
mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 
本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。

4、mui.ajax()
参数:
url       Type: String  请求发送的目标地址
async     Type: Boolean 发送同步请求
data      {xx:xx,xxx:xxx} 发送到服务器的业务数据
dataType  "xml": 返回XML文档,"html": 返回纯文本HTML信息;,"script": 返回纯文本JavaScript代码,"json": 返回JSON数据,"text": 返回纯文本字符串
error     请求失败时触发的回调函数,该函数接收三个参数: (xhr:xhr实例对象,type:错误描述,可取值:"timeout", "error", "abort", "parsererror"、"null",errorThrown:可捕获的异常对象)
success   请求成功时触发的回调函数,该函数接收三个参数:(data:服务器返回的响应数据,类型可以是json对象、xml对象、字符串等;,textStatus:状态描述,默认值为'success', xhr:xhr实例对象)
timeout   请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调
type      请求方式,目前仅支持'GET'和'POST',默认为'GET'方式
headers   指定HTTP请求的Header
一个完整示例
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
    document.getElementById('btn1').addEventListener('tap',function(){
        mui.ajax({
            url      : 'http://demo.hcoder.net/index.php',
            type     : 'GET',
            success  : function(data){
                mui.toast(data);
            },
            error    : function(xhr,type,errorThrown){
                mui.toast(type);
            }
        });
    });
});
</script>5、Ajax简化模式
mui.post()方法是对mui.ajax()的一个简化方法,直接使用POST请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法),使用方法: mui.post(url[,data][,success][,dataType]),如上登录鉴权代码换成mui.post()后,代码更为简洁,如下:
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格式返回数据列表
mui.get('http://server-name/list.php',{category:'news'},function(data){
    //获得服务器响应
    ...
    },'json'
);
mui.getJSON()方法是在mui.get()方法基础上的更进一步简化,限定返回json格式的数据,其它参数和mui.get()方法一致,使用方法: mui.get(url[,data][,success]),如上获得新闻列表的代码换成mui.getJSON()方法后,更为简洁,如下:
mui.getJSON('http://server-name/list.php',{category:'news'},function(data){
    //获得服务器响应
    ...
    }
);
复制代码
 
 
 
相关文章
|
4月前
|
XML 前端开发 JavaScript
AJAX 工作原理
**AJAX**利用JavaScript与`XMLHttpRequest`异步通信,结合DOM操作、CSS样式和XML数据格式,实现页面无刷新更新。Google Suggest在2005年通过此技术提升了用户体验,用户输入时动态获取搜索建议,展示了AJAX的平台无关性和创新交互。
|
2月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
44 5
|
5月前
|
Android开发 移动开发 小程序
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
|
4月前
|
XML 前端开发 JavaScript
AJAX 工作原理
AJAX是一种利用XMLHttpRequest对象、JavaScript/DOM、CSS和XML进行异步数据交换的技术,实现浏览器和平台无关的动态Web界面。Google Suggest在2005年通过使用AJAX,实现了用户输入关键词时实时显示搜索建议的功能,极大提升了用户体验。
|
3天前
|
前端开发 Java
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求,包括建立连接、编写Controller处理请求,并返回响应给前端或网址。
9 0
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
|
19天前
|
XML 前端开发 JavaScript
ajax运行原理
AJAX(Asynchronous JavaScript and XML)是一种使网页能够在不重新加载整个页面的情况下与服务器异步通信的技术。尽管名字中有“XML”,但它支持多种数据格式,如JSON、HTML和纯文本。用户行为触发AJAX请求后,通过创建`XMLHttpRequest`对象或使用现代浏览器中的`fetch` API来配置并发送HTTP请求。请求完成后,可以通过回调函数处理服务器返回的数据,更新网页内容。现代JavaScript推荐使用更简洁强大的`fetch` API来实现AJAX功能,广泛应用于动态网页和单页应用中,提升用户体验。
|
2月前
|
域名解析 存储 缓存
域名服务器 (DNS):工作原理及其优势
【8月更文挑战第19天】
221 0
|
4月前
|
Java 数据安全/隐私保护
深入剖析:Java Socket编程原理及客户端-服务器通信机制
【6月更文挑战第21天】Java Socket编程用于构建网络通信,如在线聊天室。服务器通过`ServerSocket`监听,接收客户端`Socket`连接请求。客户端使用`Socket`连接服务器,双方通过`PrintWriter`和`BufferedReader`交换数据。案例展示了服务器如何处理每个新连接并广播消息,以及客户端如何发送和接收消息。此基础为理解更复杂的网络应用奠定了基础。
55 13
|
4月前
|
缓存 小程序 前端开发
Java服务器端技术探秘:Servlet与JSP的核心原理
【6月更文挑战第23天】Java Web开发中的Servlet和JSP详解:Servlet是服务器端的Java小程序,处理HTTP请求并响应。生命周期含初始化、服务和销毁。创建Servlet示例代码展示了`doGet()`方法的覆盖。JSP则侧重视图,动态HTML生成,通过JSP脚本元素、声明和表达式嵌入Java代码。Servlet常作为控制器,JSP处理视图,遵循MVC模式。优化策略涉及缓存、分页和安全措施。这些技术是Java服务器端开发的基础。
54 9
|
4月前
|
XML 前端开发 JavaScript
AJAX 工作原理
**AJAX**利用**XMLHttpRequest**进行异步数据交换,结合**JavaScript/DOM**更新页面,借助**CSS**样式和**XML**数据格式,实现跨平台的动态Web应用。谷歌的**Google Suggest**在2005年展示了AJAX的力量,用户输入时即刻获取搜索建议,无需刷新页面。