JavaScript Appcelerator：简单的邮政编码城市搜索器

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript Appcelerator：简单的邮政编码城市搜索器相关的知识，希望对你有一定的参考价值。

<html>
<head>
<title>Find City By ZIP Code</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>

<style type="text/css" media="screen">

	#textField{ width:100px; height:30px }	
	#search-btn{ width:100px; height:47px; color:#0000ff; }
	#response-txt{ width:300px; text-align:center; font-family:helvetica, impact, sans-serif; font-weight: bold; }
	
	.center { margin-right:auto;margin-left:auto;width:320px; }
</style>
<script type="text/javascript" charset="utf-8">
var xhr;
var xhrResponse;
var alert;

var xmlCity;
var xmlState;
var zipCode;

var tf;
var searchBtn;


	function initialize(e){
		/****************************
		Create Ajax Request
		****************************/
		xhr = Titanium.Network.createHTTPClient();

		xhrResponse = $("#response-txt");
		
		/****************************
		Create TextField
		****************************/
		
		tf  = Titanium.UI.createTextField({
			id:'textField',
			value:'90026',
			color:'#336699',
			backgroundColor:'#eeeeee',
			returnKeyType:Titanium.UI.RETURNKEY_DONE,
			enableReturnKey:true,
			keyboardType:Titanium.UI.KEYBOARD,
			autocorrect:false,
			hintText:'Enter ZIP',
			textAlign:'left',
			clearOnEdit:true,
			borderStyle:Titanium.UI.INPUT_BORDERSTYLE_BEZEL,
			clearButtonMode:Titanium.UI.INPUT_BUTTONMODE_NEVER,
		});
	
		
		$(tf).bind("change", onTfChangeHandler );
		function onTfChangeHandler(e){
			tf.value = e.value;			
		}

		/****************************
		Create Search Button
		****************************/
		searchBtn = Titanium.UI.createButton({ id:'search-btn', title:'Search' });			

		$(searchBtn).bind("click", onSearchClickHandler );
		function onSearchClickHandler(e){
			constructAndSend();			
		}
		
		/****************************
		Ajax onLoad Request
		****************************/
		xhr.onload = function()

		{
		   Titanium.API.info( "xhr.onload: " );
		   var xml = this.responseXML;
		   // xml now is a Javascript DOM object you can use
	  	   var xmlDoc = xml.documentElement;

		   try {
		   		// get a value of the first tag myelement found in XML doc
		   		xmlCity = xmlDoc.getElementsByTagName("CITY")[0].childNodes[0].nodeValue.toString();
		   		xmlState = xmlDoc.getElementsByTagName("STATE")[0].childNodes[0].nodeValue.toString();
		
		   } catch(err) {
				$(xhrResponse).html = "";
				
				constructAlert( "Zip Code Not Found. ");
		   }

		   //xhrResponse.innerHTML = zipCode + "<br>is the ZIP Code for<br>" + xmlCity + ", " + xmlState;
			$(xhrResponse).html( zipCode + "<br>is the ZIP Code for<br>" + xmlCity + ", " + xmlState );
		};
				
	}

	function constructAndSend(){
		//Capture the Zip Code
	    zipCode = $(tf).val();
			
		Titanium.API.info( "constructAndSend: " + zipCode );
	
		//Confirm that a proper Zip Code has been entered
	    if ( zipCode != null && zipCode.length == 5 ){	
			//Fire Off the Ajax Request
			xhr.open("GET","http://www.webservicex.net/uszip.asmx/GetInfoByZIP?USZip=" + zipCode);
			xhr.send(null);
		} else {
			//Show any errors
			constructAlert( "A 5-digit ZIP Code must be entered." );
		}
	}
	
	/****************************
	Create Alert Message
	****************************/
	function constructAlert( message ){
		var alert = Titanium.UI.createAlertDialog();
		    alert.setTitle("Error");
		    alert.setMessage( message );
		    alert.show();
		return;		
	}
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
	initialize();
});
</script>
<body style="background-color:#999999">

	<div id="textField" class="center"></div>
	
	<br/>
	
	<div id="search-btn"  class="center"></div>
	
	<br/><br/>
	
	<div id="response-txt"  class="center"></div>
</body>
</html>

以上是关于JavaScript Appcelerator：简单的邮政编码城市搜索器的主要内容，如果未能解决你的问题，请参考以下文章

Appcelerator Webview滚动到底部？

Appcelerator Titanium Mobile 如何工作？

使用 Titanium appcelerator 进行游戏开发

在 iOS 上替换 Appcelerator 应用程序数据库

Appcelerator Titanium 中面向 OOP 的 CommonJS

javascript中具有多个参数的obj-c方法