文章目录
Java基础(六)Ajax
Ajax简介
在之前使用form进行提交,经过servlet返回数据后才会刷新。这会使整个页面刷新,这在某些方面会很不好,所以使用Ajax进行局部刷新(也就是整个页面的其他部分不变,页面也不会跳转,只对局部进行更新)
Ajax用于局部刷新,Ajax的实现方式有两种:js的实现方式,jQuery的实现方式。
Ajax的JS实现方式
Ajax的实现通过js中类XMLHttpRequest的对象实现对于局部的访问servlet、得到响应并执行响应成功后的回调函数。
XMLHttpRequest对象的方法:
-
open(提交方式,服务器地址,true)准备建立与服务器那个地址的连接。
提交方式就是:get、post。服务器地址是:服务器地址中url。true是执行局部刷新,false就不进行局部刷新。
-
setRequestHeader(key,value)设置头信息。
- get方式的头信息:不需要设置。
- post方式的头信息:
- 请求中包含文件上传:setRequestHeader(“Content-Type”, “mutipart/form-data”);
- 请求中不包含文件上传:setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
-
send(参数)发送请求,并将参数值拼接到open中的url中。
- get方式:send(null),参数值写在url中。
- post方式:send(参数),参数是键值对等号形式例如:"sno=1&sname=‘zs’"
发送过去后在servlet中获取参数值使用getParameter。
XMLHttpRequeset对象的属性:
- readyState:请求状态。
- 0:XMLHttpRequest对象没有初始化
- 1:对象开始发送请求完成了open及相关资源的准备
- 2:对象请求发送完,完成了send,但没有收到响应
- 3:对象收到响应,但是没有接受完响应
- 4:对象接受完响应,直到4才是一次完整的访问。
- status:响应状态。
- 200:服务器正常
- 400:无法找到请求的资源
- 403:没有访问权限
- 404:访问资源不存在
- 500:代码错误
- onreadystatechange:响应完成后调用的回调函数(只用写函数名即可)。
- responseXML:响应完成后接受的数据是xml格式。
- responseText:响应完成后接受的数据是text格式。
例如:
手机号:<input type="text" id="mobile"/><br/>
<input type="button" value="点击查看是否有此手机号" onclick="check()"/>
<script>
function check(){
var mobile = document.getElementByID("mobile").value;
xml = new XMLHttpRequest();
xml.open("post", "MyServlet", "true");
xml.onreadystatechange = callBack;
xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xml.send("mobile=" + mobile);
}
function callBack(){
//检查状态,在请求响应没有完成(也就是说在请求响应过程中)会一直进行请求响应,但是我们只需要的是请求状态是4,响应状态是200的完成时刻。
if(xml.readyState == 4 && xml.status == 200){
var isExists = xml.responseText;
alert(isExists);
}
}
</script>
值得注意的是:在请求响应过程中会一直进行客户端服务端之间的请求响应,而不是在客户端send后就只有一个响应,这点切记!!!
@WebServlet(name = "MyServlet", urlPatterns = "/MyServlet")
public class MyServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
String mobile = request.getParameter("mobile");
PrintWriter out = response.getWriter();
if("12345678910".equals(mobile)){
//write()、print()都可以。println才是进行页面显示的函数
out.write("true");
}
else{
out.write("false");
}
//可以进行close,因为这是客户端服务端之间进行的数据交换(数据已经备份到网络中进行发送)如果要是都在服务端进行返回out难么就不可以使用close(因为用的是一个out对象)
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
Ajax的jQuery实现方式
在工程上一般使用jQuery的Ajax,便捷。
jQuery需要在jsp中导入jQuery包。
第一种方式(既可以是get、也可以是post)
$.ajax({
//相当于配置xmlHttpRequest的一些参数,open(method, url, true),send(data)
url:服务器地址,
请求方式:get|post,
data:请求数据,
//下面两个相当于回调函数
seccess:function(result, testStatus){
//请求成功
//result是请求成功后服务端响应给客户端的数据,相当于xmlHttpRequest.responseText
//testStatus是状态
},
error:function(xhr, errorMessage, e){
//请求失败
}
})
实例:
$.ajax({
url:"TestAjax",
type:"post",
data:"mobile="+$mobile,
success:function(result, testStatus){
if(result == "true")
alert("注册成功");
else
alert("注册失败");
},
error:function(){
alert("服务端异常");
}
})
第二种方式: . g e t ( ) 、 .get()、 .get()、.post()(确定了是get还是post)
与第一种方式的区别:
- 没有大括号,直接在小括号中写代码。
- 没有键值对代码。(例如第一种方式在写代码的时候是url:xxxx这样的键值对)没有键值对会造成混乱,所以这种方式严格要求顺序不能乱。
- 没有error处理函数。
$.get(
服务器地址,
请求方式,
success的function(){
},
预期返回值类型(string\xml)
)
$.post(
服务器地址,
请求方式,
success的function(){
},
预期返回值类型(xml\text)
)
实例:
$.get(
"TestAjax",
"mobile="+$mobile,
function(result, testStatus){
if(result == "true")
alert("注册成功");
else
alert("注册失败");
},
"text"
)
Ajax处理JSON数据
JSON
JSON是一种数据格式(与关系型数据库类似,只不过关系型数据库的数据是以行列形式组织的,JSON的数据是以键值对组织的。)。
{key1:value1,
key2:value2,
key3:value3}
key是字符串形式。
JSON在语言中的表示
JavaScript可以直接解析JSON数据,但是Java不行(需要引入jar包创建JSON对象)。
六个包:
- commons-beanutils-1.7.0.jar
- commons-collections-3.2.1.jar
- commons-lang-2.6.jar
- commons-logging-1.1.3.jar
- ezmorph-1.0.6.jar
- json-lib-2.4-jdk15.jar
在Java中一般是以字符串形式表示JSON数据。
String json = "{\"key\":\"value\"}";//值为字符串
String json = "{\"key\":value}";//值为对象或数
在JavaScript中JSON数据可以直接表示
var json = {"name":"zs", "age":23};
处理(JSON数据是服务端给客户端传的数据)
为什么需要JSON?
因为在使用out输出流对象传给客户端的数据只能有一个,客户端在responseText时也只能或取一个数据,局限性太大。(由此可以想到传一个对象其中包含许多数据,所以使用JSON对象传输不同类型的数据。)
客户端:
<script>
function testJSON(){
//这是另一个get的提交方式,会解析JSON
$.getJSON(
"MyServlet",
function(result){
//以流的方式传递到客户端的,传递的是以java形式存在的JSON。js不一定可以接受所以需要转换成一个js可以识别的JSON)。使用eval进行转换。
var json = eval(result);
for(var key in json){
alter(key);//下标,也就是key
alter(json[key]);//值
}
/*或用each
$.each(json, function(i){
alter(i);//下标,也就是key
alter(json[i]);//值
})
*/
}
)
}
</script>
服务端:
response的PrintWriter out.write()与PrintWriter out.print()都具有作为流对象传输数据的功能。但是print可以传输Object对象,write不可以。
值得注意的时:**不要将out.print()与out.println()混淆!!!。**前者是传输,后者是显示。
@WebServlet(name = "MyServlet", urlPatterns = "/MyServlet")
public class MyServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//也可以不使用json对象。可以使用json字符串,因为JavaScript会自动解析json字符串
JSONObject json = new JSONObject();
json.put("sno", 1);
json.put("sname", "zs");
out.print(json);
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}