Ajax学习笔记-2.Ajax原理图
原理说明：
Ajax的原理简单来说是通过XMLHttpRequest对象向服务器发出异步请求，然后从服务器得到相应，结果以文本、XML、json等方式传递回来，然后通过javascript来操作DOM更新页面的局部。
原理图：
下面我再将过程中涉及到的代码做如下演示：
1.涉及到的php页面，register.php命令发出的部分，registerProcess接收数据的部分。首先先用get方式
register.php：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>用户注册</title>
<script type="text/javascript">
//创建XMLHttpRequest对象
function getXmlHttpObject(){
var xmlHttpRequest;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttpRequest=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttpRequest;
}
var myXmlHttpRequest ="";
function checkUser(){
myXmlHttpRequest = getXmlHttpObject();
if(myXmlHttpRequest){//对象存在的话
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//参数1：请求的方式get/post
//参数2：指定url，请求接受的页面，本质还是http协议
//参数3：true使用异步机制
var url="registerProcess_get.php?username="+$("username").value;
//打开一个请求
myXmlHttpRequest.open("get",url,true);
//指定回调函数
myXmlHttpRequest.onreadystatechange = dispose;
//正式发送请求,如果是get请求则填入null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send(null);
}
}
//回调函数dispose
function dispose(){
//window.alert("被调用"+myXmlHttpRequest.readyState);
//取出从registerProcess.php中返回的数据
if(myXmlHttpRequest.readyState==4){
//取出值，根据返回信息的格式而定
//window.alert(myXmlHttpRequest.responseText);
$("myres").value = myXmlHttpRequest.responseText;//将返回的值在myres中显示出来
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="???" method="post">
用户名字:<input type="text" name="username" onkeyup="checkUser();" id="username"><input type="button" onclick="checkUser();" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres">
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
<form action="???" method="post">
用户名字:<input type="text" name="username2" >
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
</body>
</html>
registerProcess.php
<?php
//限制浏览器返回的数据是xml格式
header("Content-Type:text/xml;charset=utf-8");
//限制浏览器不要缓存数据
header("Cache-Control:no-cache");
//接收数据
$username = $_GET['username'];
if($username == "GL"){
echo "用户名正确";
}else{
echo "用户名错误";
}
?>
1.涉及到的php页面，register.php命令发出的部分，registerProcess接收数据的部分。post方式
register.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>用户注册</title>
<script type="text/javascript">
//创建XMLHttpRequest对象
function getXmlHttpObject(){
var xmlHttpRequest;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttpRequest=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttpRequest;
}
var myXmlHttpRequest ="";
function checkUser(){
myXmlHttpRequest = getXmlHttpObject();
if(myXmlHttpRequest){//对象存在的话
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//参数1：请求的方式get/post
//参数2：指定url，请求接受的页面，本质还是http协议
//参数3：true使用异步机制
var url="registerProcess_post.php";
//要发送的数据
var data = "username="+$("username").value;
//打开一个请求
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post相对get额外添加的部分
//指定回调函数
myXmlHttpRequest.onreadystatechange = dispose;
//正式发送请求,如果是get请求则填入null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send(data);
}
}
//回调函数dispose
function dispose(){
//window.alert("被调用"+myXmlHttpRequest.readyState);
//取出从registerProcess.php中返回的数据
if(myXmlHttpRequest.readyState==4){
//取出值，根据返回信息的格式而定
//window.alert(myXmlHttpRequest.responseText);
$("myres").value = myXmlHttpRequest.responseText;//将返回的值在myres中显示出来
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="???" method="post">
用户名字:<input type="text" name="username" id="username"><input type="button" onclick="checkUser();" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres">
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
<form action="???" method="post">
用户名字:<input type="text" name="username2" >
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
</body>
</html>
registerProcess.php
<?php
//限制浏览器返回的数据是xml格式
header("Content-Type:text/xml;charset=utf-8");
//限制浏览器不要缓存数据
header("Cache-Control:no-cache");
//接收数据
$username = $_POST['username'];
if($username == "GL"){
echo "用户名正确";
}else{
echo "用户名错误";
}
?>
