1GET:
//test.js
/*
* AJAX建立和服务器的连接请求,处理服务器返回的数据
* 步骤:
* 1创建XMLHttpRequest对象
* 2打开服务器的连接
* 3发送数据
* 4接受服务器的响应
*/
//创建对象
function ajaxFunction(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
}
}
}
return xmlHttp;
}
window.onload = function(){
document.getElementById("ok").οnclick=function(){
//1
var xmlReq = ajaxFunction();
//4
xmlReq.onreadystatechange=function(){
//alert(xmlReq.readyState);
//alert(xmlReq.status);
if(xmlReq.readyState==4){
if(xmlReq.status==200||xmlReq.status==304){
//alert("success");
//接受服务器端的数据
var data = xmlReq.responseText;
alert(data);
}
}
}
//2
xmlReq.open("get","../TestServlet?time="+new Date().getTime(),true);
//3
xmlReq.send(null);
}
}
//testGet.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded">
<input type="button" name="ok" id="ok" value="测试连接">
</form>
</body>
</html>
///ajaxTest/src/com/wanglong/web/TestServlet.java
package com.wanglong.web;
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 TestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public TestServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print("服务器端的数据data");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String a = request.getParameter("a");
String b = request.getParameter("b");
String c = request.getParameter("c");
PrintWriter out = response.getWriter();
out.print("服务器端的数据postData:"+"a="+a +";b="+b+";c="+c);
}
}
2POST
/*
* AJAX建立和服务器的连接请求,处理服务器返回的数据
* 步骤:
* 1创建XMLHttpRequest对象
* 2打开服务器的连接
* 3发送数据
* 4接受服务器的响应
*/
//创建对象
function ajaxFunction()
{
var xmlHttp;
try{// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch(e){// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
window.onload = function(){
document.getElementById("ok").οnclick=function(){
//1
var xmlReq = ajaxFunction();
//4
xmlReq.onreadystatechange=function(){
//alert(xmlReq.readyState);
//alert(xmlReq.status);
if(xmlReq.readyState==4){
if(xmlReq.status==200||xmlReq.status==304){
//alert("success");
//接受服务器端的数据
var data = xmlReq.responseText;
alert(data);
}
}
}
//2
xmlReq.open("post","../TestServlet?time="+new Date().getTime()+"&a=123",true);
xmlReq.setRequestHeader("content-Type","application/x-www-form-urlencoded");//该方法必须放在open方法后面
//3
xmlReq.send("b=45&c=asd");
}
}
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TestPost</title>
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded">
<input type="button" name="ok" id="ok" value="测试连接">
</form>
</body>
</html>
RegisterDemo
function ajaxFunction()
{
var xmlHttp;
try{// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch(e){// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
window.onload = function(){
document.getElementById("checkusername").οnclick=function(){
var username = document.getElementById("username").value;
//alert(username);
var xmlReq = ajaxFunction();
xmlReq.onreadystatechange=function(){
if(xmlReq.readyState==4){
if(xmlReq.status==200||xmlReq.staus==304){
var data = xmlReq.responseText;
document.getElementById("divcheck").innerHTML=data;
}
}
}
xmlReq.open("post","../RegisterServlet", true);
xmlReq.setRequestHeader("content-Type","application/x-www-form-urlencoded");
xmlReq.send("username="+username);
}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>testRegister</title>
<script type="text/javascript" src="./register.js"></script>
</head>
<body>
<form action="" method="post" enctype="application/x-www-form-urlencoded">
<input type="text" name="username" value="" id="username">
<div id="divcheck"></div>
<input type="button" name="checkusername" value="查看用户名" id="checkusername">
</form>
</body>
</html>
package com.wanglong.web;
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 RegisterServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public RegisterServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
PrintWriter out = response.getWriter();
if("wanglong".equals(username)){
out.println("用户名已经存在");
}else{
out.println("用户名可以使用");
}
}
}
JAVA
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>json Test</title>
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
}
}
}
return xmlHttp;
}
window.οnlοad=function(){
document.getElementById("check").οnclick=function(){
var xmlReq = ajaxFunction();
xmlReq.onreadystatechange = function(){
if(xmlReq.readyState==4){
if(xmlReq.status==200||xmlReq.status==304){
var data = xmlReq.responseText;
alert(data);
var dataObj = eval("("+data+")");
alert(dataObj);
alert(dataObj[1].name);
}
}
}
xmlReq.open("post", "../JsonServlet?time="+new Date().getTime(), true);
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlReq.send(null);
}
}
</script>
</head>
<body>
<form action="" method="post" enctype="application/x-www-form-urlencoded">
<input type="button" name="check" value="check" id="check">
</form>
</body>
</html>
package com.wanglong.web;
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 JsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String a = request.getParameter("a");
String b = request.getParameter("b");
String c = request.getParameter("c");
PrintWriter out = response.getWriter();
out.print("[{pid:1,name:'wang'},{pid:2,name:'long'}]");
}
}
LIST to JSON
package com.wanglong.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class JsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String a = request.getParameter("a");
String b = request.getParameter("b");
String c = request.getParameter("c");
PrintWriter out = response.getWriter();
out.print("[{pid:1,name:'wang'},{pid:2,name:'long'}]");
Person p1 = new Person();
Person p2 = new Person("wang",28);
Person p3 = new Person("hah",99);
List<Person> list = new ArrayList<Person>();
list.add(p1);
list.add(p2);
list.add(p3);
JSONArray jsonArr = JSONArray.fromObject(list);
System.out.println(jsonArr.toString());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
}