<%@ 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>
