ajax_option.html

时间:2022-05-06
本文章向大家介绍ajax_option.html,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>ajax_option.html</title>
		<script type="text/javascript">
			function getText(value){
				var xmlhttp;
				if(value == ""){
					document.getElementById("showText").innerHTML = "The choice is null.";
				}
				//新建一个请求对象
				if(window.XMLHttpRequest){
					xmlhttp = new XMLHttpRequest();
				}else{
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function(){
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
						document.getElementById("showText").innerHTML = xmlhttp.responseText;
					}
				}
				xmlhttp.open("GET","/testfile/option_php.php?str="+value,true);
				xmlhttp.send();
			}
		</script>
	</head>
	<body>
		<div>
			<input type="button" onchang="getText(this.value)" value="click it">
			<form action="">
				<label>Please chose a company
					<select onchange="getText(this.value)">
						<option value="choice">choice</option>
						<option value="baidu">baidu</option>
						<option value="google">google</option>
						<option value="tecent">tecent</option>
					</select>
				</label>
			</form>
			<div id="showText"></div>
		</div>
	</body>
</html>