首頁 >web前端 >js教程 >ajax具體怎麼使用的? ajax所使用的四步驟解析(附實例)

ajax具體怎麼使用的? ajax所使用的四步驟解析(附實例)

寻∝梦
寻∝梦原創
2018-09-10 13:57:562216瀏覽

這篇文章主要的介紹了關於ajax使用的四個步驟,想看的同學趕緊看過來,現在我們就開始閱讀本篇文章吧

# 1.第一步(得到XMLHttpRequest)

*ajax其實只需要學習一個物件:XMLHttpRequest,如果掌握了它就掌握了AJAX

#* 得到XMLHttpRequest

    >大多數瀏覽器都支援:var  xmlHttp=new  XMLHttpRequest();

##    >IE6.0支援:var  xmlHttp=new  ActiveXObject("Msxml2.XMLHTTP");

    >IE5.5及更早版本的IE支援:

var  xmlHttp=new  ActiveXObject("Microsoft.XMLHTTP");

*寫出建立 XMLHttpRequest 的函數

 function createXMLHttpRequest() {
           try{
                    return  new  XMLHttpRequest();
           }catch{
                    try{
                            return
  new  ActiveXObject("Msxml2.XMLHTTP");
                    }catch{ 
                               try{
                                        return  newActiveXObject("Microsoft.XMLHTTP");
                             }catch{
                                  alert("怎么可能,你用的啥浏览器。。。")
                                   throw   e;
                             }
                    }
           }
}

#2.第二步(開啟與伺服器的連線)

################################*xmlHttp.open();用來開啟與伺服器的連接,需要三個參數;################################################ #########      >請求方式:GET或POST###################################################################################################### ###############      >請求的網址:指定伺服器端資源,例如:/專案/action################# ##############################      >請求是否為非同步:如果為True表示傳送非同步請求,否則為同步請求; ##############################*###xmlHttp.open("GET","###/專案/action ###",true);######(想看更多就到PHP中文網###AJAX開發手冊###欄位學習)############3 .第三步 (發送請求)##################*###xmlHttp.send(null); 如果括號裡不給null可能會造成部分瀏覽器無法寄;########################     >參數:就是請求體的內容,如果是GET請求,必須給予null###### ##################4.第四步  ########################*在# ##xmlHttp物件的一個事件上註冊監聽器:onredaystatechange###############################*###xmlHttp物件一共有5個狀態:####################################     >0狀態:剛創建,還沒有呼叫open()方法;##################

     >1状态:请求开始,调用了open()方法,但还没有调用send()方法;

     >2状态:调用完了send()方法;

     >3状态:服务器已经开始响应,但不表示响应结束;

     >4状态:服务器响应结束!(我们通常只关注这个状态!!!)

*得到xmlHttp对象的状态;

      >var  state  =xmlHttp.redayState;  //可能是0、1、2、3、4

*得到服务器的响应状态码

      >var  state  =xmlHttp.status; //例如为200、404、500

*得到服务器的响应内容

>var  content = xmlHttp.responseText; //得到服务器响应的文本格式内容;
 
     >var  content = xmlHttp.responseXML; //得到服务器响应的xml内容,它是Document对象;
 
 xmlHttp.onredaystatechange=function() { //5种状态都会调用本方法;
 
          if(xmlHttp.redayState==4 && xmlHttp.status==200){  //双重判断,缺一不可
               
 //获取服务器的响应内容
 
                 var  text = xmlHttp.responseText;
 
          }
 };

本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。

以上是ajax具體怎麼使用的? ajax所使用的四步驟解析(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn