Ajax应用 1.自动查询（验证用户名存在） 2.按需取数据(动态刷新下拉列表)

最新推荐文章于 2022-10-23 21:02:26 发布

q4828222

最新推荐文章于 2022-10-23 21:02:26 发布

阅读量474

点赞数

分类专栏：系统运维

本文链接：https://blog.csdn.net/q4828222/article/details/49861279

版权

系统运维专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.什么是Ajax? Asynchronous JavaScript and XML（异步JavaScript和XML ）

一种创建交互式网页应用的网页开发技术

基于web标准（standards-based presentation）XHTML CSS的表示

使用 DOM（Document Object Model）进行动态显示及交互；

使用 XML 和 XSLT 进行数据交换及相关操作；

使用 XMLHttpRequest 进行异步数据查询、检索；

使用 JavaScript 将所有的东西绑定在一起

2.优势

①通过异步模式，提升了用户体验

②优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

例子：Google Maps!

3.创建ajax程序的基本流程（以验证用户名存在性为例子）

①在< script >中创建XMLHttpRequest对象

②使用XMLHttpRequest对象创建请求request对象

var request;
if (window.XMLHttpRequest) { // Mozilla,...
request = new XMLHttpRequest();
}else if (window.ActiveXObject) { // IE
request = new ActiveXObject(“Msxml2.XMLHTTP”);
}

③监视response的状态，写回调函数处理服务器返回的数据

function checkme(){
//得到文本框值
var name=document.all.stname.value;
//把 name发给 servlet 或 jsp 防止缓存加上一个 r=0.7649321
request.open("get","check?stname=" name "&r=" Math.random());
request.send(null);
}

④使用XMLHttpRequest对象发送请求使用事件触发

request.onreadystatechange = sendName;
function sendName(){
if(request.readyState==4){ //接收完毕
//数据呢？
var fhz=request.responseText;
if(fhz=="true"){ //用户存在了
document.all.info.innerHTML="用户名已存在";
document.all.info.style.color="red";
}else{
document.all.info.innerHTML="用户名可用";
document.all.info.style.color="green";
}
}
}

4.两个应用——验证用户存在否，动态加下拉列表

1）注册 zhuce.jsp

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'zhuce.jsp' starting page</title>
<script>
//学会 ajax 一个对象 XMLHttpRequest
// 两个方法 open(),send() 两个属性 readyState ,responseText 一个事件 onreadystatechange
var request=new XMLHttpRequest(); //注意这行只在ie7 --10 firefox 谷歌
//给request 加一个事件
request.onreadystatechange = getSheng;
function checkme(){
//得到文本框值
var name=document.all.stname.value;
//把 name发给 servlet 或 jsp 防止缓存加上一个 r=0.7649321
request.open("get","check?stname=" name "&r=" Math.random());
request.send(null);
}
function sendName(){
if(request.readyState==4){ //接收完毕
//数据呢？
var fhz=request.responseText;
if(fhz=="true"){ //用户存在了
document.all.info.innerHTML="用户名已存在";
document.all.info.style.color="red";
}else{
document.all.info.innerHTML="用户名可用";
document.all.info.style.color="green";
}
}
}
//初始化省列表
function initsheng(){
request.open("get","test?r=" Math.random());
request.send(null);
}
function getSheng(){
if(request.readyState==4){ //接收完毕
var fhz=request.responseText;
eval("var sz=" fhz);
for(var i in sz){
//动态加下拉列表
var op=new Option(sz[i],sz[i]);
document.all.sheng.options.add(op);
}
}
}
</script>
</head>
<body onload="initsheng()">
用户名<input type="text" id="stname" onblur="checkme()" />
<span id="info"></span>
<hr/>
<select id="sheng">
<option>请选择一个省</option>
</select>
</body>
</html>

2.CheckNameServlet.java

package 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;
import dao.UserDao;
/**
* 检查用户名是否重复的servlet
* @author YC
*
*/
public class CheckNameServlet extends HttpServlet {
UserDao dao=new UserDao();
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name=request.getParameter("stname");
System.out.println("得到你要检查的名字" name);
boolean ok=dao.checkUser(name);
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.print(ok); //向网页返回数据一定是string型的
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// fix 修改过
doGet(request, response);
}
/**
* Initialization of the servlet.
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}

3.TestServlet.java

package 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;
import com.google.gson.Gson;
import dao.UserDao;
/**
* 省ajax json动态下拉列表
* @author YC
*
*/
public class TestServlet extends HttpServlet {
UserDao dao=new UserDao();
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("gbk");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
System.out.println("----------");
String ok[]= dao.getAllSheng();
Gson gson=new Gson();
String fh= gson.toJson(ok);
out.print(fh);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// fix 修改过
doGet(request, response);
}
/**
* Initialization of the servlet.
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}

4.UserDAO.java

package dao;
import java.util.ArrayList;
import java.util.List;
public class UserDao {
/**
* 检查用户名是否合法
* @param name
* @return
*/
public boolean checkUser(String name){
List<String> list=new ArrayList<String>();
list.add("fix");
list.add("xiaoxin");
list.add("world");
if (list.contains(name)) {
return true; //在列表中存在
}else{
return false;
}
}
public String[] getAllSheng(){
String mp[] = {"安徽","北京","福建","甘肃","广东","广西","贵州","海南","河北","河南","黑龙江","湖北","湖南","吉林","江苏","江西","辽宁","内蒙古","宁夏","青海","山东","山西","陕西","上海","四川","天津","西藏","新疆","云南","浙江","重庆"};
return mp;
}
}