Ajax学习笔记.docx
《Ajax学习笔记.docx》由会员分享，可在线阅读，更多相关《Ajax学习笔记.docx（28页珍藏版）》请在冰点文库上搜索。
Ajax学习笔记
Ajax学习笔记
1.Ajax是什么？
1.ajax（asynchronousejavascriptandxml）异步的javascriptandxml
2.ajax包含7种技术：
javascript
xml
css
xstl
dom
XMLHtmlRequest
3.ajax是一个与服务端语言无关的技术，即java、php、.net、asp都可以使用
4.ajax可以给客户端返回三种格式的数据（文本、xml、json格式）
5.无刷新数据交换技术有以下：
flash，sevlet
传统表单请求方式：
Ajax方式
Ajax运行原理分析：
经典案例：
1、使用Ajax进行用户名验证。
创建表单：
用户注册
创建Ajax引擎对象
因为IE浏览器和火狐浏览器创建Ajax引擎对象不一样，所以在创建引擎对象时要先做浏览器类型判断
//创建ajax引擎
functiongetXmlHttpObject（）{
varxmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if（window.ActivXObject）{
xmlHttpRequest=newActiveXObject（"Microsoft.XMLHTTP"）;
}else{
xmlHttpRequest=newXMLHttpRequest（）;
}
returnxmlHttpRequest;
}
将检验用户按钮绑定到一个事件
编写验证方法：
先创建一个Ajax引擎，
//验证用户名是否存在
functioncheckName（）{
varmyXmlHttpRequest=getXmlHttpObject（）;
//则么判断创建OK,如果创建成功则myXmlHttpRequest不为空，判断为真
if（myXmlHttpRequest）{
window.alert（"创建ajax成功"）;
}else{
window.alert（"创建ajax失败"）;
}
}
在判断创建成功之后，我们来处理业务逻辑
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式，"get","post"
//第二个参数指定URL，对哪个页面发出Ajax请求（本质仍然是http请求）
//第三个参数：
true表示使用异步机制
varurl="/ajax/registerProcess.php?
mytime="+newDate（）+"&username="+$（"username"）.value;
//window.alert（url）;//将url打印出来，以测试是否能获取到数据
myXmlHttpRequest.open（"get",url,true）;
//指定回调函数，待会儿反回来的数据由谁来处理？
这里的chuli是一个函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post，则将数据填入即可
myXmlHttpRequest.send（null）;
//window.alert（"创建ajax成功"）;
//}else{
//window.alert（"创建ajax失败"）;
}
编写回调函数：
//回调函数
functionchuli（）{
//window.alert（"处理函数被调回"+myXmlHttpRequest.readyState）;
if（myXmlHttpRequest.readyState==4）{
//取出值，根据返回信息的格式定.text
//window.alert（"服务器返回"+myXmlHttpRequest.responseText）;
$（'myres'）.value=myXmlHttpRequest.responseText;
}
}
编写根据ID获取ID内容方法
//这里我们自定义一个函数用来获取指定Id的内容
function$（id）{
returndocument.getElementById（id）;
}
注意：
使用get方式发出请求，如果用户提交的那个用户名不改变，浏览器会直接从缓存里取值，不会刷新请求。
解决办法
１．在ＧＥＴ参数里添加变化的值，比如当前时间：
varurl="/ajax/registerProcess.php?
mytime="+newDate（）+"&username="+$（"username"）.value;
２．告诉浏览器不要缓存
//告诉浏览器返回的数据格式是xml
header（"Content-Type:
text/xml;charset=utf-8"）;
//告诉浏览器不要缓存数据
header（"Cache-Control:
no-cache"）;
让用户在输入用户名时不停刷新验证：
| 用户名： | |
使用POST方法提交数据：
//验证用户名是否存在
functioncheckName（）{
myXmlHttpRequest=getXmlHttpObject（）;
if（myXmlHttpRequest）{
varurl="/ajax/registerProcess.php";
//这是要发送的数据
vardata="username="+$（"username"）.value;
myXmlHttpRequest.open（"post",url,true）;
//这句话必须要有
myXmlHttpRequest.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post，则将数据填入即可
myXmlHttpRequest.send（data）;
}
}
相应的处理页面中接收数据的方法也要改成$_POST方法
//接收数据
$username=$_POST['username'];
2.Ajax数据返回格式
Ajax返回的数据格式有
Text（又称html格式）
XML
JSON
Text格式上面已经示范过了，现在我们来做XML格式的；
1.Ajax处理XML格式：
注意在在处理表单的方法中一定要注意声明：
//告诉浏览器返回的数据格式是xml
header（"Content-Type:
text/xml;charset=utf-8"）;
否则可能无法获取到数据。
服务器端组织XML格式数据：
php
//告诉浏览器返回的数据格式是xml
header（"Content-Type:
text/xml;charset=utf-8"）;
//告诉浏览器不要缓存数据
header（"Cache-Control:
no-cache"）;
//接收数据
$username=$_POST['username'];
//echo"用户名是".$username;
//处理格式是XML
$info="";
if（$username=='xiaozhang'）{
$info.="对不起，用户名不可以用";//这里的数据是返回给请求页面的
}else{
$info.="恭喜，用户名可以用";
}
echo$info;
?
>
浏览器端接收数据并处理XML格式数据：
//回调函数
functionchuli（）{
//window.alert（"处理函数被调回"+myXmlHttpRequest.readyState）;
if（myXmlHttpRequest.readyState==4）{
//************************处理Text（又称html格式）************************
//取出值，根据返回信息的格式定.text
//window.alert（"服务器返回"+myXmlHttpRequest.responseText）;
//$（'myres'）.value=myXmlHttpRequest.responseText;
//***************处理XML格式数据*****************************************
//window.alert（myXmlHttpRequest.responseXML）;//返回的是一个Object
//获取msg节点
varmsg=myXmlHttpRequest.responseXML.getElementsByTagName（"msg"）;
//取出msg节点值
//window.alert（msg.length）;//检查是否收到数据
//msg[0]->表示取出第一个msg节点
//msg[0].childNods[0]->表示取出第一个msg节点的第一个子节点
varmsg_val=msg[0].childNodes[0].nodeValue;
//window.alert（msg_val）;
$（'myres'）.value=msg_val;
}
}
完整代码：
registerProcess.php
php
//告诉浏览器返回的数据格式是xml
header（"Content-Type:
text/xml;charset=utf-8"）;
//告诉浏览器不要缓存数据
header（"Cache-Control:
no-cache"）;
//接收数据
$username=$_POST['username'];
//echo"用户名是".$username;
//处理格式是XML
$info="";
if（$username=='xiaozhang'）{
$info.="对不起，用户名不可以用";//这里的数据是返回给请求页面的
}else{
$info.="恭喜，用户名可以用";
}
echo$info;
?
>
Register.php
用户注册
//创建ajax引擎
functiongetXmlHttpObject（）{
varxmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if（window.ActivXObject）{
xmlHttpRequest=newActiveXObject（"Microsoft.XMLHTTP"）;
}else{
xmlHttpRequest=newXMLHttpRequest（）;
}
returnxmlHttpRequest;
}
varmyXmlHttpRequest="";
//验证用户名是否存在
functioncheckName（）{
myXmlHttpRequest=getXmlHttpObject（）;
if（myXmlHttpRequest）{
varurl="/ajax/registerProcess.php";
//这是要发送的数据
vardata="username="+$（"username"）.value;
myXmlHttpRequest.open（"post",url,true）;
//这句话必须要有
myXmlHttpRequest.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post，则将数据填入即可
myXmlHttpRequest.send（data）;
}
}
//回调函数
functionchuli（）{
//window.alert（"处理函数被调回"+myXmlHttpRequest.readyState）;
if（myXmlHttpRequest.readyState==4）{
//************************处理Text（又称html格式）************************
//取出值，根据返回信息的格式定.text
//window.alert（"服务器返回"+myXmlHttpRequest.responseText）;
//$（'myres'）.value=myXmlHttpRequest.responseText;
//***************处理XML格式数据*****************************************
//window.alert（myXmlHttpRequest.responseXML）;//返回的是一个Object
//获取msg节点
varmsg=myXmlHttpRequest.responseXML.getElementsByTagName（"msg"）;
//取出msg节点值
//window.alert（msg.length）;//检查是否收到数据
//msg[0]->表示取出第一个msg节点
//msg[0].childNods[0]->表示取出第一个msg节点的第一个子节点
varmsg_val=msg[0].childNodes[0].nodeValue;
//window.alert（msg_val）;
$（'myres'）.value=msg_val;
}
}
//这里我们自定义一个函数用来获取指定Id的内容
function$（id）{
returndocument.getElementById（id）;
}
| 用户名： | 0;color: red"id="myres"/> |
|
| 密码： | |
| 手机： | |
| 邮箱： | |
|
2.处理json格式数据：
1.json数据格式
{属性名：
属性值，属性名：
属性值}
JSON数据是原生态数据，因此这种数据格式很稳定，而且描述能力极强，因此推荐使用这种数据格式。
php
//告诉浏览器返回的数据格式是xml
header（"Content-Type:
text/html;charset=utf-8"）;
//告诉浏览器不要缓存数据
header（"Cache-Control:
no-cache"）;
//接收数据
$username=$_POST['username'];
//echo"用户名是".$username;
//处理格式是JSON
$info="";
if（$username=='xiaozhang'）{
//$info.="对不起，用户名不可以用";//这里的数据是以XML返回给请求页面的
$info.='{"msg":
"对不起，用户名不可以用"}';//这里的数据是以JSON返回给请求页面的
}else{
//$info.="恭喜，用户名可以用";
$info.='{"msg":
"恭喜，用户名可以用"}';//这里的数据是以JSON返回给请求页面的
}
echo$info;
?
>
//回调函数
functionchuli（）{
//window.alert（"处理函数被调回"+myXmlHttpRequest.readyState）;
if（myXmlHttpRequest.readyState==4）{
//************************处理Text（又称html格式）************************
//取出值，根据返回信息的格式定.text
//window.alert（"服务器返回"+myXmlHttpRequest.responseText）;
//$（'myres'）.value=myXmlHttpRequest.responseText;
//***************处理XML格式数据*****************************************
//window.alert（myXmlHttpRequest.responseXML）;//返回的是一个Object
//获取msg节点
//varmsg=myXmlHttpRequest.responseXML.getElementsByTagName（"msg"）;
//
////取出msg节点值
////window.alert（msg.length）;//检查是否收到数据
////msg[0]->表示取出第一个msg节点
////msg[0].childNods[0]->表示取出第一个msg节点的第一个子节点
//varmsg_val=msg[0].childNodes[0].nodeValue;
////window.alert（msg_val）;
//$（'myres'）.value=msg_val;
//***************处理JSON格式数据********
升级会员 