简明现代魔法 -> 软件项目 -> 学会测试，用Ajax实现各种动态功能

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

2010-01-26

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

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

解决方案如下所述：

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

<form name="sent" method="post" action="">  
输入页码： <input type="text" height="20" name="pg" />  
<input type="button" value="Go" onClick="saveUserInfo()">  
</form>      

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

<?php
require("dbinfo.php");
require("library/Common.php");

if(isset($_POST['pg']))
{
	$pg = $_POST['pg'];
}
else
{
	$pg = 1;
}

// 连接到 MySQL 服务器
$connection=mysql_connect ($host, $username, $password);
if (!$connection) 
{
  die('Not connected : ' . mysql_error());
}

// 设置活动的 MySQL 数据库
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) 
{
  die ('Can\'t use db : ' . mysql_error());
}

$num = PageNumber::$PAGENUM;
$result_1 = $num * ($pg - 1);
$result_2 = $num;

// 从数据表industrymap获取所有数据
$query = "select * from industrymap order by money desc limit $result_1, $result_2 ";
$result = mysql_query($query);
if (!$result) 
{
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

function parseToXML($htmlStr) 
{ 
	$xmlStr=str_replace('<','<',$htmlStr); 
	$xmlStr=str_replace('>','>',$xmlStr); 
	$xmlStr=str_replace('"','"',$xmlStr); 
	$xmlStr=str_replace("'",''',$xmlStr); 
	$xmlStr=str_replace("&",'&',$xmlStr); 
	return $xmlStr; 
} 

// 开始生成 XML 文件，输出父节点
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'im_id="' . parseToXML($row['im_id']) . '" ';
  echo 'im_name="' . parseToXML($row['im_name']) . '" ';
  echo 'im_name2="' . parseToXML($row['im_name2']) . '" ';
  echo 'im_tel="' . parseToXML($row['im_tel']) . '" ';
  echo 'im_fax="' . parseToXML($row['im_fax']) . '" ';
  echo 'im_contactperson="' . parseToXML($row['im_contactperson']) . '" ';
  echo 'im_contactperson2="' . parseToXML($row['im_contactperson2']) . '" ';
  echo 'im_email="' . parseToXML($row['im_email']) . '" ';
  echo 'im_address="' . parseToXML($row['im_address']) . '" ';
  echo 'im_address2="' . parseToXML($row['im_address2']) . '" ';
  echo 'im_province="' . parseToXML($row['im_province']) . '" ';
  echo 'im_province2="' . parseToXML($row['im_province2']) . '" ';
  echo 'im_city="' . parseToXML($row['im_city']) . '" ';
  echo 'im_city2="' . parseToXML($row['im_city2']) . '" ';
  echo 'im_postcode="' . parseToXML($row['im_postcode']) . '" ';
  echo 'im_website="' . parseToXML($row['im_website']) . '" ';
  echo 'im_lat="' . $row['im_lat'] . '" ';
  echo 'im_lng="' . $row['im_lng'] . '" ';
  echo 'im_logo="' . parseToXML($row['im_logo']) . '" ';
  echo 'im_product="' . parseToXML($row['im_product']) . '" ';
  echo 'im_product2="' . parseToXML($row['im_product2']) . '" ';
  echo 'im_discription="' . parseToXML($row['im_discription']) . '" ';
  echo 'im_discription2="' . parseToXML($row['im_discription2']) . '" ';
  echo '/>';
}

// 结束 XML 文件
echo '</markers>';

?>  

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

<script language="javascript">  
function saveUserInfo()  
{  
    //获取接受返回信息层  
    var msg = document.getElementById("msg");  
  
    //获取表单对象和用户信息值  
    var f = document.sent;  
    var pg = f.pg.value;  
    //var userAge   = f.user_age.value;  
    //var userSex   = f.user_sex.value;  
  
    //接收表单的URL地址  
    var url = "genxml.php";  
  
    //需要POST的值，把每个变量都通过&来联接  
    var postStr   = "pg="+ pg;  
  
    //实例化Ajax  
    //var ajax = InitAjax();  
  
    var ajax = false;  
    //开始初始化XMLHttpRequest对象  
    if(window.XMLHttpRequest)   
    {   //Mozilla 浏览器  
        ajax = new XMLHttpRequest();  
        if (ajax.overrideMimeType)   
        {   //设置MiME类别  
            ajax.overrideMimeType("text/xml");  
        }  
    }  
    else if (window.ActiveXObject)   
    {   // IE浏览器  
        try   
        {  
            ajax = new ActiveXObject("Msxml2.XMLHTTP");  
        }   
        catch (e)   
        {  
            try   
            {  
                ajax = new ActiveXObject("Microsoft.XMLHTTP");  
            }   
            catch (e) {}  
        }  
    }  
    if (!ajax)   
    {   // 异常，创建对象实例失败  
        window.alert("不能创建XMLHttpRequest对象实例.");  
        return false;  
    }  
                  
    //通过Post方式打开连接  
    ajax.open("POST", url, true);  
  
    //定义传输的文件HTTP头信息  
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
  
    //发送POST数据  
    ajax.send(postStr);  
  
    //获取执行状态  
    ajax.onreadystatechange = function()   
    {   
        //如果执行状态成功，那么就把返回信息写到指定的层里  
        if (ajax.readyState == 4 && ajax.status == 200)   
        {   
            msg.innerHTML = ajax.responseText;   
			//load(ajax.responseText);
			//alert(ajax.responseText);
			//load('genxml.php');
			if (GBrowserIsCompatible()) 
			{
				// 在一个名为map的ID中创建一个地图对象
				map = new GMap2(document.getElementById("map"));
				// 加载小地图
				map.addControl(new GOverviewMapControl()); 
				// 简易缩放控件
				//map.addControl(new GSmallMapControl());
				//加入搜索框  
				map.enableGoogleBar();  
				//加载地图类型按钮  
        		map.addControl(new GMapTypeControl());
				// 地图初始化显示整个中国版图，缩放级别
        		map.setCenter(new GLatLng(36, 103), 4);
				// 鱼骨缩放控件
				var customUI = map.getDefaultUI();
			 		customUI.maptypes.hybrid = false;
       			map.setUI(customUI);
		
				// 创建右键菜单  
        		createContextMenu(map);
			
				var xml = GXml.parse(ajax.responseText);
				var markers = xml.documentElement.getElementsByTagName("marker");
		  
		    	// 创建侧栏
		  		var sidebar = document.getElementById('sidebar'); 
       			sidebar.innerHTML = ''; 
       			if (markers.length == 0) 
				{ 
         			sidebar.innerHTML = '对不起，没有符合您要求的搜索结果'; 
         			map.setCenter(new GLatLng(40, 100), 4); 
         			return; 
       			} 
		  
		  		var bounds = new GLatLngBounds(); 
		  
          		for (var i = 0; i < markers.length; i++) 
				{
					var im_id = markers[i].getAttribute("im_id");
            		var im_name = markers[i].getAttribute("im_name");
            		var im_address = markers[i].getAttribute("im_address");
					var im_postcode = markers[i].getAttribute("im_postcode");
					var im_tel = markers[i].getAttribute("im_tel");
					var im_fax = markers[i].getAttribute("im_fax");
					var im_contactperson = markers[i].getAttribute("im_contactperson");
					var im_email = markers[i].getAttribute("im_email");
					var im_website = markers[i].getAttribute("im_website");
					var im_lat = markers[i].getAttribute("im_lat");
					var im_lng = markers[i].getAttribute("im_lng");
					var im_logo = markers[i].getAttribute("im_logo");
					var im_product = markers[i].getAttribute("im_product");
					var im_discription = markers[i].getAttribute("im_discription");
            		//var type = markers[i].getAttribute("type");
            		var point = new GLatLng(parseFloat(markers[i].getAttribute("im_lat")),
											parseFloat(markers[i].getAttribute("im_lng")));
			
            		var marker = 
                    	createMarker(point, im_id, im_name, im_address, im_postcode, im_tel, 
                        im_fax, im_contactperson, im_email, im_website, im_lat, im_lng, 
                        im_logo, im_product, im_discription, i);
					//map.removeOverlay(marker);
            		map.addOverlay(marker);
					// createNewMarker(point,i);
			
					var sidebarEntry = createSidebarEntry(marker, im_name, im_address, i); 
         			sidebar.appendChild(sidebarEntry); 
         			bounds.extend(point); 
          		}
			}
	// if 结束
        }   
    }   
}  
</script>    

关键是以下：

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

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

alert(ajax.responseText);

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

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

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