AJAX入门

发布于：2025-07-10 ⋅ 阅读:(18) ⋅ 点赞:(0)

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”%>

Insert title here 请选择 请选择 3、Servlet @WebServlet("/CountryServlet") public class CountryServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { CountryService service = new CountryServiceImpl(); List list = service.getAllCountry(); 
      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”%>

Insert title here 
<!-- 展示结果的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;
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布