Ajax
Asynchronous JavaScript and xml ,叫做异步的 JavaScript 和 xml ,也叫做页面局部刷新技术。为什么需要呢?因为有时候我们只需要更新网页的部分数据,比如查看文本的下一页的功能,只需要更新局部的内容即可,不需要让整个页面刷新或者重新重定向。
Ajax 使用 XMLHttpRequest 这个对象发送一步请求和响应出来。在 IE5 中是以 ActiveX 组件的形式存在。
如果要使用 XMLHttpRequest 对象,必须通过 JavaScript 完成但是由于浏览器的内核不同,所以创建 XMLHttpRequest 对象的方式也不同。
请求使用步骤
-
创建 XMLHttpRequest 对象
var xmlhttp = new XMLHttpRequest();
-
调用 XMLHttpRequest 对象的 open 函数,创建提交路径,提交路径为一个 Servlet 的 URL 映射地址。
var contextPath = "${pageContext.request.contextPath}"; xmlhttp.open("post",contextPath + "/AjaxServletDemo01");
-
为 XMLHttpRequest 对象设置状态改变实践(设置回调函数)
xmlhttp.onreadystatechange = checkBack; function checkBack(){ if (xmlhttp.readyState == 4){ var content = xmlhttp.responseText;//接受 Servlet 响应的内容 //... 剩下可以处理的 content } }
-
调用 XMLHttpRequest 对象的 send 函数进行提交
xmlhttp.send(null);
-
获取 Servlet 响应结果
这里的响应结果,体现在回调函数中,其中对于响应的状态有四种:
-
xmlhttp.readyState == 1
时,表示 Ajax核心对象已经设置了提交的路径 -
xmlhttp.readyState == 2
时,表示 Ajax核心对象已经提交到 Servlet 了 -
xmlhttp.readyState == 3
时,表示 Servlet 以及响应了内容 -
xmlhttp.readyState == 4
时,表示 Servlet 响应信息结束。
-
-
服务器的响应方式
这里举例 AjaxServletDemo01 的主要代码如下:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); request.setCharacterEncoding("utf-8"); //向页面响应内容,页面响应的内容会被 Ajax的核心对象获悉 out.print("我是内容"); }
通过 response 获得的 out 对象来向客户端输出回应内容。