1 ajax第一例：helloworld
服务端代码：
package org.lks.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MyServlet
*/
@WebServlet(asyncSupported = true, urlPatterns = { "/MyServlet" })
public class MyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("Hello Ajax");
response.getWriter().print("Hello Ajax!!!");
}
}
客户端jsp代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script>
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("What!!!");
throw e;
}
}
}
}
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
//ajax四步操作
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "MyServlet", true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){
if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
var text = xmlHttp.responseText;
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
}
}
}
</script>
</head>
<body>
<button id="btn">click on!</button>
<h1 id="h1"></h1>
</body>
</html>
2 ajax第二例：发送POST请求
（1）open：xmlHttp.open("POST",...);
（2）添加一步：设置Content-Type请求头
|——xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded);
（3）send：xmlHttp.send("username=lks&&password=hhy"); 发送请求时指定请求体
客户端页面js代码：
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
//ajax四步操作
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "MyServlet", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("username=骆开胜&&password=123");
xmlHttp.onreadystatechange = function(){
if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
var text = xmlHttp.responseText;
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
}
}
}
服务端代码：
package org.lks.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MyServlet
*/
@WebServlet(asyncSupported = true, urlPatterns = { "/MyServlet" })
public class MyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("Hello Ajax");
response.getWriter().print("Hello Ajax!!!");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
resp.setCharacterEncoding("UTF-8");
req.setCharacterEncoding("UTF-8");
String username = req.getParameter("username");
System.out.println("Hello Ajax!!!" + username);
resp.getWriter().print("Hello Ajax!!!" + username);
}
}
3 ajax第三例：用户名是否已注册
1、编写页面：username.jsp
（1）给出注册表单页面
（2）给用户名文本框添加onblur事件监听
（3）获取文本框的内容，通过ajax4步操作发送给服务器，得到响应结果
|——如果为1，在文本框后显示“用户名已被注册”
|——入股哦为0：什么都不做
2、编写Servlet：ValidateUsernameServlet
（1）获取客户端传递的用户名参数
（2）判断是否存在：是返回1，否则0。
页面代码：
<body>
<h1>用户注册</h1>
<form action="" method="post">
Username: <input type="text" name="username" id="usernameEle"/><span id="ajaxinfo"></span><br>
Password: <input type="text" name="password" id="passwordEle"/><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
js代码：
<script>
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
throw e;
}
}
}
};
window.onload = function(){
var user = document.getElementById("usernameEle");
user.onblur = function(){
var xmlHttp = createXMLHttpRequest();
//alert("create ok");
xmlHttp.open("POST", "SignUpServlet", true);
//alert("open ok");
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("username=" + user.value);
//alert("send ok");
xmlHttp.onreadystatechange = function(){
//alert("onready ok");
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var res = xmlHttp.responseText;
var span = document.getElementById("ajaxinfo");
if(res == "1"){
span.innerHTML = "用户名已注册";
}else{
span.innerHTML = "";
}
}
};
};
};
</script>
服务器代码：
package org.lks.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class SignUpServlet
*/
@WebServlet(asyncSupported = true, urlPatterns = { "/SignUpServlet" })
public class SignUpServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
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");
if("lks".equals(username)) {
response.getWriter().print("1");
}else {
response.getWriter().print("0");
}
}
}
4 ajax第四例：响应内容为xml
1、服务器端
（1）设置响应头：Content-Type，其值为：text/xml;charset=utf-8
2、客户端
（1）var doc = xmlHttp.responseXML; 得到的是Document对象
页面JS代码：
<script>
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
throw e;
}
}
}
};
window.onload = function(){
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "XMLServlet", true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var xml = xmlHttp.responseXML;
var stu = xml.getElementsByTagName("student")[0];
var id = stu.getAttribute("id");
if(window.addEventListener){
var name = stu.getElementsByTagName("name")[0].firstChild.nodeValue;
var age = stu.getElementsByTagName("age")[0].firstChild.nodeValue;
}else{
var name = stu.getElementsByTagName("name")[0].firstChild.nodeValue;
var age = stu.getElementsByTagName("age")[0].firstChild.nodeValue;
}
var info = id+ ", " + name + ", " + age;
document.getElementById("h1").innerHTML = info;
}
};
};
</script>
页面代码：
<body>
<h1 id="h1"></h1>
</body>
服务端代码：
package org.lks.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class XMLServlet
*/
@WebServlet(asyncSupported = true, urlPatterns = { "/XMLServlet" })
public class XMLServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String xml = "<students>" +
"<student id='3161301220'>" +
"<name>lks</name>" +
"<age>23</age>" +
"</student>" +
"</students>";
resp.setContentType("text/xml;charset=utf-8");
resp.getWriter().print(xml);
}
}
5 ajax第五例：省市联动
1、页面
<select name="province">
<option>===选择省份===</option>
</select>
<select name="city">
<option>===选择城市===</option>
</select>
2、ProvinceServlet
（1）ProvinceServlet：当页面加载完毕后马上请求这个Servlet。
|——它需要加载chinaprovince.xml文件，把所有的省的名称使用字符串发送给客户端。
3、页面的工作
（1）获取这个字符串，使用逗号分隔，得到数组
（2）循环遍历每个字符串（省份的名称），使用每个字符串创建一个<option>元素添加到<select name="province">这个元素之中。
4、CityServlet
（1）CityServlet：当页面选择某个省时，发送请求。
（2）得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象，把这个元素转换成xml字符串，发送给客户端。
5、页面的工作
（1）把<select name="city">中的所有子元素删除，除了<option>===选择城市===</option>
（2）得到服务器响应结果
（3）获取所有的<city>子元素，循环遍历，得到<city>的内容
（4）使用每个<city>的内容创建一个<option>元素，添加到<select name="city">
页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Province and City</title>
<script>
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
throw e;
}
}
}
};
window.onload = function(){
var select = document.getElementsByTagName("select")[0];
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "ProServlet", true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var text = xmlHttp.responseText;
var list = text.split(",");
for(var i = 0; i < list.length; i++){
var op = document.createElement("option");
var optext = document.createTextNode(list[i]);
op.appendChild(optext);
select.appendChild(op);
}
}
}
var pro = document.getElementById("pro");
pro.onchange = function(){
xmlHttp.open("POST", "CityServlet", true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("province=" + pro.value);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var text = xmlHttp.responseText;
var city = document.getElementById("cit");
var citys = text.split(",");
var options = city.getElementsByTagName("option");
while(options.length > 1){
city.removeChild(options[1]);
}
for(var i = 0; i < citys.length; i++){
var op = document.createElement("option");
var optext = document.createTextNode(citys[i]);
op.appendChild(optext);
city.appendChild(op);
}
}
}
}
}
</script>
</head>
<body>
<select name="province" id="pro">
<option>===选择省份===</option>
</select>
<select name="city" id="cit">
<option>===选择城市===</option>
</select>
</body>
</html>
服务器代码：
package org.lks.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.dom4j.Document;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;
/**
* Servlet implementation class CityServlet
*/
@WebServlet(asyncSupported = true, urlPatterns = { "/CityServlet" })
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//String pro = request.getParameter("province");
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String provin = request.getParameter("province");
System.out.println(provin);
try {
SAXReader saxReader = new SAXReader();
Document document = saxReader.read("D:/code_learn/java/javaee/project/ajaxlearn/src/chinapro.xml");
List<Node> list = document.selectNodes("//province[@name=\"" + provin + "\"]/city");
System.out.println(list.size());
StringBuilder sbd = new StringBuilder();
for(int i = 0; i < list.size(); i++) {
sbd.append(list.get(i).getText());
if(i < list.size() - 1) {
sbd.append(",");
}
}
System.out.println(sbd);
response.getWriter().print(sbd);
}catch(Exception e) {
e.printStackTrace();
}
}
}
服务器代码：
package org.lks.servlet;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;
/**
* Servlet implementation class ProServlet
*/
@WebServlet(asyncSupported = true, urlPatterns = { "/ProServlet" })
public class ProServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");
try {
SAXReader saxReader = new SAXReader();
InputStream input = new FileInputStream("D:/code_learn/java/javaee/project/ajaxlearn/src/chinapro.xml");
Document document = saxReader.read(input);
List<Node> list = document.selectNodes("//province/@name");
StringBuilder str = new StringBuilder();
for(int i = 0; i < list.size(); i++) {
str.append(list.get(i).getText());
if(i < list.size() - 1) {
str.append(",");
}
}
System.out.println(str);
response.getWriter().print(str);
} catch (DocumentException e) {
// TODO Auto-generated catch block
throw new RuntimeException(e);
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
