在之前使用form进行提交,经过servlet返回数据后才会刷新。这会使整个页面刷新,这在某些方面会很不好,所以使用Ajax进行局部刷新(也就是整个页面的其他部分不变,页面也不会跳转,只对局部进行更新)
Ajax用于局部刷新,Ajax的实现方式有两种:js的实现方式,jQuery的实现方式。
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); } }在工程上一般使用jQuery的Ajax,便捷。
jQuery需要在jsp中导入jQuery包。
实例:
$.ajax({ url:"TestAjax", type:"post", data:"mobile="+$mobile, success:function(result, testStatus){ if(result == "true") alert("注册成功"); else alert("注册失败"); }, error:function(){ alert("服务端异常"); } })与第一种方式的区别:
没有大括号,直接在小括号中写代码。没有键值对代码。(例如第一种方式在写代码的时候是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" )JSON是一种数据格式(与关系型数据库类似,只不过关系型数据库的数据是以行列形式组织的,JSON的数据是以键值对组织的。)。
{key1:value1, key2:value2, key3:value3}key是字符串形式。
JavaScript可以直接解析JSON数据,但是Java不行(需要引入jar包创建JSON对象)。
六个包:
commons-beanutils-1.7.0.jarcommons-collections-3.2.1.jarcommons-lang-2.6.jarcommons-logging-1.1.3.jarezmorph-1.0.6.jarjson-lib-2.4-jdk15.jar在Java中一般是以字符串形式表示JSON数据。
String json = "{\"key\":\"value\"}";//值为字符串 String json = "{\"key\":value}";//值为对象或数在JavaScript中JSON数据可以直接表示
var json = {"name":"zs", "age":23};为什么需要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); } }