DIV CSS 佈局教程網

其原理很簡單，結構上基本不變，只是改變處理返回數據的方式.

1.Text/HTML格式
這種返回類型處理很簡單，直接就當作字符串用就行了.為了方便使用，封裝成如下函數:

/**
 * @function 利用ajax動態交換數據(Text/HTML格式)
 * @param url  要提交請求的頁面
 * @param jsonData 要提交的數據,利用Json傳遞
 * @param getMsg 這個函數可以獲取到處理後的數據
 */
function ajaxText(url,jsonData,getMsg)
{
  //創建Ajax對象,ActiveXObject兼容IE5,6
  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
  //打開請求
  oAjax.open('POST',url,true);//方法,URL,異步傳輸
  //發送請求
  var data = '';
  for(var d in jsonData)  //拼裝數據
    data += (d + '=' +jsonData[d]+'&');
  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  oAjax.send(data);
  //接收返回,當服務器有東西返回時觸發
  oAjax.onreadystatechange = function ()
  {
    if(oAjax.readyState == 4 && oAjax.status == 200)
    {
      if(getMsg) getMsg(oAjax.responseText);
    }
  }
}

服務器端返回數據格式如下:
例如:

//返回的是xml格式
//header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
header("Content-Type:text/html;charset=utf-8");
//禁用緩存,是為了數據一樣的前提下還能正常提交，而不是緩存數據
header("Cache-Control:no-cache");
$username = $_POST['username']; //獲取用戶名
if(empty($username))
  echo '請輸入用戶名';
else if($username == 'acme')
  echo '用戶名已被注冊';
else
  echo '用戶名可用';

調用格式如下:

url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
 //do something
}

2.XML格式

返回的是一個XML DOM對象，解析其中的數據就類似於HTML DOM 編程. 比如通過name獲取標簽對象(數組形式)，再從該數組中獲取需要的標簽對象，再從標簽對象中獲取文本值.
函數如下:

/**
 * @function 利用ajax動態交換數據(XML格式)
 * @param url  要提交請求的頁面
 * @param jsonData 要提交的數據,利用Json傳遞
 * @param tagName 要獲取值的標簽名
 * @param getMsg 這個函數可以獲取到處理後的數據
 */
function ajaxXML(url,jsonData,tagName,getMsg)
{
  //創建Ajax對象,ActiveXObject兼容IE5,6
  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
  //打開請求
  oAjax.open('POST',url,true);//方法,URL,異步傳輸
  //發送請求
  var data = '';
  for(var d in jsonData)  //拼裝數據
    data += (d + '=' +jsonData[d] + '&');
  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  oAjax.send(data);
  //接收返回,當服務器有東西返回時觸發
  oAjax.onreadystatechange = function ()
  {
    if(oAjax.readyState == 4 && oAjax.status == 200)
    {
      var oXml = oAjax.responseXML; //返回的是一個XML DOM對象
      var oTag = oXml.getElementsByTagName(tagName);
      var tagValue = oTag[0].childNodes[0].nodeValue;
      if(getMsg)getMsg(tagValue);
    }
  }
}

服務器端返回數據格式如下:
例如:

//返回的是xml格式
header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
//header("Content-Type:text/html;charset=utf-8");
//禁用緩存,是為了數據一樣的前提下還能正常提交，而不是緩存數據
header("Cache-Control:no-cache");
$username = $_POST['username']; //獲取用戶名
if(empty($username))
  echo '<user><mes>請輸入用戶名</mes></user>'; //這些標簽可以自定義
else if($username == 'acme')
  echo '<user><mes>用戶名已被注冊</mes></user>';
else
  echo '<user><mes>用戶名可用</mes></user>';

調用格式如下:

var url = 'abc.php';
var jsonData = {username:'acme'};
ajaxXML(url,jsonData,'mes',getMsg);
function getMsg(msg)
 {
   //do something
 }

3.返回json

函數如下：

/**
 * @function 利用ajax動態交換數據(Text/HTML格式)，但是返回的是Json類型的文本數據
 * @param url  要提交請求的頁面
 * @param jsonData 要提交的數據,利用Json傳遞
 * @param getMsg 這個函數可以獲取到處理後的數據
 */
function ajaxJson(url,jsonData,getMsg)
{
  //創建Ajax對象,ActiveXObject兼容IE5,6
  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
  //打開請求
  oAjax.open('POST',url,true);//方法,URL,異步傳輸
  //發送請求
  var data = '';
  for(var d in jsonData)  //拼裝數據
    data += (d + '=' +jsonData[d] + '&');
  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  oAjax.send(data);
  //接收返回,當服務器有東西返回時觸發
  oAjax.onreadystatechange = function ()
  {
    if(oAjax.readyState == 4 && oAjax.status == 200)
    {
      var json = eval('('+oAjax.responseText+')');//把傳回來的字符串解析成json對象
      if(getMsg)getMsg(json);
    }
  }
}

服務器端返回數據格式如下:

例如:

//返回的是xml格式
//header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
header("Content-Type:text/html;charset=utf-8");
//禁用緩存,是為了數據一樣的前提下還能正常提交，而不是緩存數據
header("Cache-Control:no-cache");
$username = $_POST['username']; //獲取用戶名
if(empty($username))
  echo '{"mes":"請輸入用戶名"}';
else if($username == 'acme')
  echo '{"mes":"用戶名已被注冊"}';
else
  echo '{"mes":"用戶名可用"}';

調用格式如下:

url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
 //do something
}

為了方便使用，可以把三個函數合並.合並後的函數如下:

/**
 * @function 利用ajax動態交換數據
 * @param url  要提交請求的頁面
 * @param jsonData 要提交的數據,利用Json傳遞
 * @param getMsg 這個函數可以獲取到處理後的數據
 * @param type  接受的數據類型,text/xml/json
 * @param tagName type = xml 的時候這個參數設置為要獲取的文本的標簽名
 * @return 無
 */
function ajax(url,jsonData,getMsg,type,tagName)
{
  //創建Ajax對象,ActiveXObject兼容IE5,6
  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
  //打開請求
  oAjax.open('POST',url,true);//方法,URL,異步傳輸
  //發送請求
  var data = '';
  for(var d in jsonData)  //拼裝數據
    data += (d + '=' +jsonData[d]+'&');
  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  oAjax.send(data);
  //接收返回,當服務器有東西返回時觸發
  oAjax.onreadystatechange = function ()
  {
    if(oAjax.readyState == 4 && oAjax.status == 200)
    {
      if(type == 'text')
      {
        if(getMsg) getMsg(oAjax.responseText);
      }
      else if(type == 'json')
      {
        var json = eval('('+oAjax.responseText+')');//把傳回來的字符串解析成json對象
        if(getMsg)getMsg(json);
      }
      else if(type == 'xml')
      {
        var oXml = oAjax.responseXML; //返回的是一個XML DOM對象
        var oTag = oXml.getElementsByTagName(tagName);
        var tagValue = oTag[0].childNodes[0].nodeValue;
        if(getMsg)getMsg(tagValue);
      }

    }
  }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。