Ajax技术原理
Ajax基本原理是在web浏览器使用javascript程序与服务器进行通信，传递数据。javascript相对用户来说就是完成数据的验证，响应用户的请求和服务器异步传输数据。javascript使用XMLHttpRequest与服务器通信。一个典型的Ajax应用工作流程如下
1.Javascript程序创建一个XMLHttpRequest对象
2.使用XMLHttpRequest对象向服务器发送HTTP请求
3.服务器响应请求并给客户端返回信息
4.客户端Javascript程序在收到回馈之后使用DOM等接口向用户呈现
(1).XMLHTTPRequest对象
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。
XMLHttpRequest 对象方法描述
| 方 法 | 描 述 |
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
| getResponseHeader("header") | 返回指定首部的串值 |
| open("method","URL",[asyncFlag],["userName"],["password"]) | 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码 |
| send(content) | 向服务器发送请求 |
| setRequestHeader("header", "value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 ) |
XMLHttpRequest 对象属性描述
| 属 性 | 描 述 |
| onreadystatechange | 状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数 |
| readyState | 请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成 |
| responseText | 服务器的响应，返回数据的文本。 |
| responseXML | 服务器的响应，返回数据的兼容DOM的XML文档对象 ，这个对象可以解析为一个DOM对象。 |
| responseBody | 服务器返回的主题（非文本格式） |
| responseStream | 服务器返回的数据流 |
| status | 服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等） |
| statusText | 服务器返回的状态文本信息 ，HTTP状态码的相应文本（OK或Not Found（未找到）等等） |
创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
（2）向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","url",true);
xmlhttp.send();
（3）响应事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务。通过onreadystatechange 属性来设定事件。
http_request.onreadystatechange = alertContents; //指定alertContents作为响应事件
实例：检查注册用户名是否被占用
checkname.html文件
<body>
<script>
var http_request = false; //开启异步请求
function createRequest(url)
{
http_request = false;
//判断浏览器类型创建XMLHttpRequest请求
if (window.XMLHttpRequest) { http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if(!http_request)
{
alert("不能创建XMLHTTP实例");
return false;
}
http_request.onreadystatechange = alertContents; //指定响应方法
http_request.open("GET", url, true); //设定发送请求方式，目标，类型
http_request.send(null);
}
function alertContents() //响应函数 处理服务器返回的信息
{
if(http_request.readyState == 4){ //结合返回的readyState和status状态判断
if(http_request.status == 200){
alert(http_request.responseText); //接受响应信息
}else{
alert("你请求的页面有错误！");
}
}
}
function checkName(){
var username = form1.username.value;
if(username==""){
window.alert("请填写用户名");
form1.username.focus();
return false;
}else{ //请求地址必须添加清除缓存的代码
createRequest('checkname.php?username='+username+'&nocache='+new Date().getTime());
}
}
</script>
<form name="form1" method="post" action="">
<tr>
<td width="29%" height="30" align="center">用 户 名：</td>
<td width="71%" height="24"><input name="username" type="text" id="username" size="20">
<a href="#" onClick="checkName();">[检测用户名]</a> </td>
</tr>
</form>
</body>
处理文件checkname.php
<?php
header('Content-type: text/html;charset=GB2312'); //指定发送数据的编码格式为GB2312
$link=mysql_connect("localhost","root","root"); //连接数据库
mysql_select_db("db_database23",$link);
$GB2312string=iconv( 'UTF-8', 'gb2312//IGNORE' , $RequestAjaxString); //Ajax中先用encodeURIComponent对要提交的中文进行编码
mysql_query("set names gb2312");
$username=$_GET[username];
$sql=mysql_query("select * from tb_user where name='".$username."'"); //查询结果
$info=mysql_fetch_array($sql);
if ($info){
echo "很报歉!用户名[".$username."]已经被注册!";
}else{
echo "祝贺您!用户名[".$username."]没有被注册!";
}
?>