快捷導(dǎo)航

ajax調(diào)用簡單實例

更新時間：2015年12月14日 12:35:46 作者：5iasp

這篇文章主要介紹了ajax調(diào)用簡單實例,結(jié)合實例形式分析了基于ajax調(diào)用講URL返回數(shù)據(jù)填充到指定div的功能,需要的朋友可以參考下

本文實例講述了ajax調(diào)用的方法。分享給大家供大家參考，具體如下：

把url返回的數(shù)據(jù),填充到指定id的div中

客戶端: test.html

<script>
function createXMLHttp()
{
  var ret = null;
  try {
    ret = new ActiveXObject('Msxml2.XMLHTTP');
  }
  catch (e) {
    try {
      ret = new ActiveXObject('Microsoft.XMLHTTP');
    }
    catch (ee) {
      ret = null;
    }
  }
  if (!ret && typeof XMLHttpRequest != 'undefined')
    ret = new XMLHttpRequest();
  return ret;
}
function loadXmlToElement(fragment_url, element_id)
{
 var element = document.getElementById(element_id);
 element.innerHTML ='<img src="loading.gif" border="0"/>數(shù)據(jù)加載中...<br/>';
 var xmlhttp = createXMLHttp();
 xmlhttp.open("GET", fragment_url);
 xmlhttp.onreadystatechange = function() 
 {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
 {
  //alert(xmlhttp.responseXML.getElementsByTagName("data")[0].childNodes[0].nodeValue);
  element.innerHTML =
unescape(xmlhttp.responseXML.getElementsByTagName("data")[0].childNodes[0].nodeValue);
  if(!element.innerHTML || element.innerHTML == "/n")
  {
  try{
   element.innerHTML = unescape(xmlhttp.responseXML.firstChild.childNodes[1].nodeValue);
  }catch(e){}
  }
 }
 }
 xmlhttp.send(null); 
}
</script>
<div id="data">
</div>
<script>
 var url="t.xml";
 //alert(url);
 loadXmlToElement(url,"data");
</script>

把url返回的數(shù)據(jù),填充到指定id的div中

服務(wù)端:

test.xml

<?xml version='1.0' encoding='utf-8' ?>
<data>
<![CDATA[ 
this is a test
]]>
</data>

注意服務(wù)器返回CDATA格式數(shù)據(jù),內(nèi)部可以是任何html代碼

希望本文所述對大家ajax程序設(shè)計有所幫助。

您可能感興趣的文章:

ajax

相關(guān)文章

Ajax xmlHttpRequest的status的值的含義
雖然常寫ajax方面的東西，但是很少去專門了解xmlHttpRequest的status各個值的含義，今天在開發(fā)的過程中又遇到了問題，查過資料后，將他人已總結(jié)過的轉(zhuǎn)載一下，學(xué)習(xí)學(xué)習(xí)。
2010-03-03
ajax調(diào)用簡單實例
這篇文章主要介紹了ajax調(diào)用簡單實例,結(jié)合實例形式分析了基于ajax調(diào)用講URL返回數(shù)據(jù)填充到指定div的功能,需要的朋友可以參考下
2015-12-12
如何使用ajax讀取Json中的數(shù)據(jù)
這篇文章主要介紹了如何使用ajax讀取Json中的數(shù)據(jù)，如何使用AJAX讀取Json數(shù)組里面的數(shù)據(jù)，感興趣的小伙伴們可以參考一下
2016-04-04
ajax實現(xiàn)遠程通信
這篇文章主要介紹了ajax實現(xiàn)遠程通信的相關(guān)資料，感興趣的小伙伴們可以參考一下
2016-07-07
基于HTML5 Ajax文件上傳進度條如何實現(xiàn)（jquery版本）
本文給大家介紹基于html5 ajax文件上傳進度條是如何實現(xiàn)的，涉及到html5新增加的formdata對象的使用，對html5文件上傳進度條感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
反向Ajax 30分鐘快速掌握
這篇文章主要介紹了反向Ajax 30分鐘快速掌握的相關(guān)資料,需要的朋友可以參考下
2016-07-07
ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)
這篇文章主要介紹了ThinkPHP5 通過ajax插入圖片并實時顯示功能，本文給大家分享網(wǎng)站代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-12-12
使用ajax和history.pushState無刷新改變頁面URL示例
這篇文章主要介紹了使用ajax和history.pushState無刷新改變頁面URL示例,需要的朋友可以參考下
2014-10-10
探秘ajax跨域請求
本文講解的是怎么利用ajax實現(xiàn)跨域請求，那么知道“同源策略”，就可以解決很多疑問：“為毛我的ajax加載不了數(shù)據(jù)！”“為毛瀏覽器控制臺會對我如此漂亮的代碼報錯！”這就是我們今天要主要探討的內(nèi)容了。
2015-03-03
jquery ajax實現(xiàn)批量刪除具體思路及代碼
回調(diào)函數(shù)，在請求完成后需要進行的操作：此處是把選中的checkbox去掉，接下來為大家詳細介紹下，感興趣的朋友可以參考下哈，希望對你有所幫助
2013-04-04