ajax经典案例—无刷新验证用户名(GET)

编写过程分为四步：1、创建ajax对象2、连接服务器，发送请求3、服务器处理4、接受返回值。

一、创建ajax对象

1. function $(id){
2. return document.getElementById(id);
3. }
5. function getXHR(){
6. var oAjax;
7. if(window.XMLHttpRequest){
8. //IE7+, Firefox, Chrome, Opera, Safari
9. oAjax=newXMLHttpRequest();
10. }
11. else{
12. oAjax=newActiveXObject("Microsoft.XMLHTTP")
13. }// code for IE6, IE5
14. return oAjax;
15. }

二、连接服务器，发送请求

1. var url='/checkName.php?time='+newDate()+'&name='+$('username').value;
2. xhr.open('GET',url,true);
3. xhr.send(null);

1. //open(get,url,true)
2. //第一个参数：数据传输方式 get post
3. //第二个参数：处理文件 xx.php xx.txt ,要数据：直接写路径就好；提交数据：在地址那里写数据（get方式）
4. //第三个参数：同步或者异步方式，默认是异步true

1. //send() 如果是get方式，写null或者为空
2. //如果是post，参数那就直接写要传输的内容

三、服务器处理

1. <?php
3. //3号线：获取ajax传来的信息，做处理，再返回给ajax：后台做，或者后台协作
4. $userName=$_GET['name'];
6. if($userName=='admin'){//把内容拿到，进行判断，输出信息返回给ajax
7. echo'该用户名不能使用';
8. }
10. else{
11. echo'该用户名能使用';
12. }
14. ?>

四、接受返回值。

1. xhr.onreadystatechange=function(){
2. //alert('现在的状态是：'+xhr.readyState);
3. if(xhr.readyState==4){
4. //alert(xhr.responseText);
5. $('inf').innerHTML=xhr.responseText;
6. }
9. }

IE的缓存解决方法有两种：1、在URL上添加动态的数据，如时间轴new Date() 2、服务端写代码，禁止缓存 header("Cache-Control: no-cache");。

1. xhr.onreadystatechange=function(){
2. //alert('现在的状态是：'+xhr.readyState);
3. if(xhr.readyState==4){
4. //alert(xhr.responseText);
5. $('inf').innerHTML=xhr.responseText;
6. }
9. }