AJAX异步载入文本
简述：
初步试用AJAX异步载入几段文本
基本概念源自百度百科——XMLHttpRequest
主要属性：
1. XMLHttpRequest
XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据
1) readyState : HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4
具体的（0 - 4）状态～～～～
| 0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
| 1 | Open | open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 |
| 2 | Send | Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 |
| 3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成。 |
| 4 | Loaded | HTTP 响应已经完全接收。 |
2）responseText
从服务器接收到的相应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。
3）status : 由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
4)responseXML:
对请求的响应，解析为 XML 并作为 Document 对象返回。
事件句柄
onreadystatechange ：
每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。
主要方法：
1. abort() : 取消当前响应，关闭连接并且结束任何未决的网络活动。把 XMLHttpRequest 对象重置为 readyState 为 0 的状态
2. open() : 初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求
3. send() : 发送HTTP请求，使用传递给open（）方法的参数。
open(method, url, async, username, password)method 参数是用于请求的 HTTP 方法。值包括 “GET”、“POST” 和 “HEAD”。
知识点：
1. AJAX不刷新整个页面，部分修改页面的思想
2. XMLHttpRequest 类的使用
代码：
/webContent/test0.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
var isText0 = true;
function loadDoc()
{
var xmlhttp;
if(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
//readyState = 4:hold complete ; status = 200:Http success
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("textDiv").innerHTML = "<h2>" + xmlhttp.responseText + "</h2>";
}
}; //xmlhttp.readyState = 0
if(isText0){
xmlhttp.open("GET","text0.txt",true);//xmlhttp.readyState = 1
}
else{
xmlhttp.open("GET","text1.txt",true);//xmlhttp.readyState = 1
}
isText0 ^= true;
xmlhttp.send();//xmlhttp.readyState = 1
}
</script>
</head>
<body>
<div id = "textDiv"><h2> here will be a text</h2></div>
<button type = "button" onclick = "loadDoc()">Change text</button>
</body>
</html>
webContent/text0.txt
This is text0!
webContent/text1.txt
This is text1!
输出：
不刷新页面切换text文本