【AJAX 總結】

我是太陽啦啦啦發表於2017-02-19

前言：

AJAX的學習，是B/S學習的又一段美麗的風景，AJAX技術是多種思想和技術的融合體，今天，小編帶大家一起走進AJAX。

核心：

 一、ajax定義：

（1）.使用XHTML和CSS的基於標準的表示技術

（2）.使用DOM進行動態顯示和互動

（3）.使用xml和xslt進行資料交換和處理

（4）.使用XMLHttpRequest進行非同步資料檢索

（5）.使用Javascript將以上技術融合在一起

二、傳統web應用VSajax方式WEB應用

三、 XMLHttpRequest的五步使用法：

1、建立XMLHttpRequest物件

2.註冊回撥函式

3.使用open方法設定和伺服器端互動的基本資訊

4.設定傳送的資料，開始和伺服器端互動

5.在回撥函式中判斷互動是否結束，響應是否正確，並根據需要獲取伺服器端返回的資料，更新頁面內容

例項：

  //1、建立XMLHttpEeauest物件
               if (window.XMLHttpRequest) {
                   //IE7  IE8 FireFox Mozillar Safari  Opera
                    xmlhttp = new XMLHttpRequest();
                   if(xmlhttp.overrideMineType){
                       xmlhttp.overrideMimeType("text/xml"); 
                   }else if(window.ActiveXObject){
                       //IE6 IE5 IE5
                       var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLTHTTP.4.0","MSXML2.XMLHTTP.3.0",
                       "MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                   for(var i=0;i< activexName.length;i++){
                       try{
                           xmlhttp=new ActiveXObject(activexName[i]);
                           break;
                       } catch(e){
                       
                       }
                   }
                   }
                   if (xmlhttp === underfined|| xmlhttp === null)  {
                          alert("當前瀏覽器不支援建立XMLHttpRequest物件，請更換瀏覽器"); 
                           return;
                       }
 //2.註冊回撥方法
               xmlhttp.onreadystatechange = callback;
               var userName = document.getElementById("UserName").value ;


 

 //3.設定和伺服器端互動的相應引數
               xmlhttp.open("GET","AJAX?name=" +userName,true);
 //POST方式互動所需要增加的相應程式碼
               xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  //4.設定伺服器傳送的資料，啟動和伺服器端的互動
               xmlhttp.send("name =" +userName);
   //5.判斷和伺服器端的互動是否完成，還要判斷伺服器端是否正確返回了資料
                if(xmlhttp.readyState ===4){
                    //表示和伺服器端的互動已經完成
                    if(xmlhttp.status === 200)
                        //表示伺服器的響應程式碼是200，正確的返回了資料
                          //純文字資料的接受方法
                         var message =xmlhttp.responseText;
                         //XML資料對應的DOM物件的接受方法
                         //使用前提，服務端需要設定content-type為text/xml
                         //var domXml =xmlhttp.resposeXML;
                         
                         //記憶向div標籤中填充文字內容的方法
                         var div = document.getElementById("message");
                         div.innerHTML = message;
                }

四、巨集觀概覽

 

總結：

腳踏實地，總結+反饋，前進的道路，加油！

相關文章