AJAX开发步骤
步一:创建AJAX异步对象,例如:xmlhttp()
var xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
步二:准备发送异步请求,例如:ajax.open(method,url)
xmlhttp.open("POST","${pageContext.request.contextPath}/ajax2");
xmlhttp.send("name=tom");
步三:如果是POST请求的话,一定要设置AJAX请求头,例如:ajax.setRequestHeader()
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
如果是GET请求的话,无需设置设置AJAX请求头
步四:真正发送请求体中的数据到服务器,例如:ajax.send()
POST: xmlhttp.send("name=tom");
GET:xmlhttp.send(null);
步五:AJAX不断的监听服务端响应的状态变化,例如:ajax.onreadystatechange,后面写一个无名处理函数
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
步六:在无名处理函数中,获取AJAX的数据后,按照DOM规则,用JS语言来操作Web页面
<script type="text/javascript">
document.getElementsByTagName("input")[0].onclick = function(){
var ajax = createAJAX();
var url = "${pageContext.request.contextPath}/TimeServletAjax?id="+new Date().getTime();
var method = "GET";
ajax.open(method,url);
var content = null;
ajax.send(content);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
var str = ajax.responseText;
document.getElementsByTagName("span")[0].innerHTML = str;
}
}
}
}
</script>
public class TimeServletAjax extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String str = sdf.format(new Date());
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(str);
pw.flush();
pw.close();
}
}