Ajax的定义
Ajax被认为是(Asynchronous JavaScript and XML的缩写)。允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。
Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
一、使用JavaScript实现Ajax技术
1.首先建立一个jsp页面,导入js页面并且新建一个测试按钮。
2.其中我们在js页面先需要获取XmlHttpRequest对象,并且需要处理兼容问题
获取XmlHttpRequest对象functiongetXMLHttpRequest() {var xmlHttpReq=null;if (window.XMLHttpRequest) {//Mozilla 浏览器
xmlHttpReq = newXMLHttpRequest();
}else{if (window.ActiveXObject) {//IE 浏览器
try{
xmlHttpReq= new ActiveXObject("Microsoft.XMLHTTP");
}catch(e) {try {//IE 浏览器
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e) {
}
}
}
}return xmlHttpReq;
3.接着在相同页面下开始写onload事件(get方法发送数据)
window.onload = function(){var btnDom=document.getElementById("btn");
btnDom.οnclick= function(){//ajax步骤
//1
var xhr =getXMLHttpRequest();//2.监听响应 如何判断能够正确请求和响应
xhr.onreadystatechange = function(){if(xhr.readyState == 4){ //响应结束
if(xhr.status == 200){ //正确响应
//接收响应数据
var data =xhr.responseText;
alert(data);
}
}
};//3.打开连接
/** method: get 或 post
* url: 请求路径
* async: true(表示异步，默认) false*/xhr.open("get","../ajaxGetServlet?age=18&userName=jack",true);//4.发送数据
xhr.send(null); //使用get请求send发送的数据都为null,且不能省略这一步
};
};
或者使用(post请求//第3第4步骤有区别)
window.onload = function(){var btnDom=document.getElementById("btn");
btnDom.οnclick= function(){//1
var xhr =getXMLHttpRequest();//2.
xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){var data =xhr.responseText;
alert(data);
}
}
};//3.
xhr.open("post","../ajaxPostServlet",true);/** 4.发送数据
* send() string或null
* String类型一般为键值对 "username=zhangsan"
* get请求 都是send(null)
* post请求要send数据需要设置请求头*/xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("user=admin&age=12");
};
};
其中步骤3的url需要我们创建一个servlet
public class AjaxGetServlet extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
String age= request.getParameter("age");
String userName= request.getParameter("userName");
System.out.println(age+"------"+userName);//响应数据
response.getWriter().print("hello"); //js中步骤2监听响应
}public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
doGet(request, response);
}
}
代码写完以后,我们只需要按一下(value="ajax")测试按钮就可以使用ajax技术实现异步请求与响应。
二、使用jQuery实现Ajax技术
案例:如何使用ajax技术实现用户注册时用户名是否被占用?
1.jsp注册页面
jquery 实现 ajax
用户名：
2.js页面(无需手动获取XmlHttpRequest对象)
$(function(){
$("#userName").blur(function(){var name = $(this).val();if(name.trim() == ""){return;
}//jquery 实现 ajax
$.ajax({
url:"../jqueryUserName", //请求的路径
type:"post", //请求方式 默认是get
data: { //要发送的数据
"name":name
},
dataType:"text", //响应数据的类型
success:function(result){ //正确响应
if(result == "yes"){
$("#msg").html("用户名可以使用");
}else{
$("#msg").html("用户名被占用");
}
},
error:function(){
alert("请求失败！");
}
});
});
});
3.servlet页面(获取用户名比较是否被占用)
public class JqueryUserName extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
System.out.println("jquery ajax 验证用户名！");
PrintWriter out=response.getWriter();
String name= request.getParameter("name");if("ajax".equals(name) || "admin".equals(name) || "jack".equals(name)){//用户名已被使用
out.print("no");
}else{
out.print("yes");
}
}public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
doGet(request, response);
}
}
