Ajax的GET方式提交请求:
function ajax_get(){
var xhr = createXMLHttp();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var data = xhr.responseText;
document.getElementById("id1").innerHTML = data;
}
}
}
xhr.open("GET","/Web14/AjaxServlet1?name=aaa&pass=123",true);
xhr.send(null);
}
function createXMLHttp() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
Ajax的POST方式提交请求:
function ajax_post() {
var xhr = createXMLHttp();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var data = xhr.responseText;
document.getElementById("id1").innerHTML = data;
}
}
}
xhr.open("POST","/Web14/AjaxServlet1",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=post&pass=123");
}
案例:异步校验注册时用户名是否存在
1.采用传统Ajax方式:
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" onblur="checkUsername()"><span id="s1"></span></td>
</tr>
ajax_get.js:
function checkUsername() {
var xhr = createXMLHttp();
var username = document.getElementById("username").value;
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var data = xhr.responseText;
if(data == 1) {
document.getElementById("s1").innerHTML = "<font color='green'>用户名可用</font>";
}
if(data == 0) {
document.getElementById("s1").innerHTML = "<font color='red'>用户名已被占用</font>";
}
}
}
}
xhr.open("GET","/Web14/AjaxRegistServlet?username="+username,true);
xhr.send(null);
}
AjaxRegistServlet:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
String username = request.getParameter("username");
AjaxService ajaxService = new AjaxService();
User user = ajaxService.findUser(username);
if(user != null) {
response.getWriter().print(0);
}
if(user == null) {
response.getWriter().print(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
AjaxService:
public User findUser(String username) throws SQLException {
AjaxDao ajaxDao = new AjaxDao();
User user = ajaxDao.findUser(username);
return user;
}
AjaxDao:
public User findUser(String username) throws SQLException {
QueryRunner queryRunner = new QueryRunner(C3P0JDBCUtils.getDataSource());
String sql = "select * from user where username = ?";
User user = queryRunner.query(sql, new BeanHandler<User>(User.class), username);
return user;
}
2.采用JQuery方式:
jquery_regist方式:
/**
* get方法
*/
$(function() {
$("#username").blur(function() {
var username = $(this).val();
$.get("/Web14/JqueryRegistServlet",{"username":username},function(data) {
if(data == 1) {
$("#s1").html("<font color='green'>用户名可用</font>");
$("#regBut").attr("disabled",false);
}
else if(data == 0) {
$("#s1").html("<font color='red'>用户名已被占用</font>");
$("#regBut").attr("disabled",true);
}
});
});
});
/**
* load方法:
* $(function() {
$("#username").blur(function() {
//获得文本框的值
var username = $(this).val();
//load方法
$("#s1").load("/Web14/JqueryRegistServlet",{"username":username});
});
});
*/
JqueryRegistServlet:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
response.setContentType("text/html;charset=UTF-8");
response.setContentType("UTF-8");
String username = request.getParameter("username");
AjaxService ajaxService = new AjaxService();
User user = ajaxService.findUser(username);
if(user == null) {
response.getWriter().print(1);
}
if(user != null) {
response.getWriter().print(0);
}
} catch (SQLException e) {
e.printStackTrace();
}
}