一 : Ajax的阐述
面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能,写过移动端的小伙伴应该对此很了解,我们用的网络请求异步框架和Ajax功能一样.
Ajax可以对网页的某部分进行更新操作(局部刷新),传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页页面.
二 : js原生的Ajax技术
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行的,要使用js原生的Ajax完成异步操作，有如下几个步骤：
- 创建Ajax引擎对象
- 为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
- 绑定提交地址
- 发送请求
- 接受响应数据
异步访问服务器
function fn1(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span1").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("GET","/TZproject/ajaxServlet?name=zzz",true);
//4、发送请求
xmlHttp.send();
}
同步访问服务器
function fn2(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span2").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("POST","/TZproject/ajaxServlet",false);
//4、发送请求
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=lili");
}
三 : Json数据格式
作用 :
使用ajax进行前后台数据交换
移动端与服务端的数据交换
格式与解析
- 对象格式：
{"key1":obj,"key2":obj,"key3":obj...}
{"username":"雪芙","age":28,"password":"123","addr":"台湾"} - 数组/集合格式：
[obj,obj,obj...]
List<Product> 用json数据格式表示
[{"pid":"10","pname":"香蕉"},{},{}]
注意
- 对象格式和数组格式可以互相嵌套
- json的key是字符串 jaon的value是Object
Json的转换插件
- jsonlib
- Gson：google
- fastjson：阿里巴巴
四 : Jquery的Ajax技术
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种
- $.get(url, [data], [callback], [type])
function fn1(){
//get异步访问
$.get(
"/TZpro/ajaxServlet2", //url地址
{"name":"张三","age":25}, //请求参数
function(data){ //执行成功后的回调函数
//{\"name\":\"tom\",\"age\":21}
alert(data.name);
},
"json"
);
}
- $.post(url, [data], [callback], [type])
function fn2(){
//post异步访问
$.post(
"/TZpro/ajaxServlet2", //url地址
{"name":"李四","age":25}, //请求参数
function(data){ //执行成功后的回调函数
alert(data.name);
},
"json"
);
}
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
- $.ajax( { option1:value1,option2:value2... } );
function fn3(){
$.ajax({
url:"/TZpro/ajaxServlet2",
async:true,
type:"POST",
data:{"name":"猪油崽","age":18},
success:function(data){
alert(data.name);
},
error:function(){
alert("请求失败");
},
dataType:"json"
});
}
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址
五 : 实例异步校验用户是否存在
失去焦点后,通过ajax校验用户名是否存在
效果
-
页面
<script type="text/javascript">
$(function(){
//为输入框绑定事件
$("#username").blur(function(){
//1、失去焦点获得输入框的内容
var usernameInput = $(this).val();
//2、去服务端校验该用户名是否存在---ajax
$.post(
"${pageContext.request.contextPath}/checkUsername",
{"username":usernameInput},
function(data){
var isExist = data.isExist;
//3、根据返回的isExist动态的显示信息
var usernameInfo = "";
alert(isExist);
if(isExist){
//该用户存在
usernameInfo = "该用户名已经存在";
$("#usernameInfo").css("color","red");
}else{
usernameInfo = "该用户可以使用"
$("#usernameInfo").css("color","green");
}
$("#usernameInfo").html(usernameInfo);
},
"json"
);
});
});
</script>
-
web层-Servlet
//获得要校验的用户名
String username = request.getParameter("username");
UserService service = new UserService();
boolean isExt = false;
try {
isExt = service.checkUserName(username);
} catch (SQLException e) {
e.printStackTrace();
}
System.out.println(isExt);
response.getWriter().write("{\"isExist\":"+isExt+"}");
}
-
Service层
public boolean checkUserName(String username) throws SQLException {
UserDao dao = new UserDao();
Long isExt = dao.checkUserName(username);
return isExt > 0?true:false;
}
-
dao层
public Long checkUserName(String username) throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select count(*) from user where username=?";
Long isExt = (Long)runner.query(sql,new ScalarHandler(),username);
return isExt;
}
