1、ajax的概念
ajax在2005年推出,到至今一直被广泛的是使用,ajax不是语言,而是一门能不需要重新加载页面,能够部分更新页面的一种强大的技术,它包含了七中技术分别是javascript、xml、xstl、xhtml、css、dom、xmlhttprequest、相当于以一种粘合剂。
现在ajax被用于页面上的例子:新浪的博客、谷歌上的地图、瀑布流、各大银行的股票动向等等。
2、ajax的优点
ajax能在页面上广泛的使用,当然是尤其的好处优点的地方。
(1)、不需要刷新得到动态数据(银行网页的股票)
(2)、界面美观,给用户的体验好
(3)、对数据库的操作
(4)、部分刷新页面
(5)、返回类型多:字符串、json、xml、html
3、ajax的运用
例子:无刷新用户名的验证
(1)、创建ajax的xmlhttprequest对象
xmlhttprequest对象存在兼容性的问题,所以需要对ajax的xmlhttprequest对象要进行兼容处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
function $(id){
return document.getElementById(id);
}
/*1.创建ajax对象*/
function getxml(){
var oAjax;
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest();//对主流浏览器的兼容:谷歌、火狐、欧鹏、IE7//
}
else{
oAjax=new ActiveXObject('Microsoft.XMLHTTP');//对IE7以下的版本进行处理//
}
return oAjax;
}
}
</script>
</head>
<body>
<form action="checkName.php" method="get">
用户名:<input type="text" name="" id="usename" value="" /><input type="button" name="bnt" id="bnt" value="验证" /><span id="inf"></span><br />
密码:<input type="password" id="pw"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
(2)、链接服务器
$('bnt').onclick=function(){
var xhr=getxml();//申明变量xhr装着getxml()后台返回的数据经过处理,进行dom的节点插入
var url='/checkName.php?time='+new Date()+'&name='+$('usename').value;//路径,解决缓存使用时间戳,没刷新一次路劲都不一样
xhr.open('GET',url,true);//链接服务器,使用get方式传输数据,上次是使用get获取数据,第一个参数是获取或传输数据的方式,第二个是处理文件的路径,第三个同步或异步,默认情况下是true。
xhr.send(null);//get方式发送请求send()里面写null或空。如果是post方式,那send()里面要传输的内容
}
}
}
(4)、请求状态
xhr.onreadystatechange=function(){//请求状态
if(xhr.readyState==4){//当返回的数据的状态是4时
if(xhr.status==200){//其的状态码是200解析完成时
$('inf').innerHTML=xhr.responseText;//将其的返回来的数据插入span标签里面
}