简单的AJAX实现(HELLO AJAX)
更新时间：2010年03月13日 12:05:07 作者：
简单的AJAX实现(HELLO AJAX) ，实现代码，主要是了解下，流程。
客户端部分：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<script language="javascript">
var ajax;
function createAjax()
{
if(window.ActiveXObject)
{
try
{
return new ActiveXObject("Msxm12.XMLHTTP");
}
catch(e)
{
try
{
return new
ActiveXObject("Microsoft.XMLHTTP");
}
catch(e2)
{
return null;
}
}
}
else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else
{
return null;
}
}
function onRcvData()
{
if(ajax.readyState==4)
{
if(ajax.status==200)
{
var content=document.getElementById('content');
content.innerHTML=ajax.responseText;
}
else
{
alert("error");
}
}
}
function ajaxSendRequest(uri)
{
ajax=createAjax();
if(!ajax)
{
alert("no");
return 0;
}
ajax.onreadystatechange=onRcvData;
ajax.open("GET",uri,true);
ajax.send("");
}
</script>
<title>Hello AJAX</title>
</head>
<body>
<div id="content"></div>
<br>
<input type="button" value="Hello"
onclick="ajaxSendRequest('http://localhost:8080/test/hello.jsp')">
</body>
</html>
服务器端部分(hello.jsp)
<html>
<head>
<title>hellp</title>
</head>
<body>
<%
out.println("HELLO AJAX");
%>
</body>
</html>
复制代码 代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<script language="javascript">
var ajax;
function createAjax()
{
if(window.ActiveXObject)
{
try
{
return new ActiveXObject("Msxm12.XMLHTTP");
}
catch(e)
{
try
{
return new
ActiveXObject("Microsoft.XMLHTTP");
}
catch(e2)
{
return null;
}
}
}
else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else
{
return null;
}
}
function onRcvData()
{
if(ajax.readyState==4)
{
if(ajax.status==200)
{
var content=document.getElementById('content');
content.innerHTML=ajax.responseText;
}
else
{
alert("error");
}
}
}
function ajaxSendRequest(uri)
{
ajax=createAjax();
if(!ajax)
{
alert("no");
return 0;
}
ajax.onreadystatechange=onRcvData;
ajax.open("GET",uri,true);
ajax.send("");
}
</script>
<title>Hello AJAX</title>
</head>
<body>
<div id="content"></div>
<br>
<input type="button" value="Hello"
onclick="ajaxSendRequest('http://localhost:8080/test/hello.jsp')">
</body>
</html>
服务器端部分(hello.jsp)
复制代码 代码如下:
<html>
<head>
<title>hellp</title>
</head>
<body>
<%
out.println("HELLO AJAX");
%>
</body>
</html>
相关文章
用AJAX技术实现在自己Blog上聚合并显示朋友Blog的最新文章
在自己Blog上聚合并显示朋友Blog的最新文章，这样方便自己及时了解朋友的消息，另外，也方便访问者找到和本Blog相关的blog和文章2014-05-05
JSON是一种简单的数据格式，比xml更轻巧。其规则很简单，对象是一个无序的名称/值对集合，下面有个案例，大家可以感受下2014-07-07
这篇文章主要介绍了深入浅析Jsonp解决ajax跨域问题的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-05-05
这篇文章主要介绍了使用FormData进行Ajax请求上传文件的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08
今天小编就为大家分享一篇ajax动态加载json数据并详细解析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本文为大家介绍下ajax如何打开新窗口，下面有段代码，需要的朋友可以了解下2014-01-01
纯AJAX分页，V0.2版 下载+演示...2007-01-01
jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法
这篇文章主要介绍了jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法的相关资料,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了使用ajax操作JavaScript 对象的相关资料,需要的朋友可以参考下2015-01-01
本文主要介绍了ajax实现数据删除、查看详情功能，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
最新评论