一、注册案例(Get方式)

1、前台

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>ajax</title>
</head>

<body>
	<form>
		用户名[GET]:<input id="usernameID" type="text" name="username" />
		光标移出后,立即检查结果
	</form>
	<hr />
	<span id="resultID"></span>
	<script type="text/javascript">
    	//定位文本框,同时提供焦点失去事件
        document.getElementById("usernameID").onblur = function() {

        	var userName=this.value;
        	//判断是否为空
        	if(userName.length==0){
        		document.getElementById("resultID").innerHTML="<font color='red'>用户名必填</font>";
        	}else{
        	//对汉字进行UTF-8编码
        	userName=encodeURI(userName);
        	console.log(userName);
            //1、创建AJAX对象
            var ajax = createAJAX();
            //2、准备发送请求
            var method = "GET";
            //为了适应IE浏览器对其不变的地址缓存,以致其不会继续去发送请求,所以加上时间,保证唯一
            var url = "${pageContext.request.contextPath}/RegisterServlet?time="+new Date().getTime()+"&userName="+userName;
            ajax.open(method, url);
            //3、真正发送请求的具体数据到服务器,如果球体中无数据,就用null表示
            ajax.send(null);

            //4、Ajax异步对象不断监听服务器
            ajax.onreadystatechange = function() {
                //如果状态码为4
                if (ajax.readyState == 4) {
                    //如果响应码为200
                    if (ajax.status == 200) {
                       var tip=ajax.responseText;
                       document.getElementById("resultID").innerHTML = tip;
                    }
                }
            }
        	}
        }

        function createAJAX() {
            var ajax = null;
            try {
                //如果是IE5——IE12的话
                ajax = new ActiveXObject("microsoft.xmlhttp");
            } catch (e1) {
                //如果是非IE的话
                ajax = new XMLHttpRequest();
            }
            return ajax;
        }
    </script>
</body>

</html>

2、servlet

public class RegisterServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String userName = request.getParameter("userName");
		userName=new String(userName.getBytes("iso-8859-1"),"utf-8");
		String tip = "<font color='green'>可以注册</font>";
		if("郭庆兴".equals(userName)){
			tip = "<font color='red'>该用户已存在</font>";
		}
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(tip);
		pw.flush();
		pw.close();
	}
}

二、注册(POST)

1、前台

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ajax</title>
</head>
<body>
    <form>
		用户名[POST]:<input id="usernameID" type="text" name="username" />
		光标移出后,立即检查结果
	</form>
	<hr/>

	<span id="resultID"></span>
    <script type="text/javascript">
    	//定位文本框,同时提供焦点失去事件
        document.getElementById("usernameID").onblur = function() {

        	var userName=this.value;
        	//判断是否为空
        	if(userName.length==0){
        		document.getElementById("resultID").innerHTML="<font color='red'>用户名必填</font>";
        	}else{
            //1、创建AJAX对象
            var ajax = createAJAX();
            //2、准备发送请求
            var method = "POST";
            //为了适应IE浏览器对其不变的地址缓存,以致其不会继续去发送请求,所以加上时间,保证唯一
            var url = "${pageContext.request.contextPath}/RegisterServlet?time="+new Date().getTime();
            ajax.open(method, url);

            //设置AJAX请求头为POST,他会将请求体中的汉字自动进行UTF-8的编码
            //<form action="" enctype="application/x-www-form-urlencoded"></form>
            ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

            //3、真正发送请求的具体数据到服务器,
            var content="userName="+userName;
            ajax.send(content);

            //4、Ajax异步对象不断监听服务器
            ajax.onreadystatechange = function() {
                //如果状态码为4
                if (ajax.readyState == 4) {
                    //如果响应码为200
                    if (ajax.status == 200) {
                       var tip=ajax.responseText;

						//创建img标签
						var imgElement=document.createElement("img");
						//设置imng标签的属性
						imgElement.src=tip;
						imgElement.style.width="12px";
						imgElement.style.height="12px";
						//定位span标签、
						var spanElement=document.getElementById("resultID");
						//清空span标签
						spanElement.innerHTML = "";
						//请img标签加入到span标签中去
						spanElement.appendChild(imgElement);
                    }
                }
            }
        	}
        }

        function createAJAX() {
            var ajax = null;
            try {
                //如果是IE5——IE12的话
                ajax = new ActiveXObject("microsoft.xmlhttp");
            } catch (e1) {
                //如果是非IE的话
                ajax = new XMLHttpRequest();
            }
            return ajax;
        }
    </script>
