ajax入門 不要畏懼 很簡單 進了門一切都好學多了

第一千行程式碼發表於2017-04-28

 以前總是聽別人說ajax是多麼的好，然後自己就去借了本書看，哇塞感覺好難哦，什麼介紹JavaScript,html,css，還有很多一些東西。看的那個難啊，然後就是硬著頭皮把它給看完了，但是就是缺少了一步最關鍵的步驟，執行它。理解它的原理。瞭解它的機制。去感覺它，觸控它。

    現在拿了一個例項自己去練習了一下，發現，嗯，可以感覺到它的存在了。可以觸控到了。好開心啊，還有那些很複雜的介紹知識我現在明白了，它們都是用來幹什麼的了。

    忽然發現原來有些東西，你是需要提前去體驗它，感知它，這樣才會有目標性，有興趣，有動力的去學習。也明白了一些語言或者技術都喜歡用hello world的例項了，就是要讓你去體驗一下。

    那麼下面就是體驗ajax的例項了，

 

    別急先來了解原理，不知道原理，再經典的例子也調動不了你的興奮神經


---------------------------------------------------------------------------------------------------------------------------------

什麼是Ajax：Ajax（Asynchronous Javascrpt And Xml）是一種運用於瀏覽器的技術，它可以在瀏覽器與伺服器之間使用非同步通訊機制進行資料通訊，從而允許瀏覽器向伺服器獲取少量資訊而不是重新整理整個頁面。Ajax並不是一種新的技術，或者說它不是一種技術，它只是多種技術的綜合：Javascript、Html、Css、Dom、Xml、XMLHttpRequest等技術按照一定的方式在協作中發揮各自的作用就構成了Ajax。

Javascript,Html,Css這些都是一個WEB程式設計人員必備的知識，這裡就不再介紹了，下面著重介紹一下XMLHttpRequest。可以說XMLHttpRequest是Ajax技術的一個核心，沒有它Ajax無從運作。

XMLHttpRequest：XMLHttpRequest是XMLHttp元件的一個物件，使用XMLHttpRequest可以實現瀏覽器端與伺服器端進行非同步通訊。通過HttpRequest物件，Web應用程式無需重新整理頁面就可以向伺服器提交資訊，然後得到伺服器端的返回資訊。

如何使用XMLHttpRequest物件：使用XMLHttpRequest首先要先建立XMLHttpRequest物件。請看一個例子

Copy code

<script type="text/javascript">
function createXmlHttp(){
        if(window.ActiveXObject){
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                //alert("IE XmlHttp");
        }
        else if(window.XMLHttpRequest){
                xmlHttp=new XMLHttpRequest();
                //alert("Other XmlHttp");
        }
}
</script>



這是一個相容三大瀏覽器的建立XMLHttpRequest方法。

XMLHttpRequest的屬性介紹： (常用的屬性)

  (1). readyState：返回當前XMLHttp請求的狀態，有5種：

      狀態：0 ：請求未初始化；
          狀態：1 ：請求已經建立；
          狀態：2 ：請求已經傳送；
          狀態：3 ：請求處理中；
          狀態：4 ：響應已經完成。

  (2). onreadystatechange：readyState狀態改變的事件觸發器，用來指定當readyState發生變化時的處理事件。
  (3). responseText：將響應資訊以字串的形式返回。
  (4). responseXML：將響應資訊格式化為XML文件的形式返回。
  (5). status：當前Http請求的狀態，下面列幾個重要的，經常用到的狀態。

        狀態值：200 ：交易成功；
        狀態值：404 ：沒有發現檔案、查詢或URI；
        狀態值：500 ：伺服器產生內部的錯誤；

XMLHttpRequest的方法：(常用的方法)

  (1). open(string method,string url,boolean asynch,string username,string password)方法將建立一個新的Http請求。

    method（請求方法）：GET,POST和PUT(一般不用);
          url為：請求的地址
    asynch：可選引數，用來指定此請求是同步還是非同步方式，預設為trun(非同步)；
        username,password：可選引數，伺服器需要驗證時用的，一般不用（插一句：俺沒用過，嘿嘿……)。

(2). send(content)方法用來向伺服器傳送具體的請求,如果沒有內容要傳送，content省略或為null。

介紹了這麼多了，有人一定會說有用嗎?到底Ajax怎麼用？這才是我們最關心的一件事？

往下看 ↓↓↓

對了，容我再說一句費話：一個不懂上面內容的程式設計師說自己是一個Ajax高手無異於打腫了臉充胖子。

     ajax+coldfusion

 

//as.cfm

<html>
<head>
<title>ajax例項</title>
<script type="text/javascript">
function createXmlHttp(){
    if(window.ActiveXObject){
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest){
                xmlHttp=new XMLHttpRequest();
        }       
}

function sendAjax(strUrl){
        createXmlHttp();
        xmlHttp.open("GET",strUrl,true);
    xmlHttp.onreadystatechange=process;
        xmlHttp.send(null);
}

function process(){
        if (xmlHttp.readyState==4){
                if(xmlHttp.status==200){
                        alert(xmlHttp.responseText);
                }
        }
}

function call_back(){
var love=document.getElementById("love").value;
var url="aas.cfm?love="+love;
sendAjax(url);
}
</script>
</head>
<body>
<center>
<form name="f1">
愛好：<input type="text" name="love" id="love" />
<input type="button" name="submit" value="提交" onClick="call_back()" />
</form>
</center>
</body>
</html>

 

 

//aas.cfm

<html>
 <head>
 <title>ajax 2</title>
</head>
 <body>
  <cfoutput>
   #FORM.Love#
  </cfoutput>
 </body>
</html>

相關文章