简单的AJAX实现(HELLO AJAX)
程序员文章站
2022-03-14 10:40:03
客户端部分： 复制代码 代码如下:
客户端部分：
<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应用之草稿自动保存
下一篇： AJAX 进度条实现代码