</body>

</html>

这与前面,有个地方不同,就是在open方法和send方法之间要设置一个响应头,否则后台没办法接收到数据。

2、后台servlet

public class RegisterServlet extends HttpServlet {

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String userName=request.getParameter("userName");
		String tip="img/right.gif";
		if ("郭庆兴".equals(userName)) {
			tip="img/error.gif";
		}
		response.setContentType("text/html;charset=utf-8");
		PrintWriter pw=response.getWriter();
		pw.write(tip);
		pw.flush();
		pw.close();
	}

}

结果如图


三、三级联动

省份-城市联动

1、前台

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ajax</title>
</head>

<body>
   省份:<select id="provinceID" style="width: 120px">
   		<option>选择省份</option>
   		<option>湖北省</option>
   		<option>广东省</option>
   		<option>湖南省</option>
   </select>
     
   城市:<select id="cityID" style="width: 120px">
   		<option>选择城市</option>
   </select>
    <script type="text/javascript">
    	//定位下拉框,同时添加内容改变事件
        document.getElementById("provinceID").onchange = function() {
        	//清空城市下拉列表的内容,除了第一项
        	var cityElement=document.getElementById("cityID");
        	cityElement.length=1;

        	//获取选中的省份标签的索引号,从0开始
        	var index=this.selectedIndex;
        	//定位当前的option标签
        	var optionElement=this[index];
        	//获取option内容的标签
        	var province=optionElement.innerHTML;

        	//如果选中的不是提示“选择省份”,不需要向服务器去查询城市信息
        	if ("选择省份" != province) {
				var ajax=createAJAX();
				var method="post";
				var url="${pageContext.request.contextPath}/ProvinceServlet?time="+new Date().getTime();
				ajax.open(method, url);
				//设置响应头
				ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
				var content="province="+province;
				ajax.send(content);

				//***************等待服务器发送数据**************
				ajax.onreadystatechange=function(){
					if (ajax.readyState==4) {
						if (ajax.status=200) {
							//从ajax异步对象中获取服务器响应的xml文档
							var xmlDocument = ajax.responseXML;
							//按照DOM规则解析xml文档
							var cityElementArray = xmlDocument.getElementsByTagName("city");
							var size=cityElementArray.length;
							for (var i = 0; i < size; i++) {
								var city = cityElementArray[i].firstChild.nodeValue;
								//开始往城市的下拉栏添加
								var optionElement=document.createElement("option");
								optionElement.innerHTML=city;
								cityElement.appendChild(optionElement);
							}
						}
					}
				}
			}
        }

        function createAJAX() {
            var ajax = null;
            try {
                //如果是IE5——IE12的话
                ajax = new ActiveXObject("microsoft.xmlhttp");
            } catch (e1) {
                //如果是非IE的话
                ajax = new XMLHttpRequest();
            }
            return ajax;
        }
    </script>
</body>

2、后台servlet

package com.gqx.test1;

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;
/**
 * 二级联动,基于xml方式完成
 * @author 郭庆兴
 *
 */
public class ProvinceServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");

		String province=request.getParameter("province");
		//通知ajax异步对象,服务器响应的数据格式为xml
		response.setContentType("text/xml;charset=UTF-8");
		//获取字符流输出
		PrintWriter pw=response.getWriter();
		//如果是连接数据库的话,应该查出来的是一个list集合,然后将其按xml的方式封装,如下格式
		pw.write("<?xml version='1.0' encoding='UTF-8'?>");
		pw.write("<root>");
		if ("湖北省".equals(province)) {
			pw.write("<city>武汉</city>");
			pw.write("<city>黄石</city>");
			pw.write("<city>荆州</city>");
			pw.write("<city>襄阳</city>");
			pw.write("<city>宜昌</city>");
		}else if ("湖南省".equals(province)) {
			pw.write("<city>长沙</city>");
			pw.write("<city>株洲</city>");
			pw.write("<city>萍乡</city>");
			pw.write("<city>湘潭</city>");
			pw.write("<city>岳阳</city>");
		}else if ("广东省".equals(province)) {
			pw.write("<city>广州</city>");
			pw.write("<city>深圳</city>");
			pw.write("<city>中山</city>");
			pw.write("<city>佛山</city>");
			pw.write("<city>汕头</city>");
			pw.write("<city>珠海</city>");
		}
		pw.write("</root>");
		pw.flush();
		pw.close();

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doGet(request, response);
	}

}

