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();
}
}