一日精通Ajax技術

2024-09-05 20:53:57

字體：大中小

來源：轉載

供稿：網友

　　ajax這個名稱怎么來的，本人也不得而之了，大概是（active javascript action xml）吧，說白一點就是運用了 javascript、xmlhttp和xmldom技術及網站后臺來處理用戶的一些操作的方法吧。

　　那么本人就分三步來說明如何使用 ajax 技術來做開發。

　　一、用 javascript 操作 xmlhttp 對象

　　二、服務器部對xmlhttp請求的響應（php范例）

　　三、xmldom 的使用方法

　　先說第一部份：

　　一、用 javascript 操作 xmlhttp 對象

　　ie7, mozilla ,firefox等瀏覽器中，javascript是內置有 xmlhttprequest 這個對象的，但ie5+則沒有，需要用如下方法來啟動：
//ie 6
try{ xhttp = new activexobject("msxml2.xmlhttp";} catch(e){ ; }
//ie5+
if(xhttp == null) try { xhttp = new activexobject("microsoft.xmlhttp";} catch(e){ ; }

　　那考慮不同瀏覽器的兼容，啟動一個xmlhttp一般都要按如下方式：

code:[copy to clipboard]var xhttp = null;

if(window.xmlhttprequest){ //ie7, mozilla ,firefox 等瀏覽器內置該對象

xhttp = new xmlhttprequest();

}else if(window.activexobject){ //ie6、ie5

try{ xhttp = new activexobject("msxml2.xmlhttp");} catch (e){ ; }

if( xhttp == null) try { xhttp = new activexobject("microsoft.xmlhttp");} catch (e){; }

}

　　對于 xmlhttp 的使用，一般遵守如下的順序：

　　1、初始化 xmlhttp 對象（上文）；

　　2、打開鏈接

　　方法

xhttp.open("get", purl, true);

　　參數一：用 get 或 post 方式發送數據

　　參數二、請求網址（只能請求你服務器上的資源，一般瀏覽器安全限制不能讀取跨域的數據）

　　參數三、true 表示異步傳輸（服務器返回信息完成前，你可以進行其它操作），false 表示阻斷方式的傳輸。

　　3、設定要發送的 http 請求頭

　　方法：

xhttp.setrequestheader(key,value);

　　一般來說，默認要發送的頭是：xhttp.setrequestheader("content-type","application/x-www-form-urlencoded";

　　這種表示發送的內容類型的請求頭用于發送文本數據，而且javascript默認是以unicode發送的，還有另外一種形式是：xhttp.setrequestheader("content-type","multipart/form-data";這表示發送二制形式的數據，由于安全性原因，javascript一般不能用這種方式來發送數據，所以這個頭一般沒什么用。

　　如果你的網站開啟了使用 refer 參數來防盜鏈，那么你必須用這個方法指定 refer 參數，或者如果用戶需要登錄才能進行某操作，那么要指定 cookie 的請求頭。

　　4、send 數據

　　方法：xhttp.send(postdata);

　　對于用 get攻手請求，不需要指定postdata，直接用 test.php?a=a&b=b 這樣形式的網址來請求即可。

　　如果是post方式，需要用 key1=value2&key2=value2 這樣的形式來對數據進行處理，把它合并在 postdata 字串中，然后發送。

　　注意事項：

　　javascript默認發送數據的方式是unicode，處理返回的數據必須是utf-8格式，因此，在發送的時候，需要用escape()函數來處理postdata和網址的value，在服務器上必須還原這些value，并把unicode轉為頁面編碼值，因此如果用 jsp 或 asp.net 都會比較簡單，但如果用php處理起來是什么費勁的，等下會教你如何做。

　　5、確認服務器返回資料完成下載

　　[1] 如果用阻斷的方式來發送請求，那么直接用 if(xhttp.readystate == 4)就能判斷是否完成。

readystate 的具體屬性值為：
0 沒open
1 沒send
2 狀態未知
3 正在傳送
4 傳送完成

　　當然為了保障起見，還需要加多一重判斷，就是 if(xhttp.status == 200) ，status 就是 http 協議里的返回頭代碼

1xx 表示（唉呀，忘記了）
2xx 表示成功的信息
3xx 表示頁面轉移
4xx 頁面不存在
5xx 表示服務器的各種錯誤

　　如果你的頁面沒特殊處理，一般用 if(xhttp.status == 200) 來確信內容返回是正確的

　　[2] 如果用異步傳輸，需要用 onreadystatechange 的事件來監聽

xhttp.onreadystatechange = function()
{
   //這里來進行上面阻斷方式的判斷
   if(myajax.xhttp.readystate == 4){
                if(myajax.xhttp.status == 200){
                  //要進行的后續操作
                }
        }
}

　　6、獲取返回結果

屬性：
[1]xhttp.responsebody;
[2]xhttp.responsestream;
[3]xhttp.responsexml;
[4]xhttp.responsetext;

　　其中1、2都是二進制的方式，一般很少會用到，4不用看都知道了

　　如果服務端無意外的話[3]返回的是一個xmldom的對象

　　二、服務器部對xmlhttp請求的響應（php范例）

　　為了簡化操作，在這里把 xmlhttp的各作操作封裝為一個類

　　code:[copy to clipboard]function dedeajax(witeokfunc){ //witeokfunc 為異步狀態事件處理函數

//xmlhttp和xmldom對象
this.xhttp = null;
this.xdom = null;

//post或get發送數據的鍵值對
this.keys = array();
this.values = array();
this.keycount = -1;

//http請求頭
this.rkeys = array();
this.rvalues = array();
this.rkeycount = -1;
//請求頭類型
this.rtype = 'text';

//初始化xmlhttp
if(window.xmlhttprequest){//ie7, mozilla ,firefox 等瀏覽器內置該對象
     this.xhttp = new xmlhttprequest();
}else if(window.activexobject){//ie6、ie5
     try { this.xhttp = new activexobject("msxml2.xmlhttp");} catch (e) { }
     if (this.xhttp == null) try { this.xhttp = new activexobject("microsoft.xmlhttp");} catch (e) { }
}
this.xhttp.onreadystatechange = witeokfunc;
//rs: responsebody、responsestream、responsexml、responsetext

//以下為成員函數
//--------------------------------

//初始化xmldom
this.initxdom = function(){
var obj = null;
if (typeof(domparser) != "undefined") { // gecko、mozilla、firefox
    var parser = new domparser();
    obj = parser.parsefromstring(xmltext, "text/xml");
} else { // ie
    try { obj = new activexobject("msxml2.domdocument");} catch (e) { }
    if (obj == null) try { obj = new activexobject("microsoft.xmldom"); } catch (e) { }
}
this.xdom = obj;
};

//增加一個post或get鍵值對
this.addkey = function(skey,svalue){
        this.keycount++;
        this.keys[this.keycount] = skey;
        this.values[this.keycount] = escape(svalue);
};

//增加一個http請求頭鍵值對
this.addhead = function(skey,svalue){
        this.rkeycount++;
        this.rkeys[this.rkeycount] = skey;
        this.rvalues[this.rkeycount] = svalue;
};

//清除當前對象的哈希表參數
this.clearset = function(){
        this.keycount = -1;
        this.keys = array();
        this.values = array();
        this.rkeycount = -1;
        this.rkeys = array();
        this.rvalues = array();
};

//發送http請求頭
this.sendhead = function(){
        if(this.rkeycount!=-1){ //發送用戶自行設定的請求頭
          for(;i<=this.rkeycount;i++){
                  this.xhttp.setrequestheader(this.rkeys[i],this.rvalues[i]);
          }
}
　if(this.rtype=='binary'){
          this.xhttp.setrequestheader("content-type","multipart/form-data");
}else{
          this.xhttp.setrequestheader("content-type","application/x-www-form-urlencoded");
}
};

//用post方式發送數據
this.sendpost = function(purl){
        var pdata = "";
        var i=0;
        this.state = 0;
        this.xhttp.open("post", purl, true);
        this.sendhead();
if(this.keycount!=-1){ //post數據
          for(;i<=this.keycount;i++){
                  if(pdata=="") pdata = this.keys[i]+'='+this.values[i];
                  else pdata += "&"+this.keys[i]+'='+this.values[i];
          }
}
this.xhttp.send(pdata);
};

//用get方式發送數據
this.sendget = function(purl){
        var gkey = "";
        var i=0;
        this.state = 0;
        if(this.keycount!=-1){ //get參數
          for(;i<=this.keycount;i++){
                  if(gkey=="") gkey = this.keys[i]+'='+this.values[i];
                  else gkey += "&"+this.keys[i]+'='+this.values[i];
          }
          if(purl.indexof('?')==-1) purl = purl + '?' + gkey;
          else purl = purl + '&' + gkey;
}
        this.xhttp.open("get", purl, true);
        this.sendhead();
this.xhttp.send();
};

} // end class dedeajax
上面代碼保存為： dedeajax.js

ok 那現在做個最簡單的測試吧
test.htm

code:[copy to clipboard]<script language='javascript' src='dedeajax.js'></script>
<script language='javascript'>
function witeok()
{
   var myinfo = document.getelementbyid("myinfo");
    if(myajax.xhttp.readystate == 4){
        if(myajax.xhttp.status == 200){
            myinfo.innerhtml = myajax.xhttp.responsetext;
        }
    }
}
var myajax = new dedeajax(witeok);
myajax.addkey("key1","----------------------------");
myajax.sendpost("test.php");

</script>

<div id='myinfo'><div>
test.php

code:[copy to clipboard]<?
header("content-type: text/html; charset=gb2312");
echo $_post['key1'];
?>
看到了什么了呢？不用激動，真正讓你頭痛的東西還沒有出來。

把類里面的

code:[copy to clipboard]this.addkey = function(skey,svalue){
   this.keycount++;
   this.keys[this.keycount] = skey;
   this.values[this.keycount] = svalue;//escape(svalue);
};
escape 屏蔽掉

發送
myajax.addkey("key1","-----中---國----人-----";

看到什么了，亂碼是吧？呵呵，這回開始頭大了

先把 escape放回去
this.values[this.keycount] = escape(svalue);

那么看到的就是
-----%u4e2d---%u56fd----%u4eba-----

如何把 %u4e2d 這些東西弄回來呢？對于php而言這是一個很復雜的問題，如果用asp就簡單多了

下面是我寫的一個函數：

code:[copy to clipboard]//unicode url編碼轉gbk編碼函數
function unicode2gbk($str)
{
        //載入對照詞典
        if(!isset($globals['gbkunidic']))
        {
          $ds = file("./data/gbk_unicode.dic");
          foreach($ds as $l){
                  $globals['gbkunidic'][hexdec('0x'.substr($l,0,4))] = substr($l,5,4);
          }
}
//處理字符串
$glen = strlen($str);
$okstr = "";
for($i=0; $i < $glen; $i++)
{
           if( $glen-$i > 4){
                    if($str[$i]=='%' && $str[$i+1]=='u'){
                              $uni = hexdec('0x'.substr($str,$i+2,4));
                              if(isset($globals['gbkunidic'][$uni])){
                                      $uni = $globals['gbkunidic'][$uni];
                                      $okstr .= chr(hexdec(substr($uni,0,2))).chr(hexdec(substr($uni,2,2)));
                              }
                              else $okstr .= "&#{".hexdec("0x".$uni).";";
                              $i = $i+5;
                    }
                    else $okstr .= $str[$i];
           }
           else $okstr .= $str[$i];
}
return $okstr;
}
詞典文件： http://www.ce86.com/myimg/data.rar

把test.php 輸出改為

echo unicode2gbk($_post['key1']);

正常了吧

以下說下面和xml有關的東西的了

　　三、xmldom 的使用方法
　　
　　由于本文僅是牽針引線的作用，這一章就簡單些，因為針對的是 php ，如果針對的是 asp.net 或 jsp 寫涉及 web server 類的通信，已經不單純是 ajax 的問題了，本章的任務是把test2.php

code:[copy to clipboard]<?
header("content-type: text/xml; charset=gb2312");
echo '<'.'?'."xml version=/"1.0/" encoding=/"gb2312/" ".'?'.">
<myhome>
<item sex=/"男/">我是小一</item>
<item sex=/"女/">我是小二</item>
</myhome>
";
?>這個xml文檔在客戶端用自己的方式展現出來。因為xml這種東西比較麻煩，所以語法也必須嚴格，test2.htm的頁面的源碼為

code:[copy to clipboard]<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>ajax測試</title>
</head>
<body >
<script language='javascript' src='dedeajax.js'></script>
<script language='javascript'>
var myajax = new dedeajax(witeok);
function witeok()
{
   var myinfo = document.getelementbyid("myinfo");
   var mydom = null;
   myinfo.innerhtml = "以下是處理結果：<br/>";
   if(myajax.xhttp.readystate == 4){
     mydom = myajax.xhttp.responsexml;
     alert(mydom);
   }
}
function witeloaddocument()
{
   myajax.sendget("test2.php");
}
</script>
<div id='myinfo'><div>
</body>
</html>
在ie中測試一下，如果彈出的對話框是 [object] 就表示成功獲得返回的xml的xmldoc了。

那下面是處理：

code:[copy to clipboard]function witeok()
{
   var myinfo = document.getelementbyid("myinfo");
   var mydom = null;
   myinfo.innerhtml = "以下是處理結果：<br/>";
   if(myajax.xhttp.readystate == 4){
     mydom = myajax.xhttp.responsexml;
     var nodelist = mydom.selectnodes("/myhome/item");
     var mynode = null;
     var myatt = null;
     var mysex = "";
     for(i=1;i<=nodelist.length;i++)
     {
              mynode = nodelist[i-1];
              for(j=0;j < myinfo.attributes.length;j++)
              {
                       if(!mynode.attributes[j]) break;
                       myatt = mynode.attributes[j];
                       if(myatt.name=='sex') mysex = myatt.value;
              }
              myinfo.innerhtml += "我是："+mynode.text+"，我的性別是："+ mysex +"<br/>";
     }
   }
}