10-ajax技术简介
一.ajax是什么？
是网页中的异步刷新技术。其核心是js+xml
二.执行过程
1.js的核心对象XMLHttpRequest是一个具备像后台发送请求的一个对象
2.XMLHttpRequest可以异步发送请求
3.指定回调函数
4.等待后台响应，这个过程是异步的。此时网页中的其他元素是处于可用状态
5.响应得到后会执行回调函数来局部刷新网页
三。好处：
1.用户体验感增强
2.不用等待操作结果
3.提高带宽的使用率
四。Json数据的使用
1.json是一种纯字符串的数据格式，可以用来描述复杂的对象或数组
2.使用场景：可以将java对象和json格式的数据互相装换
3.使用步骤，在项目中要加入json转换的jar包
实例：验证用户名重复+省市区下拉列表联动
checkUsername.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
var xmlhttp;//全局变量
function checkName(value){
//1.要获取XMLHttpRequest对象
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//指定回调函数
xmlhttp.onreadystatechange=reback;//回调函数是专门处理后台响应后的数据变化
//打开连接 指定提交方式，指定url地址 指定是否异步（true为异步 false同步）
//js中向后台传中文参数需要转码encodeURI('张三')
xmlhttp.open("post","ajaxCheckName?name="+encodeURI(value),true);
//设置传参方式为表单提交
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xmlhttp.send();
} function reback(){
//判断各种响应状态
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//获取后台响应过来的数据，只能接收字符串
if(xmlhttp.responseText=='true'){//用户名重复
document.getElementById('mess_name').style.color="red";
document.getElementById('mess_name').innerHTML="用户名重复";
}else{
document.getElementById('mess_name').style.color="green";
document.getElementById('mess_name').innerHTML="用户可用";
}
}
} //Jquery的方式来做ajax，效果同上
$("document").ready(function (){
$("#username").bind("blur",function(){
$.post("ajaxCheckName?name="+this.value,function(data){
if(data=="true"){
$("#mess_name").css("color","red");
$("#mess_name").html("用户名重复");
}else{
$("#mess_name").css("color","green");
$("#mess_name").html("用户名可用");
}
});
});
}); $("document").ready(function (){
$.post("address?type=province",function(data){
var str = "";
console.log(data);
$.each(JSON.parse(data),function(i,address){
console.log(i,address.id,address.name,address.type);
str += "<option value='"+address.id+"'>"+address.name+"</option>";
});
$("#pro").html(str);
}); $("#pro").bind("change",function(){
$.post("address?type=city&proid="+this.value,function(data){
var str = "";
console.log(data);
$.each(JSON.parse(data),function(i,address){
console.log(i,address.id,address.name,address.type);
str += "<option value='"+address.id+"'>"+address.name+"</option>";
});
$("#city").html(str);
});
}); $("#city").bind("change",function(){
$.post("address?type=area&cityid="+this.value,function(data){
var str = "";
console.log(data);
$.each(JSON.parse(data),function(i,address){
console.log(i,address.id,address.name,address.type);
str += "<option value='"+address.id+"'>"+address.name+"</option>";
});
$("#area").html(str);
});
});
});
</script>
<body>
<button onclick="checkName()">测试</button> <div id="myDiv"></div>
<input name="" onblur="checkName(this.value)">
<span id="err" style="color: red;"></span> <br>
<input> <div align="center">
<form action="">
用户名:<input id="username"><span id="mess_name"></span><br>
密码:<input><br>
地址:<select id="pro">
<option>请选择省份</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
<select id="area">
<option>请选择地区</option>
</select>
</form>
</div>
</body>
</html>
AjaxCheckNameServlet.java
package com.control; import java.io.IOException;
import java.io.PrintWriter; 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("/ajaxCheckName")
public class AjaxCheckNameServlet extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name"); PrintWriter out = resp.getWriter();//获取输出流
if("海文".equals(name)){//用户名重复
out.print("true");
}else{
out.print("false");
}
out.flush();
out.close();
}
}
AddressServlet.java
package com.control; import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
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 com.pojo.Address;
import com.service.AddressService;
import com.service.IAddressService; import net.sf.json.JSONArray;
@WebServlet("/address")
public class AddressServlet extends HttpServlet{
IAddressService addSer = new AddressService();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String type = req.getParameter("type");
List<Address> list = null;
if("province".equals(type)){//获取省份数据
list = addSer.getAllProvince();
} if("city".equals(type)){//获取城市
String proid = req.getParameter("proid");
list = addSer.getChildByParentid(proid);
} if("area".equals(type)){//获取地区
String cityid = req.getParameter("cityid");
list = addSer.getChildByParentid(cityid);
}
//将java对象转换成json数据
JSONArray json = JSONArray.fromObject(list); //将json响应给前台
resp.setCharacterEncoding("UTF-8");//解决响应的中文乱码问题
PrintWriter out = resp.getWriter();
out.print(json.toString());
out.flush();
out.close();
}
}
10-ajax技术简介的更多相关文章
- AJAX技术简介
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML CSS JavaScript ...
- SpringMVC: Ajax技术
SpringMVC:Ajax技术 简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网 ...
- 掌握 Ajax，第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
- 10 ajax
Ajax准备知识:json 什么是json? 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w ...
- Json介绍与Ajax技术
AJAX AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据 ...
- Ajax技术
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- AJAX（一）AJAX的简介和基础
本节简介(异步链接服务器对象)XMLHTTPRequest以及AJAX的简介. AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML). AJ ...
- Java之Ajax技术
ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...
- Java Servlet 技术简介
Java Servlet 技术简介 Java 开发人员兼培训师 Roy Miller 将我们现有的 servlet 介绍资料修改成了这篇易于学习的实用教程.Roy 将介绍并解释 servlet 是什么 ...
- 你真正的了解Ajax？Ajax技术简述
Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来 ...
随机推荐
- ASP.NET MVC5多语言切换快速实现方案
功能 实现动态切换语言,Demo做了三种语言库可以切换,包括资源文件的定义,实体对象属性设置,后台代码Controller,IAuthorizationFilter,HtmlHelper的实现,做法比 ...
- 痞子衡嵌入式：飞思卡尔Kinetis系列MCU启动那些事（1）- KBOOT架构
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔Kinetis系列MCU的KBOOT架构. Bootloader是嵌入式MCU开发里很常见的一种专用的应用程序,在一个没有Boo ...
- 关于跨DB增量（增、改）同步两张表的数据小技巧
有些场景下,需要隔离不同的DB,彼此DB之间不能互相访问,但实际的业务场景又需要从A DB访问B DB的情形,这时怎么办?我认为有如下常规的三种方案: 1.双方提供RESET API,需要访问不同DB ...
- C# Task 篇幅一
在https://www.cnblogs.com/loverwangshan/p/10415937.html中我们有讲到委托的异步方法,Thread,ThreadPool,然后今天来讲一下Task, ...
- WPF TextBox/TextBlock 文本超出显示时，文本靠右显示
文本框显示 文本框正常显示: 文本框超出区域显示: 实现方案 判断文本框是否超出区域 请见<TextBlock IsTextTrimmed 判断文本是否超出> 设置文本布局显示 1. Fl ...
- [MySQL] explain中的using where和using index
1. 查看表中的所有索引 show index from modify_passwd_log; 有两个 一个是id的主键索引 , 一个是email_id的普通索引 2. using index表示 ...
- Docker安装nginx
直切正题: 一.安装nginx docker pull nginx 二.启动nginx容器 docker run --name mynginx -d -p : nginx 命令说明: -p 80:80 ...
- php设计模式--面向对象编程规范PSR
php业界提出大家要遵循的面向对象编码规范,下面一一列出. PSR-0: 1.命名空间必须与绝对路径一致 2.类的首字母必须大写 3.出入口文件外,其他‘.php’必须只有一个类 PSR-1:基础编码 ...
- 2019前端面试题汇总（主要为Vue）
摘要: 经典面试题. 原文:2019前端面试题汇总(主要为Vue) 作者:前端小酱 Fundebug经授权转载,版权归原作者所有. 毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道 ...
- 利用Azure虚拟机安装Dynamics CRM 2016实例
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复181或者20151215可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! Dynamics CRM Ser ...