Ajax(javascript)案例
一、注册案例（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)案例的更多相关文章
- jQuery中的ajax用法案例
什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...
- Django（十二）视图--利用jquery从后台发送ajax请求并处理、ajax登录案例
一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...
- JavaScript案例开发之扑克游戏
随着时代的发展,知识也在日益更新,但是基础知识永远不会过时,它是新时代的基石,更是我们进一步学习的保障,下面带着大家用JavaScript开发一款真正的扑克游戏,和大家一起分享,希望你们能够喜欢:闲话 ...
- 关于ajax入门案例
$.ajax方法 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他ht ...
- node+ajax实战案例（2）
2.静态资源渲染 2.1.创建http服务器 var http = require('http'); var url = require('url'); var app = http.createSe ...
- ajax经典案例--省市联动
ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...
- ajax交互案例
数据交互是前端很重要的一部分,静态页是基础,而交互才是网页的精髓.交互又分为人机交互和前后端数据交互,现阶段的互联网下,大部分的网站都要进行前后端数据交互,如何交互呢?交互的流程大概就是前端发送数据给 ...
- JavaScript案例一：Window弹窗案例
注:火狐可运行,谷歌不可运行(安全级别高) <!DOCTYPE html> <html> <head> <title>JavaScript 弹窗案例&l ...
- JQuery的ajax登录案例
1.简单版AjaxLogin.html代码: <head> <title></title> <script src="jquery-1.8.3.js ...
随机推荐
- leetcode - [4]Sort List
Sort a linked list in O(n log n) time using constant space complexity. 思路:采用归并排序或者快速排序 #include < ...
- LoadRunner改脚本
加action,不支持嵌套大括号 Action(){int iCt = 0; iCt = lr_output_message("abcdefg"); iCt = funA(3,5) ...
- （转）什么是.NET？什么是CLI？什么是CLR？IL是什么？JIT是什么，它是如何工作的？GC是什么，简述一下GC的工作方式？
转自:http://www.cnblogs.com/haofaner/articles/2288968.html 1:什么是.NET? NET 是 Microsoft 的用以创建 XML Web 服务 ...
- uva12298(生成函数)
生成函数的一般应用: #include<iostream> #include<cstring> #include<cmath> #include<cstdio ...
- linux 配置阿里云yum库
备份当前yum库 mv /etc/yum.repos.d /etc/yum.repos.d.backup4comex 新建yum源配置目录 mkdir /etc/yum.repos.d 设置阿里yum ...
- svn本地如何切换账号
SVN如何切换账号 在使用svn更新或提交数据时需要输入用户名和密码,在输入框中可以选择是否记录,以便下次操作无需再次输入用户名和密码: 要切换其他用户名时,需要删除已记录用户的数据,在电脑桌面上 ...
- Codeforces Round #298 (Div. 2)--D. Handshakes
#include <stdio.h> #include <algorithm> #include <set> using namespace std; #defin ...
- Mysql逻辑分层、存储引擎
Mysql的逻辑分层: 连接层 服务层 引擎层 存储层 常见的数据库引擎有InnorDB和MylSAM. InnorDB:事物优先,(适合高并发操作:行锁,顾名思义一次锁一行数据) MylSAM:性能 ...
- VS IDE 中Visual C++ 中的项目属性配置
VS IDE 中Visual C++ 中的项目属性配置 一. Visual C++ 项目系统基于 MSBuild. 虽然可以直接在命令行上编辑 XML 项目文件和属性表,我们仍建议你使用 VS IDE ...
- GDI+配置
GDI+的配置过程: 一.打开stdafx.h文件,在其中加入: #include "Gdiplus.h" #pragma comment(lib,"Gdiplus.h& ...