*2 AJAX工作原理
服务器端语言:服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
XML (eXtensible Markup Language,可扩展标记语言) 是一种描述数据的格式。AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML 是其中的一种选择
HTML(Hypertext Markup Language,使用超文本标记语言)和 CSS(Cascading Style Sheet,级联样式单)标准化呈现;
DOM(Document Object Model,文档对象模型)实现动态显示和交互;
使用XMLHttpRequest对象进行异步数据读取
使用JavaScript绑定和处理所有数据
而非IE中以XMLHttpRequest对象出现。
2)每种浏览器都内置Ajax引擎对象,但需要通过JS来创建
3)AJAX的缺点:
a)浏览器支持不统一
b)无页面刷时,所以浏览器的"前进"和"后退"按钮失效
c)一些浏媒体支持不完善
XMLHttpRequest对象
XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准。
创建XMLHttpRequest对象(由于非标准所以实现方法不统一)
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象
其他浏览器(Firefox、Safari、Opera…)把它实现为一个本地的JavaScript对象。
XMLHttpRequest在不同浏览器上的实现是兼容的,所以可以用同样的方式访问XMLHttpRequest实例的属性和方法,而不论这个实例创建的方法是什么。
XMLHttpRequest对象方法
方法 描述
abort() 停止当前请求
getAllResponseHeaders() 把http请求的所有响应首部作为键/值对返回
getResponseHeader("header") 返回指定首部的串值
open(“method”,”url”,true) 建立对服务器的调用,method参数可以是GET,POST。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。
send(content) 向服务器发送请求
setRequestHeader(“header", "value") 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open() ,post 请求下使用
XMLHttpRequest对象属性
五个状态码:
*3 AJAX开发步骤及详解
1)创建ajax_1.html或ajax_1.jsp2)添加事件
3)在事件响应后创建Ajax引擎对象
4)异步发送请求
5)将响应结果放入Ajax引擎对象中
6)从Ajax引擎对象中取得响应结果
7)使用DOM和JS将响应结果动态添加到Html或Jsp面页中
8)对于POST请求,一定要设置请求头,代码如下:
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
在open()之后,在send()之前
对于GET请求,无需设置请求头
Ajaxtest.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
<div align="center">
<input type="button" id="btu" value="ajaxä½éª" />
<hr />
</div>
<script type="text/javascript">
//var btuElement = document.getElementById("btu");
var inputElement = document.getElementsByTagName("input")[0];
inputElement.onclick = function() {
//alert("a");
var xhr = createXHR();
/* window.alert(xhr != null);
xhr.open("get","");
xhr.send("key=value&&key==value"); */
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
if(xhr.status==200)
{
var msg=xhr.responseText;
alert(msg);
// var divElement=document.getElementsByName("Input")[0];
// divElement.innerHTML=msg;
}
}
}
xhr.open("GET","http://127.0.0.1:8080/ajaxTest/servlet/AjaxServlet");
xhr.send(null);
}
function createXHR() {
if(window.ActiveXObject) {
xhr = new ActiveXObject("microsoft.xmlhttp");
}
else {
xhr = new XMLHttpRequest();
}
return xhr;
}
</script>
</body>
</html>
AjaxServlet.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("Ajaxservlet:start");
String msg=new Date().toLocaleString();
response.setContentType("text/heml;charset=UTF-8");
response.getWriter().write(msg);
}
}