关于手机端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='#' οnclick=\"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函数对页面内容进行处理

}

}