<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Study aJax</title> <!-- Ajax学习： 1、ajax的概念 局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。 2、ajax的作用 实现在当前结果页中显示其他请求的响应内容 3、ajax的使用 ajax的基本流程 //创建ajax引擎对象 //复写onreadystatement函数 //判断ajax状态码 //判断响应状态码 //获取响应内容(响应内容的格式) //普通字符串：responseText --> <script type="text/javascript"> function show(){ var ajax; if(window.XMLHttpRequest){ ajax=new XMLHttpRequest(); }else if(window.ActiveXObject){ ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //复写onreadystatechange方法 ajax.onreadystatechange=function(){ //判断aJax状态码 if(ajax.readyState==4){ //判断aJax响应状态码 if(ajax.status==200){ var result=ajax.responseText; var div=document.getElementById("div"); div.innerHTML=result; }else if(ajax.status==404){ var div=document.getElmenetById("div"); div.innerHTML="没有找到资源！！"; }else if(ajax.status==500){ var div=document.getElmenetById("div"); div.innerHTML="服务器内部错误！！"; }else{ var div=document.getElmenetById("div"); div.innerHTML="未知错误！！！"; } }else{ //请求还没完成里，显示一张转圈圈图片 var div=document.getElementById("div"); div.innerHTML="<img src='img/2.gif' width=150px heigth='80px' />"; } } //发送请求，第一个参数:请求类型get and post, //第二个参数：servlet别名， //第三个参数：异步同步，默认为异步，一般都使用异步 ajax.open("get","ajaxServlet",true); ajax.send(null); } </script> <style type="text/css"> #div{ border:solid 2px; width:200px; height:100px; } </style> </head> <body> <h3>welcome aJax</h3> <hr> <input id="button" type="button" value="show!!" onclick="show()" /> <div id="div" > </div> </body> </html>