ajax调用简单实例

 更新时间:2015年12月14日 12:35:46   作者:5iasp  
这篇文章主要介绍了ajax调用简单实例,结合实例形式分析了基于ajax调用讲URL返回数据填充到指定div的功能,需要的朋友可以参考下

本文实例讲述了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代码

希望本文所述对大家ajax程序设计有所帮助。

相关文章

  • 比getjson好的底层函数是哪个有什么优点

    比getjson好的底层函数是哪个有什么优点

    比getjson好的底层函数优点在于如果网络出问题了,可以通过error方法来告诉用户出错,需要的朋友可以参考下
    2014-02-02
  • 如何解决ajax在google chrome浏览器上失效

    如何解决ajax在google chrome浏览器上失效

    今天闲着没事做个一个ajax小练习,困扰了我很长时间,我写的ajax代码在ie、360、火狐浏览器上运行都是正常的,而在google chrome下无法正常运行,搞的我焦头烂额,最终找到解决办法,在此分享给大家,帮助那些遇到和我一样问题的朋友
    2015-10-10
  • Ajax实现模拟关键字智能匹配搜索效果

    Ajax实现模拟关键字智能匹配搜索效果

    这篇文章主要介绍了Ajax实现模拟关键字智能匹配搜索效果,当在搜索框输入内容时,根据关键字匹配,显示弹出层,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • Ajax与mysql数据交互制作留言板功能(全)

    Ajax与mysql数据交互制作留言板功能(全)

    这篇文章主要为大家详细介绍了Ajax与mysql数据交互,实现留言板功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jquery的ajax同步和异步的理解及示例

    jquery的ajax同步和异步的理解及示例

    最近的项目用了到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载
    2014-04-04
  • Ajax的使用四大步骤

    Ajax的使用四大步骤

    ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。接下来通过本文给大家介绍Ajax的使用四大步骤,非常不错,感兴趣的朋友看下吧
    2016-07-07
  • ajax加载页面服务器返回 304 not modified

    ajax加载页面服务器返回 304 not modified

    服务器都返回 304 not modified 说明在服务器上,你这个xml文件没有修改过,或者要加载的页面在本地没有被修改,本地缓存造成了这个问题
    2014-04-04
  • ajax跨域访问报错501的解决方法

    ajax跨域访问报错501的解决方法

    这篇文章主要为大家详细介绍了ajax跨域访问报错501的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 聊一聊Ajax的优缺点

    聊一聊Ajax的优缺点

    和大家一起聊一聊Ajax的优缺点,Ajax是一个动态的WEB应用的开发技术,它的出现丰富了用户的体验,今天就和大家进一步的了解Ajax,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 关于Ajax异步请求后台数据进行动态分页功能

    关于Ajax异步请求后台数据进行动态分页功能

    这篇文章主要介绍了Ajax异步请求后台数据进行动态分页功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2018-06-06

最新评论