标签：
variable=new ActiveXObject("Microsoft.XMLHTTP");
variable=new XMLHttpRequest();
var xmlHttpRequest;
if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true.
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttpRequest = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
if (window.ActiveXObject) {
//code for IE6, IE5
}
else {
//code for others
}
xmlHttpRequest.open("GET", "AjaxServlet", true);
open方法的原型是:XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};
xmlHttpRequest.onreadystatechange = ajaxCallback;
状态分为多种,被数字标识.参见: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
xmlHttpRequest.send();
function ajaxCallback() {
//alert("test");//this alert will show several times when click the button.
if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status) {
var responseText = xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML = responseText;
}
}
先判断readyState再判断响应的返回值为4,表示请求已完成,status返回200表示响应的返回值为200,即HTTP请求成功.
package com.mengdd.servlets;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class HelloAjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet invoked!");
PrintWriter out = response.getWriter();
out.println("Hello World");
out.flush();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Hello Ajax</title>
<script type="text/javascript">
var xmlHttpRequest;
function ajaxSubmit() {
if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true.
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//very rare browsers, can be ignored.
}
//also, we can handle IE5,6 first using:
/*
if (window.ActiveXObject) {
//code for IE6, IE5
}
else {
//code for others
}
*/
//send request
if (null != xmlHttpRequest) {
//1. prepare request
xmlHttpRequest.open("GET", "AjaxServlet", true);
// XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};
//2. set callback function to handle events
xmlHttpRequest.onreadystatechange = ajaxCallback;
//3. do sending request action
xmlHttpRequest.send();//POST requset needs params here, for GET, just leave params empty or set it to null.
}
}
function ajaxCallback() {
//alert("test");//this alert will show several times when click the button.
if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status) {
var responseText = xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML = responseText;
}
}
</script>
</head>
<body>
<input type="button" value="get content from server" onclick="ajaxSubmit();">
<div id="div1"></div>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>HelloAjaxServlet</servlet-name>
<servlet-class>com.mengdd.servlets.HelloAjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloAjaxServlet</servlet-name>
<url-pattern>/AjaxServlet</url-pattern>
</servlet-mapping>
</web-app>
圣思园张龙老师JavaWeb视频教程63: AJAX深度剖析,XMLHttpRequest对象大揭秘.
标签：
原文地址：http://www.cnblogs.com/liu-Gray/p/4912200.html
