一个ajax简单例子

简介:

把url返回的数据,填充到指定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"/>数据加载中...<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返回的数据,填充到指定id的div中

 

服务端:

 

test.xml

 

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

 

,注意服务器返回CDATA格式数据,内部可以是任何html代码

 

 

 

目录
相关文章
|
前端开发 JavaScript 程序员
一个简单实用的AJAX例子
学习AJAX时,作了以下这个简单的AJAX例子,没用任何动态语言,完全HTML和JAVASCRIPT,至于服务器源也就小偷了一下www.cc168.com.cn(长城证券)的开放式基金每日净值查询页面。
787 0
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
87 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
153 0
|
7月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
67 0
|
7月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
58 0
|
7月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
79 0
|
7月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
7月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
92 0