您的位置：首页 > 理论基础 > 计算机网络

Ajax实现异步操作

2011-09-09 09:16 253 查看

Ajax（Asynchronous JavaScript and XML），异步的JavaScript与XML。 Ajax中的一个重要对象是XMLHttpRequest。

使用Ajax准备向服务器端发送请求：
xmlHttpRequest.open("GET", "AjaxServlet", true);

客户端代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax</title>

<script type="text/javascript">
/*
* Ajax中的一个重要对象是:XMLHttpRequest
*/

//声明一个空对象以接收XMLHttpRequest对象
var xmlHttpRequest = null;

function ajaxSubmit()
{
if(window.activeXObject)//IE浏览器
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest)//除IE意外的其他浏览器实现
{
xmlHttpRequest = new XMLHttpRequest();
}

if(null != xmlHttpRequest)
{
//使用ajax准备向服务器端发送请求：
xmlHttpRequest.open("GET", "/js_demo1/AjaxServlet", true);
//关联好ajax的回调函数(类似事件监听)
xmlHttpRequest.onreadystatechange = ajaxCallback;
//真正向服务器发送数据
xmlHttpRequest.send(null);
}

}

function ajaxCallback()
{
if(xmlHttpRequest.readyState == 4)
{
if(xmlHttpRequest.status == 200)
{
var responseText = xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML = responseText;
}
}
}

</script>
</head>

<body>
<input type="button" value="get content from sever" onclick="ajaxSubmit();"/>
<div id="div1"></div>
</body>
</html>

服务器端代码：

public class AjaxServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out = response.getWriter();
System.out.println("server");
out.println("Hello,world!");
out.close();
}

}

部分web.xml代码

<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.company.AjaxServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/AjaxServlet</url-pattern>
</servlet-mapping>

说明：服务器端禁用缓存：

response.setHeader("pragma", "no-cache");

response.setHeader("cache-control", "on-cache");

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax xmlhttprequest asynchronous 服务器 javascript function

相关文章推荐

新的分享

章节导航