AJAX
1. 简介
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术,在无需重新加载整个网页的情况下,能够更新部分网页。
2. Ajax的基本使用
<input onblur="check()" />
<h1 id="msg"></h1>
// 创建异步请求对象
var xmlhttp = new XMLHttpRequest();
// 设置请求类型、请求地址以及参数、是否异步
xmlhttp.open("post","HelloServlet",true);
// 设置请求头部信息
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
// 发送请求
xmlhttp.send("userName="+$("input").val());
// 状态监听
xmlhttp.onreadystatechange = function(){
// 当状态为4 响应码为200的时则表示请求完成
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
// 获取返回请求结果
var result = xmlhttp.responseText;
// 根据请求结果进行处理
if(result == 1){
$("#msg").text("恭喜你,可以使用此用户名");
}else{
$("#msg").text("对不起,此用户名已被使用");
}
}
};
后台代码:
// 获取用户提交的请求参数
String name = request.getParameter("userName");
PrintWriter pw = response.getWriter();
// 当用户名是seven返回字符串0,否则返回字符串1
if("seven".equals(name)){
pw.write("0");
}else{
pw.write("1");
}
3. JQuery中的Ajax使用
// $.ajax 表示jquery中的ajax的调用方式
$.ajax({
"url":"HelloServlet", // 请求地址
"data":"userName="+$("input").val(), //参数
"type":"POST", // 请求类型
"success":function(data){ // 请求成功时的回调函数
if(data == 1){
$("#msg").text("恭喜你,可以使用此用户名");
}else{
$("#msg").text("对不起,此用户名已被使用");
}
},
"error":function(){ // 请求失败时的回调函数
}
});
后台代码同上。
如果与服务器交互的数据时json格式可使用如下方式:
/*
使用 HTTP GET 请求从服务器加载 JSON 编码的数据
第1个参数为请求地址,第2个参数为请求参数,请3个参数为成功时的回到函数
*/
$.getJSON("HelloServlet",{userName:$("input").val()},function(data){
// 如果返回的json字符串定义了result的键,可以直接通过键取出值进行判断操作
if(data.result){
$("#msg").text("恭喜你,可以使用此用户名");
}else{
$("#msg").text("对不起,此用户名已被使用");
}
});
后台代码:
// 获取用户提交的请求参数
String name = request.getParameter("userName");
PrintWriter pw = response.getWriter();
if("seven".equals(name)){
pw.write("{\"result\":false}");
}else{
pw.write("{\"result\":true}");
}