JavaEE基础(六)Ajax

it2026-04-18  0

文章目录

Java基础(六)AjaxAjax简介Ajax的JS实现方式Ajax的jQuery实现方式第一种方式(既可以是get、也可以是post)第二种方式: . g e t ( ) 、 .get()、 .get().post()(确定了是get还是post) Ajax处理JSON数据JSONJSON在语言中的表示 处理(JSON数据是服务端给客户端传的数据)

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.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数据是服务端给客户端传的数据)

为什么需要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); } }
最新回复(0)