AJAX
Javascript
一、创建请求对象 request
function createRequest(){
var request=false;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
request = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return request;
}
二、初始化request.onreadystatechange
//设置onreadystatechange
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200) {
alert("post:" + request.responseText);
}
}
}
三、Request.open(“post/get”,url,true/false) true
request.open("post","./test", true); //get 方式
request.open("get","./test?userName=xb&password=123456", true); //post方式
四、Request.send();
request.send(); //get方式
request.send("userName=xb&password=123456"); //post方式
完整代码
js
//创建请求对象
function createRequest(){
var request=false;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
request = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return request;
}
jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>test AJAX</title>
<script type="text/javascript" src="js/test_ajax.js"></script>
<script type="text/javascript">
//get方式异步请求
function doGet() {
//创建请求对象
var request = createRequest();
if (request == false) {
alert("get:" + "创建异步请求对象失败!");
return;
}
//设置onreadystatechange
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200) {
alert("get:" + request.responseText);
}
}
}
//打开连接
request.open("get", "./test?userName=xb&password=123456", true);
//发送
request.send();
}
//post方式异步请求
function doPost() {
//创建请求对象
var request = createRequest();
if (request == false) {
alert("post:" + "创建异步请求对象失败!");
return;
}
//设置onreadystatechange
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200) {
alert("post:" + request.responseText);
}
}
}
//打开连接
request.open("post", "./test", true);
//设置mine
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送
request.send("userName=xb&password=123456");
}
</script>
</head>
<body>
<form action="">
<input type="button" value="doGet" οnclick="doGet()"><br>
<input type="button" value="doPost" οnclick="doPost()">
</form>
</body>
servlet
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name=request.getParameter("userName");
String password=request.getParameter("password");
System.out.println("name="+name+" password="+password);
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.write("success");
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name=request.getParameter("userName");
String password=request.getParameter("password");
System.out.println("name="+name+" password="+password);
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.write("success");
out.flush();
out.close();
}
}