这里要注意的是在后台要用xml的方式去发送数据,同时前台去接受数据的时候要去解析,先接受

//从ajax异步对象中获取服务器响应的xml文档
var xmlDocument = ajax.responseXML;
//按照DOM规则解析xml文档
var cityElementArray = xmlDocument.getElementsByTagName("city");

要获取xml最小节点内的数据可以通过如下方法去获取

var city = cityElementArray[i].firstChild.nodeValue;

最终 效果如下

Ajax(javascript)案例的更多相关文章

  1. jQuery中的ajax用法案例

    什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...

  2. Django(十二)视图--利用jquery从后台发送ajax请求并处理、ajax登录案例

    一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...

  3. JavaScript案例开发之扑克游戏

    随着时代的发展,知识也在日益更新,但是基础知识永远不会过时,它是新时代的基石,更是我们进一步学习的保障,下面带着大家用JavaScript开发一款真正的扑克游戏,和大家一起分享,希望你们能够喜欢:闲话 ...

  4. 关于ajax入门案例

    $.ajax方法 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他ht ...

  5. node+ajax实战案例(2)

    2.静态资源渲染 2.1.创建http服务器 var http = require('http'); var url = require('url'); var app = http.createSe ...

  6. ajax经典案例--省市联动

    ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...

  7. ajax交互案例

    数据交互是前端很重要的一部分,静态页是基础,而交互才是网页的精髓.交互又分为人机交互和前后端数据交互,现阶段的互联网下,大部分的网站都要进行前后端数据交互,如何交互呢?交互的流程大概就是前端发送数据给 ...

  8. JavaScript案例一:Window弹窗案例

    注:火狐可运行,谷歌不可运行(安全级别高) <!DOCTYPE html> <html> <head> <title>JavaScript 弹窗案例&l ...

  9. JQuery的ajax登录案例

    1.简单版AjaxLogin.html代码: <head> <title></title> <script src="jquery-1.8.3.js ...

随机推荐

  1. js基础学习笔记(二)

    2.1  输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出&q ...

  2. 20145232 韩文浩 《Java程序设计》第5周学习总结

    教材学习内容总结 处理异常 教材中使用一个简单的程序,用户连续输入整数最后输入0结束后显示输入数的平均值. 但有时,用户会没有按常规出牌输入不正确的信息,例如"30"输成" ...

  3. 22个值得收藏的Android开源代码——cool

    转自http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1020/1808.html 本文介绍了android开发者中比较热门的开源代 ...

  4. 调用GOOGLE的TTS实现文字转语音(XE7+小米2)(XE10.1+小米5)

    相关资料: 注意:在手机上必须选安装文字转语音引擎“google Text To Speech”地址:http://www.shouji56.com/soft/GoogleWenZiZhuanYuYi ...

  5. [LintCode] Permutations

    http://www.lintcode.com/en/problem/permutations/# Given a list of numbers, return all possible permu ...

  6. python使用httplib2访问REST服务的例子

    首先你需要安装httplib2,这个可以在github上找到: 然后你需要获得一个http连接的对象: con = httplib2.Http()   然后你需要发起连接: (6)resp, (5)c ...

  7. 省市区三级联动picker-view-微信小程序

    这个是微信小程序的picker-view组件,开发的省市区3级联动,体验还不错,就分享给大家了, 此版本的省市区数据为本地JS数据,免去请求加载数据了,大家直接看源码,先看下面的动图:   项目地址: ...

  8. 记Asp.Net Core Swagger 使用 并带域接口处理

    引用作者原话:Asp.Net的WebApi中使用Swagger作为说明和测试的页面是非常不错的,比起WebApiTestClient来至少在界面上的很大的提升.但是使用Swagger时如果只是一般的控 ...

  9. Spring Cloud实践之服务注册与发现Eureka

    一.简述: 服务提供者producer与服务消费者consumer都注册到eureka server,然后服务consumer在其应用内直接调用producer的服务名来调用服务,而不是像之前一样调用 ...

  10. 201621123018《java程序设计》第12周作业总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书馆管理系统或购物车. 2.1 简述如何 ...