ajax基础学习
ajax简单的获取时间
struct2编写
Servlet+js+HTML编写
time.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="time.js"></script>
</head>
<body>
<input id="btn" type="button" value="获取时间" style="color:orange;background-color:gray"/>
<span id="kuang"></span>
</body>
</html>
time.js
window.onload=function(){
document.getElementById("btn").onclick=function(){
var ajax=new XMLHttpRequest();
ajax.open("GET","/ajax",true);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4)
document.getElementById("kuang").innerHTML=ajax.responseText;
}
/*
* 第一种方式
var ajax=create();
ajax.open("GET","/ajax",true);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
document.getElementById("kuang").innerHTML=ajax.responseText;
}
} */
}
}
function create(){
var ajax=null;
try{
ajax=new XMLHttpRequest();
}catch(e){
ajax=new ActiveXobject("Microsoft.XMLHTTP")
}
return ajax;
}
package ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ajax")
public class timeajax extends HttpServlet{
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out=resp.getWriter();
out.print(new Date().toLocaleString());
}
}
Servlet+js+HTML编写
check.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="check.js"></script>
</head>
<body>
<h1>失去焦点后的效果</h1><br>
用户名：<input type="text" id="username" style="background-color:pink;"/>
<span id="yonghu" style="background-color:orange"></span>
</body>
</html>
check.js
window.onload=function(){
document.getElementById("username").onblur=function(){
var ajax=create();
var usernametext=this.value;
ajax.open("GET","/check?username="+usernametext);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
document.getElementById("yonghu").innerHTML=ajax.responseText;
};
};
}
}
function create(){
var ajax=null;
try{
ajax=new XMLHttpRequest();
}catch(e){
ajax=new ActiveXobject("Microsoft.XMLHTTP")
}
return ajax;
}
servlet
package ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
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;
@WebServlet("/check")
public class checkajax extends HttpServlet{
/**
*
*/
private List<String> user= Arrays.asList("lily","bruce");
private static final long serialVersionUID = 1L;
private String username;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
username=(String) req.getParameter("username");
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out=resp.getWriter();
String msg="恭喜你["+username+"],成功注册";
if(user.contains(username)) {
msg=username+"您已经注册过，不能重复注册";
}
out.print(msg);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
姓名：<input type="text" id="xinming"/><br>
密码：<input type="text" id="pad"/><br>
<input type="button" id="btn" value="登录"/>
</body>
</html>
window.onload=function(){
document.getElementById("btn").onclick=function(){
var username=document.getElementById("xinming").value;
var password=document.getElementById("pad").value;
var ajax=create();
ajax.open("POST","/login",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
window.location.href="/time.html";
}
}
ajax.send("username="+username+"&password="+password);
}
}
function create(){
var ajax=null;
try{
ajax=new XMLHttpRequest();
}catch(e){
ajax=new ActiveXobject("Microsoft.XMLHTTP")
}
return ajax;
}
package ajax;
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;
@WebServlet("/login")
public class login extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println(username+":"+password);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="link.js"></script>
</head>
<body>
<select id="province">
<option value=-1>请选择</option>
</select>省
<select id="city">
<option value=-1>请选择</option>
</select>市
</body>
</html>
window.onload=function(){
var province=document.getElementById("province");
var ajax=new XMLHttpRequest();
ajax.open("GET","/link?cmd=firstlist",true);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
province.innerHTML+=ajax.responseText;
}
}
var city=document.getElementById("city");
province.onchange=function(){
var pid=this.value;
city.innerHTML="<option value='-1'>请选择</option>";
if(pid<0){
return;
}
var ajax=new XMLHttpRequest();
ajax.open("GET","/link?cmd=list&pid="+pid,true);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
city.innerHTML+=ajax.responseText;
}
}
}
}
package ajax;
import java.io.IOException;
import java.io.PrintWriter;
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 lei.City;
import lei.Province;
@WebServlet("/link")
public class linkajax extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
String cmd=req.getParameter("cmd");
if(cmd.equals("firstlist")) {
firstlist(req, resp);
}else {
secondlist(req, resp);
}
}
protected void firstlist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out=resp.getWriter();
List<Province>list=Province.getAllProvince();
StringBuilder sb=new StringBuilder(100);
for (Province pro : list) {
sb.append("<option value='"+pro.getId()+"'>"+pro.getName()+"</option>");
}
out.print(sb.toString());
}
protected void secondlist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out=resp.getWriter();
String pid=req.getParameter("pid");
List<City>list=City.getCityByProvinceId(Long.valueOf(pid));
StringBuilder sb=new StringBuilder(100);
for (City ci:list) {
sb.append("<option value='"+ci.getId()+"'>"+ci.getName()+"</option>");
}
out.print(sb.toString());
}
}