学会测试，用Ajax实现各种动态功能 转

Posted on 2016-10-10 21:27  影飞影  阅读(117)  评论(0)    收藏  举报

学会测试，用Ajax实现各种动态功能

 

为了实现地图的交互功能，花了大量的时间学习Ajax，现在解决了问题，才发现问题是原来这么容易解决。

首先说说需要解决的问题吧。Google Maps 的 Ajax 分页与搜索。

解决方案如下所述：

首先从表单获取输入，表单名为pg，然后调用 saveUserInfo() 方法通过 ajax 发送。

view plaincopy to clipboardprint?
  1. <form name="sent" method="post" action="">    
  2. 输入页码： <input type="text" height="20" name="pg" />    
  3. <input type="button" value="Go" onClick="saveUserInfo()">    
  4. </form>        

接下来用 genxml.php 来获得 ajax 传过来的值，然后根据这个值进行数据库查询，将查询的结果以 XML 的形式输出。

view plaincopy to clipboardprint?
  1. <?php  
  2. require("dbinfo.php");  
  3. require("library/Common.php");  
  4.   
  5. if(isset($_POST['pg']))  
  6. {  
  7.     $pg = $_POST['pg'];  
  8. }  
  9. else  
  10. {  
  11.     $pg = 1;  
  12. }  
  13.   
  14. // 连接到 MySQL 服务器  
  15. $connection=mysql_connect ($host, $username, $password);  
  16. if (!$connection)   
  17. {  
  18.   die('Not connected : ' . mysql_error());  
  19. }  
  20.   
  21. // 设置活动的 MySQL 数据库  
  22. $db_selected = mysql_select_db($database, $connection);  
  23. if (!$db_selected)   
  24. {  
  25.   die ('Can\'t use db : ' . mysql_error());  
  26. }  
  27.   
  28. $num = PageNumber::$PAGENUM;  
  29. $result_1 = $num * ($pg - 1);  
  30. $result_2 = $num;  
  31.   
  32. // 从数据表industrymap获取所有数据  
  33. $query = "select * from industrymap order by money desc limit $result_1, $result_2 ";  
  34. $result = mysql_query($query);  
  35. if (!$result)   
  36. {  
  37.   die('Invalid query: ' . mysql_error());  
  38. }  
  39.   
  40. header("Content-type: text/xml");  
  41.   
  42. function parseToXML($htmlStr)   
  43. {   
  44.     $xmlStr=str_replace('<','<',$htmlStr);   
  45.     $xmlStr=str_replace('>','>',$xmlStr);   
  46.     $xmlStr=str_replace('"','"',$xmlStr);   
  47.     $xmlStr=str_replace("'",''',$xmlStr);   
  48.     $xmlStr=str_replace("&",'&',$xmlStr);   
  49.     return $xmlStr;   
  50. }   
  51.   
  52. // 开始生成 XML 文件，输出父节点  
  53. echo '<markers>';  
  54.   
  55. // Iterate through the rows, printing XML nodes for each  
  56. while ($row = @mysql_fetch_assoc($result)){  
  57.   // ADD TO XML DOCUMENT NODE  
  58.   echo '<marker ';  
  59.   echo 'im_id="' . parseToXML($row['im_id']) . '" ';  
  60.   echo 'im_name="' . parseToXML($row['im_name']) . '" ';  
  61.   echo 'im_name2="' . parseToXML($row['im_name2']) . '" ';  
  62.   echo 'im_tel="' . parseToXML($row['im_tel']) . '" ';  
  63.   echo 'im_fax="' . parseToXML($row['im_fax']) . '" ';  
  64.   echo 'im_contactperson="' . parseToXML($row['im_contactperson']) . '" ';  
  65.   echo 'im_contactperson2="' . parseToXML($row['im_contactperson2']) . '" ';  
  66.   echo 'im_email="' . parseToXML($row['im_email']) . '" ';  
  67.   echo 'im_address="' . parseToXML($row['im_address']) . '" ';  
  68.   echo 'im_address2="' . parseToXML($row['im_address2']) . '" ';  
  69.   echo 'im_province="' . parseToXML($row['im_province']) . '" ';  
  70.   echo 'im_province2="' . parseToXML($row['im_province2']) . '" ';  
  71.   echo 'im_city="' . parseToXML($row['im_city']) . '" ';  
  72.   echo 'im_city2="' . parseToXML($row['im_city2']) . '" ';  
  73.   echo 'im_postcode="' . parseToXML($row['im_postcode']) . '" ';  
  74.   echo 'im_website="' . parseToXML($row['im_website']) . '" ';  
  75.   echo 'im_lat="' . $row['im_lat'] . '" ';  
  76.   echo 'im_lng="' . $row['im_lng'] . '" ';  
  77.   echo 'im_logo="' . parseToXML($row['im_logo']) . '" ';  
  78.   echo 'im_product="' . parseToXML($row['im_product']) . '" ';  
  79.   echo 'im_product2="' . parseToXML($row['im_product2']) . '" ';  
  80.   echo 'im_discription="' . parseToXML($row['im_discription']) . '" ';  
  81.   echo 'im_discription2="' . parseToXML($row['im_discription2']) . '" ';  
  82.   echo '/>';  
  83. }  
  84.   
  85. // 结束 XML 文件  
  86. echo '</markers>';  
  87.   
  88. ?>    

现在问题是，如何获取服务器发过来的 XML 数据。详细部分请看一下 javascript 函数。

view plaincopy to clipboardprint?
  1. <script language="javascript">    
  2. function saveUserInfo()    
  3. {    
  4.     //获取接受返回信息层    
  5.     var msg = document.getElementById("msg");    
  6.     
  7.     //获取表单对象和用户信息值    
  8.     var f = document.sent;    
  9.     var pg = f.pg.value;    
  10.     //var userAge   = f.user_age.value;    
  11.     //var userSex   = f.user_sex.value;    
  12.     
  13.     //接收表单的URL地址    
  14.     var url = "genxml.php";    
  15.     
  16.     //需要POST的值，把每个变量都通过&来联接    
  17.     var postStr   = "pg="+ pg;    
  18.     
  19.     //实例化Ajax    
  20.     //var ajax = InitAjax();    
  21.     
  22.     var ajax = false;    
  23.     //开始初始化XMLHttpRequest对象    
  24.     if(window.XMLHttpRequest)     
  25.     {   //Mozilla 浏览器    
  26.         ajax = new XMLHttpRequest();    
  27.         if (ajax.overrideMimeType)     
  28.         {   //设置MiME类别    
  29.             ajax.overrideMimeType("text/xml");    
  30.         }    
  31.     }    
  32.     else if (window.ActiveXObject)     
  33.     {   // IE浏览器    
  34.         try     
  35.         {    
  36.             ajax = new ActiveXObject("Msxml2.XMLHTTP");    
  37.         }     
  38.         catch (e)     
  39.         {    
  40.             try     
  41.             {    
  42.                 ajax = new ActiveXObject("Microsoft.XMLHTTP");    
  43.             }     
  44.             catch (e) {}    
  45.         }    
  46.     }    
  47.     if (!ajax)     
  48.     {   // 异常，创建对象实例失败    
  49.         window.alert("不能创建XMLHttpRequest对象实例.");    
  50.         return false;    
  51.     }    
  52.                     
  53.     //通过Post方式打开连接    
  54.     ajax.open("POST", url, true);    
  55.     
  56.     //定义传输的文件HTTP头信息    
  57.     ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    
  58.     
  59.     //发送POST数据    
  60.     ajax.send(postStr);    
  61.     
  62.     //获取执行状态    
  63.     ajax.onreadystatechange = function()     
  64.     {     
  65.         //如果执行状态成功，那么就把返回信息写到指定的层里    
  66.         if (ajax.readyState == 4 && ajax.status == 200)     
  67.         {     
  68.             msg.innerHTML = ajax.responseText;     
  69.             //load(ajax.responseText);  
  70.             //alert(ajax.responseText);  
  71.             //load('genxml.php');  
  72.             if (GBrowserIsCompatible())   
  73.             {  
  74.                 // 在一个名为map的ID中创建一个地图对象  
  75.                 map = new GMap2(document.getElementById("map"));  
  76.                 // 加载小地图  
  77.                 map.addControl(new GOverviewMapControl());   
  78.                 // 简易缩放控件  
  79.                 //map.addControl(new GSmallMapControl());  
  80.                 //加入搜索框    
  81.                 map.enableGoogleBar();    
  82.                 //加载地图类型按钮    
  83.                 map.addControl(new GMapTypeControl());  
  84.                 // 地图初始化显示整个中国版图，缩放级别  
  85.                 map.setCenter(new GLatLng(36, 103), 4);  
  86.                 // 鱼骨缩放控件  
  87.                 var customUI = map.getDefaultUI();  
  88.                     customUI.maptypes.hybrid = false;  
  89.                 map.setUI(customUI);  
  90.           
  91.                 // 创建右键菜单    
  92.                 createContextMenu(map);  
  93.               
  94.                 var xml = GXml.parse(ajax.responseText);  
  95.                 var markers = xml.documentElement.getElementsByTagName("marker");  
  96.             
  97.                 // 创建侧栏  
  98.                 var sidebar = document.getElementById('sidebar');   
  99.                 sidebar.innerHTML = '';   
  100.                 if (markers.length == 0)   
  101.                 {   
  102.                     sidebar.innerHTML = '对不起，没有符合您要求的搜索结果';   
  103.                     map.setCenter(new GLatLng(40, 100), 4);   
  104.                     return;   
  105.                 }   
  106.             
  107.                 var bounds = new GLatLngBounds();   
  108.             
  109.                 for (var i = 0; i < markers.length; i++)   
  110.                 {  
  111.                     var im_id = markers[i].getAttribute("im_id");  
  112.                     var im_name = markers[i].getAttribute("im_name");  
  113.                     var im_address = markers[i].getAttribute("im_address");  
  114.                     var im_postcode = markers[i].getAttribute("im_postcode");  
  115.                     var im_tel = markers[i].getAttribute("im_tel");  
  116.                     var im_fax = markers[i].getAttribute("im_fax");  
  117.                     var im_contactperson = markers[i].getAttribute("im_contactperson");  
  118.                     var im_email = markers[i].getAttribute("im_email");  
  119.                     var im_website = markers[i].getAttribute("im_website");  
  120.                     var im_lat = markers[i].getAttribute("im_lat");  
  121.                     var im_lng = markers[i].getAttribute("im_lng");  
  122.                     var im_logo = markers[i].getAttribute("im_logo");  
  123.                     var im_product = markers[i].getAttribute("im_product");  
  124.                     var im_discription = markers[i].getAttribute("im_discription");  
  125.                     //var type = markers[i].getAttribute("type");  
  126.                     var point = new GLatLng(parseFloat(markers[i].getAttribute("im_lat")),  
  127.                                             parseFloat(markers[i].getAttribute("im_lng")));  
  128.               
  129.                     var marker =   
  130.                         createMarker(point, im_id, im_name, im_address, im_postcode, im_tel,   
  131.                         im_fax, im_contactperson, im_email, im_website, im_lat, im_lng,   
  132.                         im_logo, im_product, im_discription, i);  
  133.                     //map.removeOverlay(marker);  
  134.                     map.addOverlay(marker);  
  135.                     // createNewMarker(point,i);  
  136.               
  137.                     var sidebarEntry = createSidebarEntry(marker, im_name, im_address, i);   
  138.                     sidebar.appendChild(sidebarEntry);   
  139.                     bounds.extend(point);   
  140.                 }  
  141.             }  
  142.     // if 结束  
  143.         }     
  144.     }     
  145. }    
  146. </script>      

关键是以下：

if (ajax.readyState == 4 && ajax.status == 200)

如果服务器响应完成，就采用以下方法执行 XML 解析。如果不知道服务器返回的结果是什么，可以用以下语句来测试。

alert(ajax.responseText);

alert() 是 JavaScript 测试的好方法。

输入输出是测试的一个关键手段，一定要用好。

本例中还需要一些 JavaScript 函数，可以在这里参照。