ajax入門教程之XMLHttpRequest與$.ajax使用說明

對於Ajax，最核心的一個對象是XMLHttpRequest，所有的Ajax操作都離不開對這個對象的操作。
建立XMLHttpRequest對象
對於IE瀏覽器：

代碼如下	複製代碼
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');

對於其他瀏覽器：

代碼如下	複製代碼
xmlHttp = new XMLHttpRequest();

不同的瀏覽器對javascript中的XMLHttpRequest對象的支援是不一樣的，所以需要根據情況做一下判斷。

XMLHttpRequest對象相關方法
 
開啟請求

XMLHttpRequest.open(傳遞方式,地址,是否非同步請求)

準備就緒執行

XMLHttpRequest.onreadystatechange

擷取執行結果

XMLHttpRequest.responseText

一個簡單的php+Ajax的例子：
首先是test.js檔案：

代碼如下

複製代碼

var xmlHttp; function S_xmlhttprequest(){  if(window.ActiveXObject){   xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');  }else if(window.XMLHttpRequest){   xmlHttp=new XMLHttpRequest();  } } function php100(url){  S_xmlhttprequest();  xmlHttp.open("GET","do.php?id="+url,true);  xmlHttp.onreadystatechange=byphp;  xmlHttp.send(null); } function byphp(){  var byphp100=xmlHttp.responseText;  document.getElementById('php100').innerHTML=byphp100; }

然後是執行php操作的檔案，do.php

代碼如下	複製代碼
<?PHP $id=@$_GET[id]; for($i=1;$i<10;$i++){  echo $id; }

然後是最上層顯示頁面，test.html

代碼如下	複製代碼
<script src="test.js" type="text/javascript"></script> <a href="#" onClick="php100(1)">1</a> || <a href="#" onClick="php100(2)">2</a> || <a href="#" onClick="php100(3)">3</a> <div id="php100"></div>

 jQuery ajax中資料以索引值對（Key/Value）的形式發送到伺服器，使用ajax提交表單資料時可以使用jQuery ajax的serialize() 方法表單序列化為索引值對（key1=value1&key2=value2…）後提交。serialize() 方法使用標準的 URL-encoded 編碼錶示文本字串。下面是使用serialize()序列化表單的執行個體：

jQuery ajax原型：

代碼如下	複製代碼
$.ajax({    type: "POST",    url: ajaxCallUrl,    data: "Key=Value&Key2=Value2",    success: function(msg){alert(msg);}  });

ajax serialize():

代碼如下	複製代碼
$.ajax({          type: "POST",          url:ajaxCallUrl,          data:$('#formID').serialize(),// 要提交的表單          success: function(msg) {alert(msg);}      });

serialize()序列化表單一實例：

 

代碼如下

複製代碼

<script type="text/javascript" src="/demo/jquery/jquery-1.7.2.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){    $("#button").click(function(){      alert($("#myForm").serialize());    }); }); </script> <form id="myForm">     姓名 <input value="liming" name="Name" /><br />     職位 <input value="CEO" name="position" /><br />         <input id="button" value="序列化表單" type="button" /> </form> 14 </form>

姓名
職位 
 
提示

個人更推薦大家做jquery ajax哦，這個不介相容好並且有各種函數支援如load,post,get,getjson,getscript都可以快速實現ajax載入了。