Ajax Frist

最新推荐文章于 2025-08-12 15:10:50 发布

原创最新推荐文章于 2025-08-12 15:10:50 发布 · 411 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #浏览器 #function #eclipse #tomcat

本文介绍了一个简单的Ajax应用实例，演示了如何通过JavaScript发起异步请求获取XML数据，并展示了具体的HTML和JavaScript代码。该教程适用于初学者了解Ajax的基本工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.学习Ajax的第一个例子

步骤:

1.利用Eclipse3.2建立动态Web工程.

2.建立一个页面index.html; simpleResponse.xml 内容如下:

code 1.index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript">

var xmlhttp;

function createHttpRequest()
{
if(window.ActiveObject)
{
  xmlhttp=new ActiveObject("MicroSoft.XMLHTTP");
}else if(window.XMLHttpRequest)
{
  xmlhttp=new XMLHttpRequest();
}
//按理说上面就可以判断并处理不同浏览器的问题可是不知道为什么我用ie 6.0
//window.ActiveObject判断进不去只有再下面加上一段.无奈ing...
if(xmlhttp == null)
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
   catch(e){ alert("Eror"); }
}

function startRequest()
{
   createHttpRequest();
   xmlhttp.onreadystatechange=handleStateChange;
   xmlhttp.open("GET","http://localhost:8080/chapter2/simpleResponse.xml",true);
xmlhttp.send(null);
   window.status="Request Test...";
}

function handleStateChange()
{
//alert("Get State Change");
if(xmlhttp.readyState==4)
if(xmlhttp.status ==200)
{
  alert("Reply data is XML:"+xmlhttp.responseXML);
  alert("Reply data is txt:"+xmlhttp.responseText);
}
}

</script>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<hr>
<form action="#">
Get Data :<input type=button value="Get Server Data" onclick="startRequest()"><dt></dt>
</form>
<hr>
</body>
</html>

code 2:simpleResponse.xml (只是一个回应的文件内容随便定义)

3:运行利用eclipse启动tomcat 浏览器中打开http://localhost:8080/chapter2/index.html 点击按钮就可以看到.

问题和小结.

   1.创建xmlhttp 的时候需要加上各种浏览器的判断支持..
      如果此对象创建失败浏览器下方会出现黄色错误提示.打开错误显示为 "找不到对象" 之类
                简单方法利用Alert调试看语句到什么地方发生错误.
   2.本例实际并未涉及服务器段的Coading. Tomcat只是起个服务的作用.同样可以使用IIS,调试.
      使用Tomcat是本人熟悉java方便后续学习..