使用Ajax流程:
ajax:异步的javascript和xml,原理:使用XML,实现局部刷新

使用流程:
1.创建ajax引擎对象
2.声明事件监听:监听ajax对象的属性readystate的值,一旦readystate的值发生改变就会触发监听事件的执行
ajax的状态码之readystate的值:
0:表示ajax引擎对象创建
1:表示请求创建但是未发送 ajax.open("get","myservlet");
2:请求发送
3:请求才处理完毕,正在接收响应内容
4:响应内容接收完完毕(重要状态)
ajax的响应状态码:ajax.status
200:表示一切正常
500:资源未找到
404:服务器内部错误


ajax之响应数据:服务器响应给浏览器的数据应该是字符串类型,但是如果数据量比较大,我们就需要在服务器端将数据拼接成一个良好格式的字符串数据响应给浏览器,浏览器根据格式进行数据的解析和使用
3.创建并发送ajax请求

a、创建ajax请求(设置异步或者同步)
ajax.open(method,url,ansyc)
method:请求方式
get方式:请求数据以?隔开的形式拼接在url的后面,请求数据不能写在send方法中
post方式:post方式需要单独的进行请求数据的设置,使用ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");设置请求数据为键值对方式,如有请求数据使用ajax.send("键值对数据"&"键值对数据"...),如果没有直接写ajax.send(null)
url:请求地址
ansyc:设置异步(true)或则同步(false),默认异步
异步:当前js函数继续执行,无需等待ajax请求的响应以及响应的处理
同步:当前js函数继续执行,等待ajax请求以及响应,当ajax响应处理完毕后,继续执行函数的其他代码
b、发送ajax请求


二、ajax同步异步:
1.同步的好处:
a、同步流程对结果处理通常更为简单,可以就近处理。
b、同步流程对结果的处理始终和前文保持在一个上下文内。
c、同步流程可以很容易捕获、处理异常。
d、同步流程是最天然的控制过程顺序执行的方式。
2.异步的好处:
a、异步流程可以立即给调用方返回初步的结果。
b、异步流程可以延迟给调用方最终的结果数据,在此期间可以做更多额外的工作,例如结果记录等等。
c、异步流程在执行的过程中,可以释放占用的线程等资源,避免阻塞,等到结果产生再重新获取线程处理。
d、异步流程可以等多次调用的结果出来后,再统一返回一次结果集合,提高响应效率。
3.同步异步的实现方式:ajax.open(请求方式,url,同步异步(false/true));
三、JSON:JavaScript 对象表示法(JavaScript Object Notation)

1.json就是js创建对象的一种格式,保证对象数据的紧密型和完整性,格式:var 对象名={键名:值,键名:值,...键名:值}


2.使用:在服务器端将要响应的数据拼接成json格式的字符,这样客户端(浏览器端)在接收到响应数据后可以使用eval方法将json格式的字符串数据直接转换为对应的js对象,便于数据的操作,

我们可以在服务器端使用类似Gson的工具包完成json格式字符串的拼接

四、ajax封装:在使用ajax进行业务处理时,ajax的代码很多地方都是相同的,我们可以封装代码,提高开发效率
实现:相同的保留,不同的传参
请求方式:method
请求地址:url
请求参数:data请求参数的格式为键值对格式的字符串,不同的键值对使用&符号隔开,如果没有请求数据传入null
异步同步设置:ansyc
响应处理参数:deal200,该参数接收一个js的函数对象,函数对象中声明ajax响应数据的处理逻辑代码
注意:函数对象需要声明一个形参用来接收要处理的响应数据

五、JQuery中的ajax学习
jquery是js的一个轻量型框架,已经将js创建的操作进行了封装,而ajax也是js的异步分,所以JQuery也已经将ajax进行了封装
三种常用封装:
$.get(url,data,callback)
url:请求地址
data:请求参数,参数格式为json对象
callback:回调函数,注意函数要声明一个形参,用来接收响应数据
$.post(url,data,callback)
$.get/post方式:

$.ajax({json格式参数})方式:

结果:


六、三级联动案例
Ajax案例之三级联动:
功能需求:
1.页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框
2.选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中
3.出现对应的该市下面的区/县信息
技术分析:
ajax技术+jsp+servlet+jdbc
需求分析(思路):
1、创建页面:页面中有三个下拉框,分别为省、市、区/县
2、页面加载成功发起ajax请求,请求省的信息,并将响应结果
填充到省下拉框中
3、选择省触发一个新的js函数 的执行,该函数中发起新的ajax请求
请求该省下的市信息,并将响应数据填充到市下拉框
4、选择市信息触发一个新的js函数的执行,该函数中发起新的ajax请求,请求该市下的区/县信息,并将数据填充到区/县下拉框中
数据库设计:
创建表(area):存储了省、市、区/县信息
设计表实现一:只存储了数据,但是数据之间的层级关系没有存储。
地区id:areaid
地区名:areaname
设计表实现二:
地区id:areaid
地区名:areaname
地区上级id:parentid
数据库实现:将资料中提供的area.sql文件导入到数据库中即可(或百度sql文件)
功能实现:参照源码即可

具体代码:
实体类:

Dao层与实现类:


Service层与实现类


Servlet:

Jsp页面:

三级联动效果:


