大佬教程收集整理的这篇文章主要介绍了mui初级入门教程(三)— html5+ XMLHttpRequest 与mui ajax用法详解,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是这个系列的的第三篇文章,前面的文章在多个地方(本人github
博客、dcloud ask
社区、segmentfault
)发出来了,很多朋友收藏点赞,只是没有多少人反映内容的深浅,也没有人提出意见,所以实话说不知道符不符合大家胃口,不过我写博客一向以详细为标准,尽可能照顾到各种人群,特别是入门级的同学,力求还原我学习这个东西的一个思路和过程,在文章中也分享一些不错的干货,最近在折腾博客,用webpack
和vue-cli
打包了一下,目前还有些问题有待解决,自己尝试写@L_241_5@markdown编辑器因为bug过多的问题,然后开始使用马克飞象写博客,毕竟生成的界面美观多了,这样可以方便大家阅读吧。废话不多说,开始我们今天的内容,今天主要是学习一下html5+
的XMLhttprequest
以及@H_447_7@mui的基本用法。
XMLhttprequest
让发送一个http
请求变得非常容易。你只需要简单的创建一个请求对象实例,打开一个URL
,然后发送这个请求。当传输完毕后,结果的http
状态以及返回的响应内容也可以从请求对象中获取。
new XMLhttprequest();
第二步:初始化http请求参数
void open( DOMString method,DOMString url,optional Boolean async,optional DOMString user,optional DOMString password );
@H_296_51@method:请求所使用的http
方法; 例如 "GET"
,"POST"
,"PUT"
,"deletE"
等. 如果下个参数是非http(S)
的URL
,则忽略该参数.
url:该请求所要访问的URL
async:一个可选的布尔值参数,默认为true
,意味着是否执行异步操作,如果值为false
,则send()
方法不会返回任何东西,直到接受到了服务器的返回数据。如果为值为true
,一个对开发者透明的通知会发送到相关的事件监听者。这个值必须是true
,如果@H_447_7@multipart属性是true
,否则将会出现一个意外。
第三步:发送请求
send();
发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
如下例:
var xhr = new XMLhttprequest(); xhr.onload = function () { console.log(this.responseText); }; xhr.onreadystatechange = function() { console.log(this.readyStatE); }; xhr.open("get","https://www.baidu.com",truE); xhr.send();
我们在hbuilder里面打开,控制台会报错:
[Web浏览器] "XMLhttprequest cAnnot load https://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access."
用浏览器打开,按F12
在控制台console
下查看也会发现上述错误,这是为啥呢?
这是因为普通网页能够使用XMLhttprequest
对象发送或者接受服务器数据,但是它们受限于@L_618_36@。只要先获取了跨域请求许可,就可以进行跨域请求。
CORS 的全称是 Cross-Origin resource Sharing,即跨域资源共享。他的原理就是使用自定义的 http 头部,让服务器与浏览器进行沟通,主要是通过设置响应头的 Access-Control-Allow-Origin 来达到目的的。这样,XMLhttprequest 就能跨域了。想要进一步了解CORS的朋友可以看看这篇文章:了解跨域资源共享 (CORS)
在服务器端添加响应头Access-Control-Allow-Origin
,使用XMLhttprequest
对象请求。值得注意的是,正常情况下的 XMLhttprequest 是只发送一次请求的,但是跨域问题下很可能是会发送两次的请求(预发送)。
PHP:
header('Access-Control-Allow-Origin: *');
java:
response.addheader( "Access-Control-Allow-Origin","*" );
大家不妨将上面那个例子中的地址换成这个试试:http://zhaomenghuan.github.io...
(仅用于学习测试,禁止直接用于任何不经征求本人同意的站点)
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var xhr = new XMLhttprequest(); xhr.open("get","http://zhaomenghuan.github.io/api/blog.json",truE); xhr.onload = function () { console.log(this.responseText); var data = JSON.parse(this.responseText); for(var i in data){ document.write(data[i].pagEID + ':' + data[i].title+"<br />") } }; xhr.onerror = function () { alert('error making the request.'); }; xhr.send(); </script> </body> </html>
哈哈,执行完这段代码你会发现,你能够查看到我博客的列表,所以大家是不是懂了些什么, CORS能否跨域实现需要服务器端支持,我们这里能够收到信息,是因为github上的资源是支持CORS访问的,这和框架无关,很多人以为用了框架就可以跨域,这都是不正确的理解,框架只是封装了一些方法,让我们使用更加方便,能不能跨域还是取决于我们服务器端的访问权限。这里顺便说一下很多人用mui会发现在浏览器端会报错,在app环境能够访问,这是因为mui依赖html5+ XMLhttprequest网络请求模块,后面会详细讲到。
Jsonp
的跨域不是用XMLhttprequest
实现的,而是一个script
标签,script
是可以跨域的,回调函数作为get
参数传入请求里。
原理很简单,比如你在A域名请求B域名:
在A域名的页面中使用script标签src写成B域名中服务器的URL
script标签是可以跨域的,比如你调用Google Map或Google Analytics时引入的js就是google域名下的。
后端程序在最后需要把一段js代码的字符串打印出来,这样就可以运行A域名js中写好的callBACk方法,将要返回的数据放入参数就可以了
A域名中的js文件:
function CreateScript(srC){ var el = document.createElement('script'); el.src = src; el.async = true; el.defer = true; document.body.appendChild(el); } // 响应的方法 function jsonpcallBACk(rs) { console.log(JSON.Stringify(rs)); document.getElementById("output").innerHTML = JSON.Stringify(rs); } // 发起get请求 CreateScript('http://127.0.0.1:8888?userid=001&callBACk=jsonpcallBACk');
B域名中node服务器:
var http = require('http'); var url = require('url'); var data = { 'name': 'zhaomenghuan','age': '22' }; http.createServer(function(req,res){ // 将url字符串转换成Url对象 var params = url.parse(req.url,truE); console.log(params); // 查询参数 if(params.query){ // 根据附件条件查询 if(params.query.userid === '001'){ // 判断是否为jsonp方式请求,若是则使用jsonp方式,否则为普通web方式 if (params.query.callBACk) { var resurlt = params.query.callBACk + '(' + JSON.Stringify(data) + ')'; res.end(resurlt); } else { res.end(JSON.Stringify(data)); } } } }).listen(8888);
这样我们就可以在A域名下跨域请求,当然我们经常看到很多框架如jquery对jsonp进行了进一步封装,但是基本原理同上面。这里给出两个例子:
总之,不论是XMLhttprequest
的跨域,还是Jsonp
,都是需要请求的网站服务器端提供支持,在愿意分享给你数据的情况下你才能得到。在对方没有提供支持的情况下,你是取不到它的数据的。当然跨域的解决方案有很多种,由于本人没有实践过,没有实践就没有发言权,这里给大家贴一个帖子,自己跨域自行验证,浅谈浏览器端JavaScript跨域解决方法。
上面我们花了很大篇幅讲解了JavaScript XMLhttprequest
对象,而且也简单的讲解了同源策略和跨域请求的常用方法,我们注意到无论是JavaScript XMLhttprequest
还是jsonp
都需要通过服务器端的支持才能实现跨域,另外还有几种也有一定的局限性,所以总还是让人觉得美中不足。html5+
提供了一个XMLhttprequest
模块,在APP
端很完美的解决了这种问题,而且提供了和JavaScript XMLhttprequest
对象用法类似的一系列属性方法。由于本文的重在在于讲解html5+ XMLhttprequest
,所以前面的JavaScript XMLhttprequest
相关的属性方法只是初略介绍了一下,下面重点介绍html5+ XMLhttprequest
模块。
由于html5+ XMLhttprequest
是一种拓展方案,所以需要底层支持,基于html5+ XMLhttprequest
的方法不能用于非5+
环境,如果对这些概念不清楚的欢迎先阅读我之前写的文章mui初级入门教程(一)— 菜鸟入手mui的学习路线。
我们用hbuilder
新建一个app工程,然后运行下面的代码:
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <Meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title></title> </head> <body> <script type="text/javascript"> document.addEventListener('plusready',function(){ var xhr = new plus.net.XMLhttprequest(); xhr.onreadystatechange = function () { switch ( xhr.readyState ) { case 0: console.log( "xhr请求已初始化" ); break; case 1: console.log( "xhr请求已打开" ); break; case 2: console.log( "xhr请求已发送" ); break; case 3: console.log( "xhr请求已响应"); break; case 4: if ( xhr.status == 200 ) { alert( "xhr请求成功:"+xhr.responseText ); } else { console.log( "xhr请求失败:"+xhr.readyState ); } break; default : break; } } xhr.open("GET","https://www.baidu.com/"); xhr.send(); },false ); </script> </body> </html>
创建一个XMLhttprequest
对象,对象创建时不触发任何时间和网络请求,需和open
,send
方法配合使用。
var xhr = new plus.net.XMLhttprequest(); xhr.open(method,url); xhr.send();
readyState: http 请求的状态
response: 请求从服务器接收到的响应数据
responseText: 请求从服务器接收到的响应数据(字符串数据)
responseType:请求响应数据response的类型
responseXML: 请求响应的Document对象
statusText: 服务器返回的http状态描述
timeout: 请求服务器的超时时间,单位为毫秒(ms)
withCredentials: 是否支持跨域请求
getResponseHeader: 获取指定的http响应头部的值
setRequestHeader: 指定一个http请求的Header
onreadystatechange: 网络请求状态发生变化事件
onloadstart: 网络请求开始事件
onprogress: 网络请求传输数据事件
onabort: 网络请求取消事件
@L_616_129@: 网络请求成功事件
ontimeout: 网络请求超时事件
onloadend: 网络请求结束事件
@H_447_7@mui框架基于htm5plus
的XMLhttprequest
,封装了常用的Ajax
函数,支持GET
、POST
请求方式,支持返回json
、xml
、html
、text
、script
数据类型; 本着极简的设计原则,@H_447_7@mui提供了@H_447_7@mui.ajax方法,并在@H_447_7@mui.ajax方法基础上,进一步简化出最常用的@H_447_7@mui.get()、@H_447_7@mui.getJSON()、@H_447_7@mui.post()三个方法。
url:请求发送的目标地址
error:Type: Functon(XMLhttprequest xhr,String type,String errorThrown)请求失败时触发的回调函数;
该函数接收三个参数:
- xhr:xhr实例对象 - type:错误描述,可取值:"timeout","error","abort","parsererror"、"null" - errorThrown:可捕获的异常对象
timeout:Type: number,请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调;
headers:Type: Object,格式为:{'Content-Type':'application/json'}
,
详情参考html5+ setRequestHeader。
基本格式如下:
@H_313_42@mui.ajax(url,{ 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); } });@H_447_7@mui.post()方法是对@H_447_7@mui.ajax()的一个简化方法,直接使用POST
请求方式向服务器发送数据、且不处理timeout
和异常(若需处理异常及超时,请使用@H_447_7@mui.ajax()方法)
@H_447_7@mui.get()方法和@H_447_7@mui.post()方法类似,只不过是直接使用GET
请求方式向服务器发送数据、且不处理timeout
和异常(若需处理异常及超时,请使用@H_447_7@mui.ajax()方法)。如下为获得某服务器新闻列表的代码片段,服务器以json格式返回数据列表:
@H_447_7@mui.getJSON()方法是在@H_447_7@mui.get()方法基础上的更进一步简化,限定返回json
格式的数据,其它参数和@H_447_7@mui.get()方法一致,如上获得新闻列表的代码换成@H_447_7@mui.getJSON()方法后,更为简洁,如下:
我们接着上一篇文章的项目开始进行本节的内容,上一篇我们讲解了html5+ webview
的使用方法,并且实现了一个基于父子webview
的tab bar
切换的案例,我们这次利用网易音乐API
接口请求数据,完成我们后续的音乐播放器功能。
网易音乐搜索API:
type:"GET"或“POST" //http请求类型
请求参数:
由于http请求类型包含get,我们只需要把请求的参数拼接到url里面就可以得到返回的数据,格式为url?key1=value1&key2=value2。
在这个例子中我们打开这个网址http://s.music.163.com/search...,我们会发现一些数据返回了,如下图:
OK,我们下面讲解怎么通过程序得到这些数据,并且我们并且怎么解析这些数据。
在开始之前我们先对我们要得到的数据进行美化,这里我在网上随便搜了一个
在线JSON校验格式化工具,我们只需要把刚刚那些数据复制粘贴到我给的这个工具里面,然后点击校验就变整齐了。
{ "result": { "songCount": 3224,"songs": [ { "id": 28949444,"name": "喜欢你","artists": [ { "id": 7763,"name": "G.E.m.邓紫棋","picUrl": null } ],"album": { "id": 2956076,"artist": { "id": 0,"name": "","picUrl": null },"picUrl": "http://p1.music.126.net/u_1EudmF8Swgow6vfgYe1g==/8896148580676276.jpg" },"au@L_673_188@": "http://m2.music.126.net/_icR1apQHVl8wa0EP_REkQ==/3269947581061892.mp3","djProgramId": 0 } ] },"code": 200 }
"picUrl":"http://p1.music.126.net/u_1EudmF8Swgow6vfgYe1g==/8896148580676276.jpg"
打开这个图片地址我们就可以看到邓紫棋了,哈哈,也就是说我们只需要抓取到这个地址就可以进行下面的工作咯,其他的类似。
@H_280_26@mui.ajax请求实例我们在上次新建的M-Box下的home.html下写这个例子:
<script src="../js/mui.min.js"></script> <script type="text/javascript"> var url = "http://s.music.163.com/search/get/"; mui.ajax(url,{ data: { 'type': 1,'s': "喜欢你",'limit': 10 },//服务器返回json格式数据 type:'post',//http请求类型 timeout:10000,//超时时间设置为10秒; success:function(data){ console.log(JSON.Stringify(data)); },errorThrown){ //异常处理; console.log(typE); } }); </script>
hbuilder
很方便的一个功能就是真机调试,我们直接将电脑与手机连接,通过console.log()
函数可以很方便的将数据在控制台打印出来,例如上述例子如果我们在success
的回调函数中执行console.log(data);
,在控制台会输出[object Object]
,我们只需要利用JSON.Stringify()
方法可以将任意的 JavaScript
值序列化成 JSON
字符串。
每次看到很多同学在解析json
的时候错误百出,严重暴漏了基本功,这里我就总结几条与解析json
可能相关的知识点。
JSON: JavaScript Object Notation
(JavaScript 对象表示法),JSON
是存储和交换文本信息的语法,独立于语言。类似 XML
。JSON
比 XML
更小、更快,更易解析,具有自我描述性,更易理解的特点。
JSON
就是一串字符串,只不过元素会使用特定的符号标注。
{"name": "Dcloud"}
可以理解为是一个包含name
为Dcloud
的对象;[{"name": "mui"},{"name": "html5+"}]
就表示包含两个对象的数组。
通过JavaScript
,您可以创建一个对象数组,并像这样进行赋值:
var employees = [ { "firstName":"John","lastName":"Doe" },{ "firstName":"Anna","lastName":"Smith" },{ "firstName":"Peter","lastName": "Jones" } ];
可以像这样访问 JavaScript 对象数组中的第一项:employees[0].lastName;
返回的内容是:Doe
可以像这样修改数据:employees[0].firstName = "Jonatan";
这里需要特别说明的是两个非常有用的方法:JSON.Stringify和JSON.parse。我们可以通过JSON.Stringify将json对象转成json字符串,方便用alert,console.log打印出来,可以方便的查看json对象内容。反之我们可以通过JSON.parse将json字符串转成json对象以便可以方便对json对象取值。例:
// 场景1 var data = { name: 'zhaomenghuan',age: 22 } console.log(typeof data); // "object" console.log(JSON.Stringify(data)) // "{"name":"zhaomenghuan","age":22}" // 场景2 var str = '{"name":"zhaomenghuan","age":22}'; console.log(typeof str) // "String" console.log(JSON.parse(str).Name) // "zhaomenghuan"
上面的例子列举了两种应用场景,大家根据自己的情况合适的选取正确的方法。
[ ]可以用于数组和对象取值,数组中按下边取值。
var array=["one","two","three","four"]; array[0];
对象属性取值时,当我们不知道属性名或属性名本身包含点(.)的键,应当使用[ ]。
for(var key in obj){ console.log(key + ":" + obj[key]); }
var obj={ id:"obj","self.ref":ref } console.log(obj["self.ref"]);
var key="property"; console.log(key); var obj={ property:"Hello word" } console.log(obj[key]);
var array=[1,2,3,4,5]; array.map(function(item){ return item*2; });
数组@H_447_7@map方法可以接受一个匿名函数,数组中每个元素都会调用这个匿名函数,并且讲返回结果放在一个数组中。
@H_447_7@mui中的each()
方法既是一个类方法,同时也是一个对象方法,两个方法适用场景不同;换言之,你可以使用@H_447_7@mui.each()去遍历数组或json
对象,也可以使用@H_447_7@mui(SELEctor).each()去遍历DOM
结构。
obj :Type: Array||JSONObj
需遍历的对象或数组;若为对象,仅遍历对象根节点下的key
为每个元素执行的回调函数;其中,index表示当前元素的下标或key,element表示当前匹配元素
对于前面说到的音乐api
返回的json
数据,首先我们要通过var songs=data.result.songs;
获取"songs"
的值,然后遍历"songs"
对象的子对象。
··· success:function(data){ // console.log(JSON.Stringify(data)); var songs=data.result.songs; mui.each(songs,function(index,item){ var id = item.id,name = item.album.name,author = item.artists[0].name,picUrl = item.album.picUrl,au@L_673_188@ = item.au@L_673_188@; }) },···
我们用上述代码可以得到我们想要的数据,下面就是需要将信息展示出来,这里我们只获取 歌曲id
、歌曲所属专辑名name
、歌曲第一作者author
、歌曲所属专辑图片picUrl
、歌曲音频文件au@L_673_188@
。
考虑到要加载很多图片,这里我们使用懒加载实现效果,这里我们直接使用Hello mui
里面的模板页面lazyload-image.html
,我们需要引入@H_447_7@mui.lazyload.js和@H_447_7@mui.lazyload.img.js两个文件,还有占位图。下面先贴出修改后的基本的代码,然后再讲解其中的内容。
home.html:
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>M-Box</title> <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <Meta name="apple-mobile-web-app-capable" content="yes"> <Meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--> <link rel="stylesheet" href="../css/mui.min.css"> <style type="text/css"> .mui-content>.mui-table-view:first-child { margin-top: 0px; } </style> </head> <body> <div class="mui-content"> <ul id="list" class="mui-table-view mui-table-view-chevron"></ul> </div> </body> <script src="../js/mui.min.js "></script> <script src="../js/mui.lazyload.js"></script> <script src="../js/mui.lazyload.img.js"></script> <script> mui.init(); var url = "http://s.music.163.com/search/get/"; mui.ajax(url,{ data: { 'type': 1,'limit': 10 },//服务器返回json格式数据 type:'post',//http请求类型 timeout:10000,//超时时间设置为10秒; success:function(data){ //console.log(JSON.Stringify(data)); var songs=data.result.songs; var list = document.getElementById("list"); var fragment = document.createDocumentFragment(); var li; mui.each(songs,item){ var id = item.id,au@L_673_188@ = item.au@L_673_188@; li = document.createElement('li'); li.className = 'mui-table-view-cell mui-media'; li.innerHTML = '<a class="mui-navigate-right" id='+ id +' data-au@L_673_188@='+ au@L_673_188@ +'>'+ '<img class="mui-media-object mui-pull-left" data-lazyload="'+picUrl+'">'+ '<div class="mui-media-body">'+name+ '<p class="mui-ellipsis">'+author+'</p>'+ '</div>'+ '</a>'; fragment.appendChild(li); }) list.appendChild(fragment) mui(document).imageLazyload({ placeholder: '../img/60x60.gif' }); },errorThrown){ //异常处理; console.log(typE); } }); //列表点击事件 mui("#list").on('tap','li a',function(){ var id = this.getAttribute('id'); var au@L_673_188@ = this.getAttribute('data-au@L_673_188@'); //打开详情页面 mui.openWindow({ url:'music.html',id:'music.html',extras:{ musicId:id,au@L_673_188@Url:au@L_673_188@ } }); }); </script> </html>
@H_296_51@music.html:
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,minimum-scale=1,user-scalable=no" /> <title></title> <link href="../css/mui.min.css" rel="stylesheet"/> </head> <body> <script src="../js/mui.min.js"></script> <script type="text/javascript"> mui.init(); mui.plusReady(function(){ var self = plus.webview.currentWebview(); var musicId = self.musicId; var au@L_673_188@Url = self.au@L_673_188@Url; document.write("musicId:" + musicId + "<br />"); document.write("au@L_673_188@Url:" + au@L_673_188@Url); }); </script> </body> </html>
我们这里说几个开发者常见的问题:
首先打开Hello mui
里面的模板页面lazyload-image.html
,我们打开控制台查看elements
,结构如下:
<ul id="list" class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell mui-media"> <a class="mui-navigate-right"> <img class="mui-media-object mui-pull-left" data-lazyload-id="0" src="http://www.dcloud.io/Hellomui/images/1.jpg?version=447.4190210457891"> <div class="mui-media-body"> 主标题 <p class="mui-ellipsis">列表二级标题</p> </div> </a> </li> </ul>
我们需要将获取的内容动态的填充到这个里面,这里常用的方法就是动态的生成节点,这里我们就要用到DOM
的创建方法document.createElement
,通过这个方法我们可以生成一个节点: li = document.createElement('li');
这个可以生成一个li
节点,我们需要为这个li
指定class
,通过对对象的className
赋值实现,如:li.className = 'mui-table-view-cell mui-media';
,我们使用appendChild(li)
方法将li
节点挂着父节点上,比如:
var list = document.getElementById("list"); list.appendChild(li);
这个就是把li
节点挂在list
下,同理我们可以在li
节点下 创建子节点,上面为了简单,我们使用给innerHTML
属性赋值的做法,这样innerHTML
的值同样会挂在li
节点下,大家需要注意的是innerHTML
属性的值我字符串,所以我们往中间插入了变量,要使用+
连接起来。我们可以通过循环创建多个节点,如下面这样创建十个段落:
for(var i = 0 ; i < 10; i ++) { var p = document.createElement("p"); var oTxt = document.createTextNode("段落" + i); p.appendChild(oTxt); document.body.appendChild(p); }
上面我们使用的是@H_447_7@mui.each()方法,效果类似。
如果细心的同学或许注意到我们使用了一个奇怪的写法:
var fragment = document.createDocumentFragment(); mui.each(songs,item){ ... fragment.appendChild(li); }); list.appendChild(fragment);
为啥我们要在这里使用document.createDocumentFragment()
呢?
如果是对前端技术感兴趣的同学说不定回去查一下,我相信大部分人可能就放过了吧!这里我查了一下资料:
createComment(text): 创建带文本text的注释节点
createDocumentFragment(): 创建文档碎片节点
createTextNode(text): 创建包含文本text的文本节点
其中最感兴趣且以前没有接触过的一个方法是createDocumentFragment()方法,书中介绍说:在更新少量节点的时候可以直接向document.body节点中添加,但是当要向document中添加大量数据是,如果直接添加这些新节点,这个过程非常缓慢,因为每添加一个节点都会调用父节点的appendChild()方法,为了解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片一次性添加到document中。—— document的createDocumentFragment()方法
我们点击了列表,我们会进入一个详情页,我们肯定是想知道我们究竟点了哪一个我们想把一些数据传入到详情页面,这里我们使用了@H_447_7@mui.openWindow()方法中的拓展参数extras
传入几个值,在详情页面通过plus.webview.currentWebview
获取:
这是在页面初始化时,通过扩展参数extras
传值;另外还有页面已创建,通过自定义事件传值,参考mui官网中自定义事件的介绍,这里先不讲得太多,后面会专门花时间详细讲解相关细节。
由于前面已经详细讲解,这里就不再赘述,只给出一个基本的demo:jsonp获取网易云音乐。
当我们写到这里,发现这篇依然是长长的一篇干货,很多内容摘自文档,主要是为了新手可以详细去了解整个流程。其实还有很多没有写出来,限于篇幅还是后面再写吧!由于代码在文章中写得很详细,工程代码先不给出来,最后整个系列写完了再放出来吧!
这段时间在技术上花得时间确实太多,刚刚和女朋友在图书馆学习,她和我开个玩笑,我在忙着做作业因为不喜欢被打扰,然后就觉得很烦躁,然后就聊着聊着她说和我分手,我不知道她是不是认真的,只是觉得空空的,自从走上代码这条路,我已经失去太多东西,我不想失去女朋友,毕竟谈了三年,我是真的爱她,写完这个就去找她道歉吧!还有要向环头道歉,昨天可能说话有点直接,不小心伤到他了,后来想想真的可能是我太较真,他只是想玩玩程序,我何必那种执着呢?如果环头看到这篇博客,希望你可以原谅哥,我只是不想让你走弯路,或许每个都应该自己去把握自己的人生,我们不必去干涉。
写文章不容易,也许写这些代码就几分钟的事,写一篇大家好接受的文章或许需要几天的酝酿,然后加上几天的码字,累并快乐着。如果文章对您有帮助请我喝杯咖啡吧!
以上是大佬教程为你收集整理的mui初级入门教程(三)— html5+ XMLHttpRequest 与mui ajax用法详解全部内容,希望文章能够帮你解决mui初级入门教程(三)— html5+ XMLHttpRequest 与mui ajax用法详解所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。