AJAX

一.js中AJAX的原理及步骤

1.创建AJAX对象

varxhr=null;//创建一个AJAX对象
if(window.XMLHttpRequest){//不能直接判断XMLHttpRequest,如果不存在会报错，判断一个对象的属性，如果不存在，也不会报错
xhr=newXMLHttpRequest();//标准浏览器
}else{
xhr=newActiveXObject('Microsoft.XMLHTTP');//兼容IE6
}

//第一种方式
functioncreateXhr(){
varxhr=null;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject('Microsoft.XMLHTTP');
}
returnxhr;
}

//第二种方式
functioncreateXhr(){
varxhr=null;
try{
xhr=newXMLHttpRequest();
}catch(e){
xhr=newActiveXObject('Microsoft.XMLHTTP');
}
returnxhr;
}

2.设置请求方式，请求地址，是否异步或同步请求；

3.发送数据进行AJAX请求；

GET方式请求与发送

xhr.open("GET","server.php?username=xiaopeng&age=9");//get方式的数据放置在url？后面进行发送
xhr.send();

xhr.open('post','server.php');//默认异步方式，可以不写
xhr.setRequestHeader('content-type‘,'application/x-www-form-urlencoded');//POST方式需要申明发送的数据类型
xhr,send('username=xiaopeng&age=9');//传输的数据通过send()方法发送

4.根据服务器返回状态码进行处理；

xhr.onreadystatechange=function(){//当请求状态改变的时候，触发事件
if(xhr.readyState===4){//AJAX工作状态为4时,表示请求完成
if(xhr.status===200){//http状态码为200时，表示服务器工作成功
alert(xhr.responseText);
}else{
alert("发生错误："+request.status);
}
}
}

小实例：注册时检测用户名是否存在

//JavaScript代码
//绑定失去焦点事件
varoUser=document.getElementById("username");
oUser.onblur=function(){
//获取用户名
varusername=oUser.value;
//生成URL
varurl='demo.php?username='+username;
//创建AJAX对象
varxhr=createXhr();
//初始化对象
xhr.open('get',url);
//设置回调函数，可以设置在send()之前
xhr.onreadystatechange=function(){
//当状态码为4，响应状态码为200时
if(xhr.readyState==4&&xhr.status==200){
//判断服务器返回情况
if(xhr.responseText==1){//这里根据后台设置接口判断
document.getElementById("result").innerHTML='该用户名已被占用';
}else{
document.getElementById("result").innerHTML='该用户名可以使用';
}
};
}
　　　　　　//发送AJAX请求；
xhr.send();

}

//php代码
//查询用户名是否存在
//获取数据
$username=$_GET['username'];
//连接数据库
mysql_connect('localhost','root','1234');
//选择数据库
mysql_select_db('db_201404');
//设置字符编码
mysql_query('setnamesutf8');
//查询语句
$sql="select*fromadminwhereusername='$username'";
$result=mysql_query($sql);
//受影响行数
$count=mysql_num_rows($result);
//关闭数据库
mysql_close();
if($count>0){
echo1;//表示存在
}else{
echo2;//表示不存在
}