关于手机端JQuery的使用心得（3）

关于手机端JQuery的异步传输时UI界面不更新的bug

JQeryMobile的UI界面，其标签首先经过jquery.mobile-1.0a2.min.js的处理（你可以用chrome的审查元素功能，看到事实上显示的页面中已经由JS添加许多新标签和class，而不仅仅是原来你写的那点标签），然后再进行css布局。因此，当你的页面与后台异步传输获得数据的时候，返回的内容通过append插入页面后，往往没有相应的CSS效果。这个时候我们就需要动态加载jquery.mobile-1.0a2.min.js，即在异步传输获得数据后，再读处理页面的jquery.mobile-1.0a2.min.js。

具体如下：

function LoadJs(file){ //动态调用JS文件函数

var head = $('head').remove('#loadScript');

$("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:'text/javascript',id:'load'}).appendTo(head);

}



function getData(type, url, argname1, arg1, argname2, arg2, nextfunction){

//采用XMLHttpRequest方法向服务器提供参数，获得数据

//参数定义：类型，调用的后台页面，参数1的名称，参数1的值，参数2的名称，参数2的值，返回结果后执行的下一个函数名

var $xmlhttp, $result;

$xmlhttp = false;

// branch for native XMLHttpRequest object

if(window.XMLHttpRequest) {

try{

$xmlhttp = new XMLHttpRequest();

} catch(e) {

$xmlhttp = false;

}

// branch for IE/Windows ActiveX version

} else if(window.ActiveXObject) {

try {

$xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch(e) {

try {

$xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch(e) {

$xmlhttp = false;

}

}

}



$xmlhttp.open(type, url, true); //异步调用

$xmlhttp.setRequestHeader(argname1, arg1);//将参数定义在header里

$xmlhttp.setRequestHeader(argname2, arg2);

$xmlhttp.onreadystatechange = function()

{

if ( $xmlhttp.readyState == 4 && $xmlhttp.status == 200 ){



$result = $xmlhttp.responseText; //得到返回信息

$glb_result = $result;

eval(nextfunction);//执行下一个函数

}else{

//result = xmlhttp.status;

}

}

$xmlhttp.send('USERNAME=user1&PASSWORD=123456');//异步发送，这里send的内容无意义

}



function GetShowMyList()//获取根目录文件列表函数

{

var authcode = GetRequest();

$glb_authcode = authcode; //保存为全局变量

var $url = 'http://222.31.76.184/rest.php?case=showMyList';

getData("get", $url, "AUTHCODE", authcode, "", "", "ShowMyListOK()");



}



function ShowMyListOK(){//处理根目录文件列表函数

if( $glb_result == ""){

alert("密码或用户名有错！");

}else{

//alert("成功： "+$glb_result);

var $obj = jQuery.parseJSON($glb_result);

$.each( $obj, function(i, n){

if( $obj[i].wname != ""){

var onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>"
+ $obj[i].wsize + "B</span><a href='dialog/operatefile.html' >操作</a></li>";

$("#wlist").append(onelist);

}

});

LoadJs("js/jquery.mobile-1.0a2.min.js");//处理成功后再调用jquery.mobile的JS函数对页面内容进行处理

}

}