JS原⽣Ajax配合java后端
JS原⽣Ajax
【学习⽬标】
1，了解JS原⽣Ajax原理
2，掌握json数据格式
掌握json数据格式⽅式
掌握json的解析⽅式
3，掌握jQuery中的Ajax封装
4，使⽤Ajax实现特效
实现异步验证⽤户名是否存在
实现站内搜索功能
Ajax基本概念
1.1.1 Ajax概述
什么是同步，什么是异步
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态
异步现象：客户端发送请求到服务器端，⽆论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死
1.1.2 Ajax的运⾏原理原生js和js的区别
页⾯发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间⾥，客户端可以进⾏任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从⽽执⾏⾃定义的js逻辑代码完成某种功能。Ajax异步请求与同步请求对⽐如下图所⽰。
1.2 JS原⽣的Ajax技术（了解）
js原⽣的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进⾏学习的，要使⽤js原⽣的Ajax完成异步操作，有如下⼏个步骤：
1)创建Ajax引擎对象
2)为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3)绑定提交地址
4)发送请求
5)接受响应数据
【练习题⽬】：在页⾯中添加⼀个按钮，点击发送ajax请求。
开发步骤：
创建WEB ⼯程
编写JSP 页⾯
编写Servlet代码处理异步请求
运⾏测试
【第⼀步】创建Web⼯程：day08
注意：选择servlet2.5或以上版本，编译jdk选⼤于5的，⽐如6或7的。
【第⼆步】新加ajax.jsp页⾯，编写代码实现发送请求
静态html代码
<body>
</body>
编写JS实现JS原⽣ajax功能
function fn1() {
//发送异步请求
//1.创建ajax引擎对象----所有操作都是由ajax引擎完成
var xmlHttp = new XMLHttpRequest();
//当状态变化时处理的事情
if (adyState == 4 && xmlHttp.status == 200) {
var data = sponseText;
//alert(data);
}
}
//第⼀个参数：请求⽅式GET/POST
//第⼆个参数：后台服务器地址
/
/第三个参数：是否是异步 true--异步  false--同步
xmlHttp.open("GET", "${tPath}/ajaxServlet?username=zhangsan",
true);
xmlHttp.send();
}
注意：接收响应信息应该在监听事件中完成，并且只有当readyState为4（即请求已处理完毕，响应已准备就绪），并且status为200（正常响应）时，⽅可处理响应信息。
【第三步】编写Servlet处理异步请求
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取⽤户名
String name = Parameter("username");
}
【第四步】测试
点击按钮，异步请求从后台服务器返回⼀个随机数和传递的参数值。
【练习扩展】对⽐异步与同步的区别
异步与同步的主要区别是：同步必须等待后台响应结束，页⾯才可以进⾏其他操作，出现卡死状态。⽽异步请求，页⾯不受服务器响应影响，即使服务器未发回响应，客户端仍然可以做其他操作。为了对⽐两者的不同，现在页⾯中添加两个按钮，分别实现同步发送请求和测试点击情况。
1.ajax.jsp页⾯中
编写fn2函数
function fn2() {
//发送同步请求
//1.创建ajax引擎对象----所有操作都是由ajax引擎完成
var xmlHttp = new XMLHttpRequest();
//当状态变化时处理的事情
if (adyState == 4 && xmlHttp.status == 200) {
var data = sponseText;
//alert(data);
}
}
//第⼀个参数：请求⽅式GET/POST
//第⼆个参数：后台服务器地址
//第三个参数：是否是异步 true--异步  false--同步
false-同步请求
xmlHttp.open("GET", "${tPath}/ajaxServlet",
false);
xmlHttp.send();
}
2.在AjaxServlet中使⽤线程的sleep⽅法，模拟服务器响应⼀段时间
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
().write("zhangsan");
try {
线程sleep模拟服务器执⾏⼀段时间
Thread.sleep(5000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//获取⽤户名
String name = Parameter("username");
}
3.页⾯效果对⽐：
点击异步请求服务器按钮，则在后台未响应回客户端之前仍然可以点击测试按钮，但点击同步请求服务器按钮，则在后台未响应回客户端之前⽆法点击测试按钮。
注意：在JS原⽣Ajax中，也可以指定如果是post提交
在发送请求之前设置⼀个头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
总结：
所⽤异步访问都是ajax引擎
1.3 Json数据格式（重要）
1.3.1 json作⽤
json是⼀种与语⾔⽆关的数据交换的格式，其主要作⽤：
1)使⽤ajax进⾏前后台数据交换
2)移动端与服务端的数据交换
1.3.2 Json的格式与解析
json有两种格式：
1)对象格式：{"key1":obj,"key2":obj,"key3":}
例如：user对象⽤json数据格式表⽰
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}
2)数组/集合格式：[obj,]
List ⽤json数据格式表⽰
[{"pid":"10","pname":"⼩⽶4C"},{},{}]
注意：对象格式和数组格式可以互相嵌套
注意：json的key是字符串  json的value是Object
json的解析：
json是js的原⽣内容，也就意味着js可以直接取出json对象中的数据
【Json练习⼀】使⽤对象格式保存Person对象
【Json练习⼆】使⽤对象格式保存Person集合对象
其余案例请见源码day08/WebContent/json下的json01.html-json05.html。
1.3.3 Json的转换插件
通常在开发过程中，服务器端经过处理的数据为对象或者集合等类型，⽽返回页⾯时⼜需要将数据转换成json格式。如果这个过程完全⼿动拼接json字符串，则⼤⼤降低开发效率。因此，出现很多json转换的插件，主要⽬的就是将java的对象或集合转成json形式字符串。开发⼈员只要知道如果调⽤API即可。
常⽤的json转换⼯具有如下⼏种：
jsonlib：
Gson：google
fastjson：阿⾥巴巴
以上⼏种⼯具的具体使⽤步骤基本⼀致，分为以下⼏步：
第⼀步：引⼊jar包。
第⼆步：调⽤相应的API⽅法，实现将Java对象或集合转成Json字符串。具体API⽅法则在后⾯的案例中详细讲解。
1.4 Jquery的Ajax技术（重点）
jquery是⼀个优秀的js框架，⾃然对js原⽣的ajax进⾏了封装，封装后的ajax的操作⽅法更简洁，功能更强⼤，与ajax操作相关的jquery⽅法有如下⼏种，但开发中经常使⽤的有三种
$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])
其中：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表⽰服务器端成功响应所触发的函数（只有正常成功返回才执⾏）
type：表⽰服务器端返回的数据类型（jquery会根据指定的类型⾃动类型转换）
常⽤的返回类型：text、json、html等。
$.ajax( { option1:value1, } ); ---- 以后在掌握
常⽤的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使⽤json格式
dataType：服务器端返回的数据类型，常⽤text和json
success：成功响应执⾏的函数，对应的类型是function类型
type：请求⽅式，POST/GET
url：请求服务器端地址
1.5 实例Demo
1.5.1 注册时异步校验⽤户名是否可⽤
【功能描述】：在之前的项⽬中，有注册模块。⼀般在⽤户注册时，在填写⽤户名并⽂本框失去光标时，应该马上知道该⽤户名是否可⽤。该功能可以使⽤ajax的异步请求⽅法实现。具体步骤如下：
步骤⼀：创建WEB⼯程。在本案例中，为节约时间，我们使⽤之前的day07项⽬下的注册模块。
步骤⼆：在regist.jsp中添加异步请求
步骤三：添加后台服务器端处理的Servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = Parameter("username");
，验证⽤户名是否存在
UserService service = new UserService();
boolean isExist = service.checkUsername(username);
//⾃⼰⼿动拼接json字符串
}
步骤四：Service层和Dao层
UserService.java中
public boolean checkUsername(String username) {
UserDao dao = new UserDao();
Long count = 0L;
try {
count = dao.checkUsername(username);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return count>0?true:false;
}
UserDao.java中
public Long checkUsername(String username) throws SQLException {
QueryRunner runner = new DataSource());
String sql ="select count(*) from user where username=?";
Long row = (Long)runner.query(sql, new ScalarHandler(), username);
return row;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。