使用ajax(Asynchronous JavaScript and XML)的几种常用方式
Ajax使用
由于公司封装了一些Ajax的使用方法,在开发中使用Ajax时基本都是照搬,现在来重新系统的学习一下Ajax相关的知识,以下的都是基于原生的Servlet的例子。
使用js进行ajax
先看前台
<body>
验证账号重复:<input type="text" id="account" />
<input type="button" onclick="ajaxTest()">
</body>
<script>
function ajaxTest(){
var account = document.getElementById("account").value;
//通过ajax异步方式请求服务端
//变量之前没有写 var 表示该对象是一个全局对象
xmlHttpRequest = new XMLHttpRequest();
//设置xmlHttpRequest回调函数(函数名不需要写括号)
xmlHttpRequest.onreadystatechange = callBack;
xmlHttpRequest.open("post","ajaxTestServlet",true);
//不加上这句,那么后台Request.Form获取不到参数a,b的数值
//头信息要写在open下面
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send("account="+account);
}
//接受服务端的返回值
function callBack(){
//xmlHttpRequest对象的属性:
//readyState:请求状态
//status:相应状态
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var data = xmlHttpRequest.responseText;//服务端返回值为String格式
if(data == "testTrue"){
alert("存在");
}else{
alert("不存在");
}
}
}
</script>
需要注意的是xmlHttpRequest对象的readyState与status属性有多个值,其中readyState为4,status值为200时才是正常返回了的状态。
status为Http相应中的状态码
状态码 | 含义 |
---|---|
200 | 服务器正常相应 |
400 | 无法找到请求的资源 |
403 | 没有访问权限 |
404 | 访问的资源不存在 |
500 | 服务器内部错误 |
readyState表示XMLHttpRequest对象发送的HTTP请求状态
状态码 | 含义 |
---|---|
0 | 表示XMLHttpRequest未被初始化 |
1 | XMLHttpRequest对象开始发送请求,已经执行了open()方法 |
2 | XMLHttpRequest对象已经发送请求,已经执行了send()方法,但还没有接收到响应。 |
3 | XMLHttpRequest开始读取响应信息,已经接收到HTTP响应头信息,但还没有接受完成 |
4 | 全部读取完毕 |
再看后台
package com.sun.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class AjaxTestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求/相应的编码格式
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=UTF-8");
//获取参数值
String account = req.getParameter("account");
//获取输出流(通过输出流的方式返回给客户端)
PrintWriter writer = resp.getWriter();
//模拟验证
if("test".equals(account)){
writer.write("testTrue");
}else{
writer.write("testFalse");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("....doPost....");
doGet(req,resp);
}
}
这种方法非常麻烦,目前Jquery已经封装了方便的使用Ajax的方式。
使用Jquery(推荐)
Jquery本质上其实是对js进行了封装,但是这种方法使用起来非常方便。Jquery使用的版本是1.8.3
下面展示一些 内联代码片
。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>111</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
</head>
<body>
验证账号重复:<input type="text" id="account" />
<input type="button" onclick="ajaxTest()">
</body>
<script>
function ajaxTest(){
var account = $("#account").val();
$.ajax({
url:"ajaxTestServlet",
type:"get",
data:"account="+account,
//result返回值,
//testStatus返回状态
success:function(result,testStatus){
},
//如果服务端发生异常则进入error
error:function(xhr,errorMessage,e){
}
});
//以下为固定的格式
// $.ajax({
// url:地址,
// type:get | post,
// data:请求数据,
// //result返回值,
// //testStatus返回状态
// success:function(result,testStatus){
// },
// error:function(xhr,errorMessage,e){
// }
// });
}
</script>
</html>
这里只举了常用的使用方法,其中error:function(xhr,errorMessage,e)中的三个参数可选,可以不写。
Jquery($.get/)
这种方式需要注意的是参数值的顺序是严格规定不能换顺序。
以下为$.get方式的固定格式。
下面展示一些 内联代码片
。
$.get(
服务器地址,
请求数据,
function(result){
},
预期返回值类型("xml","json","text")
);
$.post格式跟get格式一样
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>111</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
</head>
<body>
验证账号重复:<input type="text" id="account" />
<input type="button" onclick="ajaxTest()">
</body>
<script>
function ajaxTest(){
var account = $("#account").val();
$.post(
"ajaxTestServlet",
"account="+account,
function(result){
alert(result);
},
"text"
);
}
</script>
</html>