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

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); } } } }

轉載于:https://www.cnblogs.com/wangking/p/8352155.html

總結

以上是生活随笔為你收集整理的ajax如何处理服务器返回的三种数据类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。