使用PHP和Ajax进行交互

在PHP开发时，经常需要和前端进行交互。为了更好的用户体验，在不少场景需要和Ajax进行交互。

Ajax是一种在无须重新加载整个网页的情况下能够更新部分网页的技术。Ajax通过在后台与服务器进行少量数据交换可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。现代浏览器都内置了可以创建Ajax的对象。

XMLHttpRequest（Internet Explorer（IE 5和IE 6）使用ActiveX对象），这样使得我们可以很方便地创建一个Ajax对象，通过浏览器发起请求来与服务端交互。你可以使用new XMLHttpRequest()创建一个对象，如果是老版本的InternetExplorer（IE 5和IE 6），使用ActiveX对象（new ActiveXObject）即可。

可以使用new XMLHttpRequest()创建一个对象，如果是老版本的Internet Explorer（IE 5和IE 6），使用ActiveX对象（new ActiveXObject）即可。

创建完毕，可使用XMLHttpRequest对象的open()和send()方法向服务器发送请求。示例如下：

open()函数的标准语法是open(method, url, async)，其规定了请求的类型method（GET或POST方法）、URL和是否异步处理（true异步，false同步）。send()包含一个参数，仅用于使用POST方法向服务端发送数据。使用POST可向服务器发送较大量的数据，并且POST方式比GET更稳定可靠，但GET方式比POST简单快捷。开发者可根据使用场景选择请求类型。Ajax指的是异步JavaScript和XML（Asynchronous JavaScriptand XML）。

XMLHttpRequest对象如果要用于Ajax，那么其open()方法的async参数就必须设置为true。对于Web开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。Ajax出现之前，这可能会引起应用程序挂起或停止。通过Ajax、JavaScript无须等待服务器的响应，而是等待服务器响应时执行其他脚本，当响应就绪后对响应再进行处理。当使用async=true后，可以规定在响应结束后执行onreadystatechange事件中的函数。responseText存储从服务端取到的数据，如下面的例子所示：

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if(window.XMLHttpRequest)
	{
		//IE 7+、Firefox、Chrome、Opera，Safari浏览器执行代码
		xmlhttp = new XMLHttpRequest();
	}
	else
	{
		//IE 6、IE 5浏览器执行代码
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if(xmlhttp.readyState == 4 && xml.status == 200)
		{
			document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","hello.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用AJAX修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>

当单击按钮修改内容时便会通过Ajax发起请求取到hello.txt里的内容在页面显示。当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时就会触发onreadystatechange事件，用户可自定义这个事件的回调函数。readyState存有XMLHttpRequest从0到4发生变化的状态。0表示请求未初始化，1表示服务器连接已经建立，2表示请求已经接收，3代表请求正在处理中，4表示请求已完成。status表示响应完成（readState为4）时此次响应的结果状态，200表示请求成功，404表示请求失败。

Ajax与服务端交互 :

在实际项目中使用Ajax与服务端交互，首先要约定传输数据使用的格式和规范，其中JSON数据格式是使用最为广泛的传输类型。一般的传输数据规范至少包含3个字段，即消息状态码（一般设置字段为status或code）、提示信息（msg）、消息体（data），当然字段的含义可由开发者根据需要自行设定。

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if(window.XMLHttpRequest)
	{
		//IE 7+、Firefox、Chrome、Opera，Safari浏览器执行代码
		xmlhttp = new XMLHttpRequest();
	}
	else
	{
		//IE 6、IE 5浏览器执行代码
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if(xmlhttp.readyState == 4 )
		{
		  var data = eval('('+xmlhttp.responseText + ')');		
		}
		if(xmlhttp.status==200)
		{
			if(data.status == 0)
			{
				document.getElementById("name").value = data['data'].name;
				document.getElementById("age").value = data['data'].age;
				document.getElementById("company").value = data['data'].agecompany;
			}else{
			 alert(data.msg);
			}
		 }else if(xmlhttp.status==404){
		    alert('服务器上未找到该文件');
		 }
		}
	}
	xmlhttp.open("GET","hello.php",true);
	xmlhttp.send();
}
</script>
</head>
<body>
姓名：<input id='name'><br/>
年龄: <input id='age'><br/>
公司: <input id='company'><br/>
<button type="button" onclick="loadXMLDoc()">查询</button>
</body>
</html>

执行上面的程序将会向info.php发起请求。info.php里的代码如下：

<?php
$success = array('statuss'=>0,'msg'=>'success','data'=>array('name=>'chenxiaolong',
'age'=>'22','company'=>'360 company'));

echo json_encode($success);

?>