1.什么是Ajax

Ajax:是Asynchronous Javascript And XML的简写,即异步JavaScriptXML

XMLHttpRequest 提供的异步,是指基于 ajax 的应用在服务器中的通信方式。

    传统的 web 应用,每次用户向服务器请求获得新数据时,浏览器都会丢弃当前页面,而等待重新加载新的页面。这样一来,在服务器完全响应之前,用户浏览器将一片空白,用户的动作必须中断。而异步指用户发送请求后,完全无需等待,请求会在后台发送,不会阻塞用户当前活动。这样一来,用户无须等待第一次请求得到完全响应,就可以发送第二次请求。借用网上一张图来说明:

wKiom1cYPO3hW8hPAACKTnBuL_g486.jpg

 

    用途:动态刷新局部数据,无需下载整个页面,从而带来更好的用户体验

    Ajax核心:是 JS 对象 XMLHttpRequest。该对象提供了异步发送请求的能力。它可以通过 JS 向服务器发送请求,处理服务器响应,避免阻塞用户动作。

2. XMLHttpRequest对象的方法与属性

  2.1XMLHttpRequest 对象方法描述

 (1)abort()停止当前请求

 (2)getAllResponseHeaders()HTTP请求的所有响应首部作为键/值对返回

 (3)getResponseHeader("header")返回指定首部的串值

 (4)open("method","URL",[asyncFlag],["userName"],["password"])建立对服务器的调用。method参数可以是GETPOSTPUTurl参数可以是相对URL或绝对URL。 这个方法还包括3个可选的参数,是否异步,用户名,密码

 (5)send(content)向服务器发送请求

 (6)setRequestHeader("header", "value")把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。 设置header并和请求一起发送 ('post'方法一定要 ).

  2.2.XMLHttpRequest 对象属性描述

    (1)onreadystatechange状态改变的事件触发器,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数. onreadystatechange 属性存有处理服务器响应的函数

xmlHttp.onreadystatechange=function()

{

//代码

        }

 (2)readyStatereadyState表示HTTP请求的运行状态,有5个可取值:

0 (未初始化) 对象已建立,但是请求尚未初始化(尚未调用open方法)

1 (初始化) 对象已建立,请求已提出,尚未调用send方法

2 (发送数据) send方法已调用,请求已经发送,但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据,请求已经处理中,因为响应及http头不全,这时通过responseBodyresponseText获取部分数据会出现错误,

           4 (完成) 数据接收完毕,请求已经完成,此时可以通过通过responseXml  responseText获取完整的回应数据

(3)responseText服务器的响应,返回数据的文本。

(4)responseXML服务器的响应,返回数据的兼容DOMXML文档对象,这个对象可以解析为一个DOM对象。

(5)responseBody 服务器返回的主题(非文本格式)

(6)responseStream服务器返回的数据流

(7)status 则表示了HTTP所请求数据的状态[常见的反馈码](如:404 = "文件末找到" 200 ="成功" ,等等)

(8)statusText服务器返回的状态文本信息 , HTTP状态码的相应文本(OKNot Found(未找到)等等)

3. 一个XHR建立一个典型的AJAX请求的四步骤:

      第一步:new 一个XHR对象

      第二步:调用open方法

      第三步:send()方法,发送一些信息

      第四步:监听onreadystatechange()事件,主要插入成功后要做的事情

具体代码:

<script>
  第一步:  // IE浏览器
   if(ActiveXObject){
         // 微软目前AJAX最新版本
        var xmlhttp = new ActiveXObject("Msxm12.XMLHTTP.6.0");
    }else{
        // 主流浏览器
        var xmlhttp = new XMLHttpRequest();
     }
    
  第二步:  // 创建HTTP请求
   // open(method, url, asynchronous, user, password);
           // method:请求方法(post,get)
           // url:请求地址(是具体要接收数据的地址)
         // asynchronous:同步或异步请求(true是异步,false是同步,默认是true,可不填)
        // user:(指定请求用户名,可不填)
        // password:(指定请求密码,可不填)

     xmlhttp.open('get','url');   //open()方法并不会真正发送请求,而只是启动一个请求以备发送。
 第三步: // 如果用的是post方式请求,要在send之前设置HTTP头
  xmlhttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
   send(content);
    // 发送请求,content是要发送的内容,一般post方式需要发送内容写在send的参数里,如果没有则填null,send()方法接收一个参数,是向请求主体发送的数据,如果不需要向请求体发送数据,则参数就为null,调用send()后,请求就会被分派到服务器。  
 
   第四步:xmlhttp.onreadystatechange = function(){
    if((xmlhttp.readyState==4) && (xmlhttp.status)==200){
      alert(xmlhttp.responseText); // 返回的数据内容
    }else{
      alert('请求失败');
    }
}
</script>

