AJAX
一、AJAX
(一)简介
Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
Ajax解决了html组件少的问题。实现了异步提交、局部刷新,提升了用户体验。
早期ajax的实现:使用JavaScript实现。XMLHttpRequest对象,专门用于进行请求的发送,和响应的接收。
缺点:
1、若使用JS的AJAX技术,为了实现简单功能,就需要书写大量复杂代码。
2、JS的AJAX代码,浏览器兼容性比较差。
(二)常见的Ajax框架
底层框架:prototype(prototype.js) 、 jQuery(jquery.js) axios…
高层框架:YUI(Yahoo User Interface)、 EXTJS、 Dojo …
服务器端框架:
DWR 使用JS直接调用普通java类中的方法
GWT(google)
(三)ajax的应用场景
1、检查用户名是否已经被注册
很多站点的注册页面都具备自动检测用户名是否存在的友好提示,该功能整体页面并没有刷新,但仍然可以异步与服务器端进行数据交换,查询用户的输入的用户名是否在数据库中已经存在。
2、省市二联下拉框联动
很多站点都存在输入用户地址的操作,在完成地址输入时,用户所在的省份是下拉框,当选择不同的省份时会出现 不同的市区的选择,这就是最常见的省市联动效果
3、内容自动补全
不管是专注于搜索的百度,还是站点内商品搜索的京东,都有搜索功能,在i搜索框输入查询关键字时,整个页面没 有刷新,但会根据关键字显示相关查询字条,这个过程是异步的。
京东自动补全:
4、其他
地图
视频播放
邮件显示
邮件的自动保存功能
(四)jQuery的Ajax
作为JavaScript一个类库,jQuery实现了ajax的功能。jQuery认为原生ajax过于复杂,所以进行了一次封装,并提供了多种书写方式。
1、$.ajax
(1)语法格式
$.ajax({
url:””,
data:{},
type:””,
dataType:””,
success:function(){},
error:function(){}
});
(2)说明
$.ajax 声明使用的jQuery ajax语法结构(部分属性)
url:请求的地址
data:需要发送的数据{} 里面书写json格式的数据 {名字:值,名字:值}
type:请求类型 get/post
dataType:声明返回数据(响应主体中)的类型/格式
success:执行成功之后调用的方法。(回调函数)
error: 执行失败后调用的方法。(回调函数)
(3)注意事项
1、注意不要写错单词。
2、ajax严格区分大小写。
3、data为数据 date为日期不要写混。
4、所有符号一定是英文的。
5、ajax中书写的每一项结尾都要跟随逗号,除最后一个
6、dataType T要大写。
7、.ajax内的选项不区分顺序,不需要时也可以省略。2、.ajax内的选项不区分顺序,不需要时也可以省略。 2、.ajax内的选项不区分顺序,不需要时也可以省略。2、.get()
(1)语法结构
$.get(url[, data][, success][,returnType])
$.get(
”url”,
{json数据},
function(obj){},
”返回数据格式”
);
(2)特点
发送的是get请求。
直接使用jQuery ajax中的get发送异步请求。虽然变得写法简单,但是没有error回调函数,出错调试比较考验功底。很重要的一条,顺序不能错。
第一个参数是url地址
第二个参数是发送的数据
第三个参数是成功回调的函数
第四个参数是返回值的类型
3、$.post()
(1)语法格式
$.post(url[, data][, success][,returnType])
.post(”url”,json数据,function(obj),”返回数据格式”);(2)特点发送的是post请求,其他与.post( ”url”, {json数据}, function(obj){}, ”返回数据格式” ); (2)特点 发送的是post请求,其他与.post(”url”,json数据,function(obj),”返回数据格式”);(2)特点发送的是post请求,其他与.get相同。
4、$.getJSON()
(1)语法格式
$.getJSON(url[, data][, success])
$.getJSON(
”url”,
{json数据},
function(obj){},
”返回数据格式”
);
(2)特点
获得到的响应数据(回调函数的参数obj)是JSON类型(不是字符串类型 $.get 和 $.post是字符串类型)
(五)AJAX可以返回的数据类型
XML:早起AJAX都用XML传输数据(被JSON取代)
text:文本格式,字符串格式(所有数据都能用这种格式接收)
HTML:可以直接返回HTML代码
script:脚本代码
JSON:当今最流行的数据回交互方式
JSONP:也是JSON格式,但是支持跨域访问。
二、JSON
(一)JSON简介
JSON是一种数据的格式,本质就是一个特殊格式的字符串。 JSON格式的数据也可以直接使用text去接收。
在编写JSON的时候,如果数据较多无法直接查看JSON的语法错误,可以借助线上工具
http://www.bejson.com/
使用AJAX的时候所有JSON返回类型的数据,只要格式正确默认都已经将返回的字符串转化成了对象(js对象)。可以直接操作这个对象。
第一种格式:数组格式
[1,2,4,5,7,7]
第二种格式:键值对格式(对象格式),常规的JSON格式
{“name”:“张三”,“age”:49}
第三种格式:混合模式
[{“name”:“张三”,“age”:49},{“name”:“李四”,“age”:3}]
{“name”:[1,2,5],“age”:49}
第四种格式:可以支持直接返回boolean值
var stu = {id:1,name:‘张三’,age:20,sayHello:function(){alert(‘hello…’)}};
alert(stu.id);
alert(stu.name);
alert(stu.age);
stu.sayHello();
for(k in stu){
alert(k+“<<<>>>”+stu[k])
}
var ss = [{id:1,name:‘张三’,age:20},{id:2,name:‘李四’,age:21},{id:3,name:‘王五’,age:22}];
for(var i=0;i<ss.length;i++){
}
研发时JSON数据基本不会自己定义(拼接字符串的方式讲java对象或集合转换成json格式,操作比较繁琐),都是通过工具转化。
(二)JSON转化工具
1、常见的转换工具
jsonlib 比较常见一种转化工具,通用但是功能不是特别强大。
fastjson 这个工具功能很强大,但是在Hibernate框架中转化会出现异常。解决不彻底(死循环)。
gson google提供的一个转换工具。
jackson 这种工具身经百战,未尝一败!(独孤求败)
2、Jackson介绍
是一个将对象、集合、数据等各种数据格式转化为JSON字符串的一个工具。
使用的时候需要导三个包
(1)转化对象
Student stu1 = new Student(1,“张三”,20);
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(stu1);
System.out.println(json);
(2)转化集合
Student stu1 = new Student(1,“张三”,20);
Student stu2 = new Student(2,“李四”,21);
Student stu3 = new Student(3,“王五”,22);
List list = new ArrayList<>();
list.add(stu1);
list.add(stu2);
list.add(stu3);
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(list);
System.out.println(json);
(3)转化多个集合(装入Map)
Student stu1 = new Student(1,“张三”,20);
Student stu2 = new Student(2,“李四”,21);
Student stu3 = new Student(3,“王五”,22);
List list = new ArrayList<>();
list.add(stu1);
list.add(stu2);
list.add(stu3);
Student stu4 = new Student(4,“小毛”,23);
Student stu5 = new Student(5,“小邓”,24);
Student stu6 = new Student(6,“小江”,25);
List list2 = new ArrayList<>();
list2.add(stu4);
list2.add(stu5);
list2.add(stu6);
Map<String,List> map = new HashMap<>();
map.put(“ss1”,list);
map.put(“ss2”,list2);
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(map);
System.out.println(json);
结果
{
“ss1”:[{“id”:1,“name”:“张三”,“age”:20},
{“id”:2,“name”:“李四”,“age”:21},
{“id”:3,“name”:“王五”,“age”:22}],
“ss2”:[{“id”:4,“name”:“小毛”,“age”:23},
{“id”:5,“name”:“小邓”,“age”:24},
{“id”:6,“name”:“小江”,“age”:25}]
}
三、AJAX案例
(一)注册验证用户名是否存在
1、数据库
数据库沿用之前的user表
2、注册页面
注册页面添加用户名验证部分
3、Servlet
@WebServlet(“/CheckUserNameServlet”)
public class CheckUserNameServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType(“text/html;charset=utf-8”);
PrintWriter out = response.getWriter();
String username = request.getParameter(“username”);
UserService service = new UserServiceImpl();
User user = service.getUserByUsername(username);
if(user==null){ // 用户名可用
out.print(“yes”);
}else{ // 用户名不可用
out.print(“no”);
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
4、DAO
public User findUserByUsername(String username) {
User user = null;
QueryRunner qr = new QueryRunner(DatasourceUtils.getDataSource());
String sql = “select * from user where username=?”;
try{
user = qr.query(sql,new BeanHandler<>(User.class),username);
}catch(Exception e){
e.printStackTrace();
}
return user;
}
(二)二级联动
1、数据库和实体类
create table country(
id int primary key auto_increment,
name varchar(20)
);
create table city(
id int primary key auto_increment,
name varchar(20),
country_id int,
constraint foreign key (country_id) references country(id)
)
insert into country values(null,‘中国’),(null,‘美国’),(null,‘日本’);
insert into city values(null,‘北京’,1),(null,‘上海’,1),(null,‘广州’,1),(null,‘纽约’,2),(null,‘洛杉矶’,2),(null,‘华盛顿’,2),(null,‘东京’,3),(null,‘大阪’,3)
public class Country {
private int id;
private String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
public class City {
private int id;
private String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
2、页面实现
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
ObjectMapper mapper = new ObjectMapper();
String str = mapper.writeValueAsString(list);
out.print(str);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
@WebServlet(“/CityServlet”)
public class CityServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String countryId = request.getParameter(“countryId”);
CityService service = new CityServiceImpl();
List list = service.getCityByCountryId(Integer.parseInt(countryId));
response.setContentType(“text/html;charset=utf-8”);
PrintWriter out =response.getWriter();
ObjectMapper mapper = new ObjectMapper();
String str = mapper.writeValueAsString(list);
System.out.println(str);
out.print(str);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
4、DAO
public class CountryDaoImpl implements CountryDao {
@Override
public List findAllCountry() {
List list = null;
String sql = “select * from country”;
QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
try {
list = qr.query(sql,new BeanListHandler<>(Country.class));
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
public class CityDaoImpl implements CityDao {
@Override
public List findCityByCountryId(int countryId) {
List list = null;
String sql = “select id,name from city where country_id=?”;
QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
try {
list = qr.query(sql,new BeanListHandler<>(City.class),countryId);
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
(三)自动补全
1、数据库和实体类
create table product(
id int primary key auto_increment,
productname varchar(200)
)
insert into product values(null,‘华为笔记本’);
insert into product values(null,‘小米笔记本’);
insert into product values(null,‘苹果笔记本’);
insert into product values(null,‘三星笔记本’);
insert into product values(null,‘华硕笔记本’);
insert into product values(null,‘华为手机’);
insert into product values(null,‘小米手机’);
insert into product values(null,‘苹果手机’);
insert into product values(null,‘富士苹果’);
public class Product {
private int id;
private String productname;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getProductname() {
return productname;
}
public void setProductname(String productname) {
this.productname = productname;
}
}
2、页面实现
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
<!-- 展示结果的div -->
<div style="width:300px" id="dd" onmouseover="changebgc(event)" onmouseout="changebgcback(event)" onclick="changeContent(event)"></div>
3、Servlet @WebServlet("/ProductServlet") public class ProductServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String productname = request.getParameter("productname"); ProductService service = new ProductServiceImpl(); List list = service.getProductByName(productname); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter();
ObjectMapper mapper = new ObjectMapper();
String str = mapper.writeValueAsString(list);
out.print(str);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
4、DAO
@Override
public List findProductByName(String productname) {
List list = null;
if(!“”.equals(productname)) {
String sql = “select * from product where productname like ?”;
QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
try {
list = qr.query(sql,new BeanListHandler<>(Product.class),“%”+productname+“%”);
} catch (SQLException e) {
e.printStackTrace();
}
}
return list;
}