PHP Ajax 入门HelloWorld

浅谈ajax

ajax 是 asynchronous javascript and xml（以及 dhtml 等）的缩写。

它由 html+js+dom组成，本教程暂时不涉及dom。

同步的概念：页面提交post表单，是不是整个页面都在等待服务器返回（呈空白状态），然后刷新？没错，这就是同步。

异步的概念：表单提交后，页面的其它部分照常用。

ajax 就是 页面和服务器之间的小三，作为一段js代码，它把页面的提交信息截获，然后处理后提交给服务器，然后监听服务器返回信息，然后再回馈给页面。

要用它需要一个句柄：xmlhttp = new xmlhttprequest();

我们正是基于这个对象扮演小三这个角色。

参照下注释就能理解ajax流程：

1.生成xmlhttprequest对象

2.建立要跳转的url

3.打开服务器conn

4,.设置服务器完成操作后要执行的函数

5.send ajax

6.结束后待执行函数要不断监听（机制不需要我们实现）

哎，从圣马家沟男子职业技术学院出来的我，没啥文化，以上就是自己粗浅的理解。

要看高大上的：掌握 ajax，第 1 部分: ajax 入门简介

实际操作

在wamp/www/中新建一个testajax文件夹，里面两个文件：index.html 和 getzipcode.php

index.html

test ajax in php...




<script language="javascript" type="text/javascript">
//创建一个xmlhttprequest句柄
var xmlhttp = false;
if (!xmlhttp && typeof xmlhttprequest != 'undefined') {
  xmlhttp = new xmlhttprequest();
}

function callserver(){
	//截获表单 get value
	var city = document.getelementbyid("city").value;
	if(city == null || city == "") return;
	//建立url，获取邮政编码
	var url = "/testajax/getzipcode.php?city="+escape(city);
	//打开conn,true表示异步
	xmlhttp.open("get",url,true);
	//设定完成代码后执行的函数
	xmlhttp.onreadystatechange = updatepage;
	//发送ajax，因为是get方式，不需要附带数据
	xmlhttp.send(null);
}

//这个方法监听和处理响应
function updatepage(){
	//什么也不要做，直到 xmlhttp.readystate 属性的值等于 4
	if(xmlhttp.readystate == 4){
		var response = xmlhttp.responsetext;
		document.getelementbyid("zipcode").value = response;
	}
}

</script>


	
city: 
	
zip code: 
	

getzipcode.php

";
	}else{
		$city = $_get["city"];
		if($city != null && $city != ""){
			echo $city."_010";
		}else{
			echo "city is null?";
		}
	}
?>

实际结果：

无论我的city输入什么，下面的邮政编码，都会加一个“_010”，实时的。

吐槽：zipcode是邮政编码的意思（英语都是体育老师教的）。