4. Ajax运行机制

    首先创建一个xmlHttpRequest的对象之后xmlHttp.readyState的值是0了,然后xmlHttp.onreadystatechange = handlestatechange没有运行。紧接着是open(),这个函数发生了之后xmlHttp.readyState的值是1了,那么就会有一个断点在open()函数处断开,保留现场,紧接着又返回到xmlHttp.onreadystatechange = handlestatechange运行,然后再执行Send()函数,这个函数发生了之后xmlHttp.readyState的值是2了,接着又返回到xmlHttp.onreadystatechange = handlestatechange运行。

  异步的ajax实际上使用了单独的进程,因此你无法获取到这个返回值,而且,在你调用ajax()方法时你根本无法知道它什么时候会执行完毕。因此,只能提供回调方法ajax对象可以将参数传递到你提供的回调方法中

5.实例:  //验证表单中的用户名是否已经存在

function checkName(){
     var namevalue=ele.name.value;        
         if(namevalue==""){
          ele.imgs[0].setAttribute("width","30px");
          ele.imgs[0].setAttribute("height","30px");
          ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标
          ele.imgs[0].style.display = "inline"; //显示   
          biaoqian1.innerHTML='<strong>用户名不能为空</strong>';
                    return false;
                }
          else{
          //这个是使用get方式向后台传递数据的参数写在url后面,使用时间戳或随机数来确保无缓存的请求数据.
                 var url='http://localhost/chkname.php?username='+namevalue+'&'+'t='+new Date()*1;
             //使用post方式的url
               // var url='http://localhost/chkname.php';
                  var cb = ajaxResultdeal;  //处理响应信息的回调函数     
                  toAjax(url,cb)
          }
        
 
 
  }
function toAjax(url,callback){  
             var namevalue=ele.name.value;          
             xmlhttp=new XMLHttpRequest();          
             xmlhttp.onreadystatechange =function(){
            if(xmlhttp.readyState == 4){
               if(xmlhttp.status == 200){
                  if(callback) {
                               callback(xmlhttp.responseText);
                      
                            }
               }
      }
}
         //发送数据,开始与服务器进行交互  
        //post发送请求  是因为PHP中的$_POST['key']方法,需要用到键值对的格式,
因此必须申明请求头部:setRequestHeader('Content-Type','application/x-www-form-urlencoded') 以表单提交数据的方式来发送数据到服务器。
       xmlhttp.open('POST',url,true);     
       xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");       xmlhttp.send("username="+namevalue);
   //get发送请求
        /*xmlhttp.open('GET',url,true);
          xmlhttp.send(null);*/
}
 
 
var ajaxResult = false;//全局变量
//处理响应的回调函数
function ajaxResultdeal(response){
    ajaxResult = response; //传递给全局变量             
    if(ajaxResult == '1'){
             ele.imgs[0].setAttribute("width","30px");
            ele.imgs[0].setAttribute("height","30px");
            ele.imgs[0].setAttribute("src","img/right.jpg"); //对应图标
            ele.imgs[0].style.display = "inline"; //显示
           biaoqian1.innerHTML="";
          ajaxResult= true;
 
  }
      else{
 
       ele.imgs[0].setAttribute("width","30px");
       ele.imgs[0].setAttribute("height","30px");
       ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标
      ele.imgs[0].style.display = "inline"; //显示   
        biaoqian1.innerHTML='<strong>该用户名已经存在</strong>';     
      ajaxResult=false;
   

}

ajaxResultreturn(); //用这个函数来返回表单中的name项,返回真还是假,用于提交表单前的验证函数。

   
 
}
function ajaxResultreturn(){
if(ajaxResult){return true;}
else{
return false;
}
}
后台php,为了简单,没有从数据库取得数据,只是简单判断,页面对post,获得get 的请求的获得:
     /*$username=$_POST['username'];*/ //已post提交的获得方式,
     $username=$_GET['username'];//以get提交的获得方式
     if($username=="11"){
       $reback = '1';
   echo $reback;
   }

输入用户名为11时,页面实时返回效果图如:

  wKiom1cYOpqDhdWpAAAQ-47lhDs565.jpg

输入其他用户名,则页面实时返回效果图:

wKiom1cYO1-SWaYhAAAdOWx3gOQ796.jpg

    

5.总结

  ajax的实现了:

1、页面无刷新,在页面内与服务器通信,给用户的体验非常好。

2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。

自己根据基本知识,写了简单的注册,使用ajax技术判断用户名是否已经存在,分别使用了post方式,get方式,来进行传送,后期需要完善的,学习使用Json编码请求,以及学习跨源资源共享。