ajax 介绍
优点
(1)不需要插件支持(一般浏览器且默认开启JavaScript即可)
(2)用户体验极佳(不刷新页面即可获取可更新的数据)
(3)提升WEB程序的性能(在传递数据方面做到按需发送,不必整体提交)
(4)减轻服务器和带宽的负担(将服务器的一些操作转移到移动客户端)
缺点
(1)前进、后退的功能被破坏(因为AJAX永远在当前页,不会记录前后页面)
(2)搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解JS引起变化数据的内容)
(3)不同版本的浏览器对XMLHttpRequest对象支持度不足(比如IE5之前)
Ajax相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。
jQuery的AJAX
原生js写ajax请求(写起来很复杂,而且需要考虑浏览器版本)
> - jquery帮咱们封装好了一个方法 ajax,我们直接调用jquery的方法,就可以发送ajax的请求
> - 后期,前后端分离了,还可以继续使用jquery的ajax, axios更主流一些**因为学习的是jQuery中Ajax方法,所以所说的结构即是$.ajax()的结构。**
**$.ajax()方法中的参数很多,我在实例中使用的只是一小部分,这里只介绍实例中所需要的参数的使用,其余更多参数还将继续学习。
$.ajax({ url:"发送请求(提交或读取数据)的地址", dataType:"预期服务器返回数据的类型", type:"请求方式", async:"true/false", data:{发送到/读取后台(服务器)的数据}, success:function(data){请求成功时执行}, error:function(){请求失败时执行} });
<1> url 默认为当前页地址
<2> dataType 可用类型:
(如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递)
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息。
script:返回纯文本JavaScript代码。
json:返回json数据。
jsonp:(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
text:返回纯文本字符串。
说明:对于json和jsonp的区别,本小白暂时没有深入了解,目前只知道jsonp可以跨域读取数据,有待进一步学习~
<3> type 可用类型主要为post和get两种(默认为get)
get:从指定的资源请求数据(从服务器读取数据)
post:向指定的资源提交要被处理的数据(向服务器提交数据)
<4> async 异步方式,默认为true,即异步方式。当设置为false时,为同步方式。
异步方式:ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发ajax里的success方法,这时候执行的是两个线程。
同步方式:在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。说明:这里的同步和异步有待深入理解,以下实例均使用默认的异步方式
<5> data 请求的数据,{ }中可以填入多项数据。如果不填(一般为get请求),则读取对应地址的全部数据,此时可以在console中通过console.log(res)显示数据情况。
<6> success 和 error 两个函数 一般需要设置,方便确定请求是否成功,以及请求成功后的提示或是对数据的处理和显示。
post方式
格式$.post(url, [data], [callback], [type]);
参数1:url,请求路径
参数2:data,请求参数
参数3:callback,回调函数
参数4:type,返回内容格式,默认的是text,xml, html, script, json, text, _default。
get方式
格式$.get(url, [data], [callback], [type]);
第一个参数:请求的路径 如:
${pageContext.request.contextPath}/Servlet1
第二个参数:请求的参数 格式:// JSON数据格式
{key1:value1,key2:value2}
第三个参数:回调函数 格式:
function(data){
alert(data);
}
第四个参数:返回内容 格式:xml, html, script, json, text, _default。服务器响应编码为:application/json;charset=UTF-8,回调函数data类型是json对象
服务器响应编码为:text/html;charset=UTF-8,回调函数data类型是字符串。
$.get() 以get请求方式发送ajax除了请求方式不同,使用方式与$.post()完全一致。
.get()和.get()和.post()两种方式书写格式一模一样,只需要修改.get()为.get()为.post(),其余地方不需要改动!
它们的请求方式不同$.get()为get请求,$.post()为post请求。这两种请求方式在处理编码方式上不一样,建议优先使用$.post()请求方式。
json对象转字符串的使用两种fastjson与ObjectMapper
fastjson的使用
文件 架包
密码:40tf
package com.zking.ajax.test; import java.util.ArrayList; import java.util.List; import com.alibaba.fastjson.JSON; import com.zking.ajax.entity.DiaoSi; public class Demo { public static void main(String[] args) { //ajax中 servlet里面将结果保存到out对象中输出 参数只能是字符串或者数组 //问题:如何将一个对象或者数组转成一个字符串 //该字符串必须要满足JSON的格式 //JSON 对象字符串,简单的说就是一个字符串,符合对象的定义或者数组的定义集合定义对象数组的定义 /** * JSON的格式 * { * "name":"value", * "name":"value" * } * */ //前端------parseJSON() //后台——————借助JSON工具包(很多) //今天 2个 //fastJSON jackJSON //使用前 必须导包 // fastJSON DiaoSi diaoSi = new DiaoSi(1, "谢文建", "男"); //需求:将diaosi转成字符串 //不满足json格式 System.out.println(diaoSi.toString()); //通过fastJSON工具来转换 JSON String jsonString = JSON.toJSONString(diaoSi); //{"did":1,"dname":"谢文建","sex":"男"} System.out.println(jsonString); String str2 = "{\"did\":1,\"dname\":\"谢文建\",\"sex\":\"男\"}"; DiaoSi parseObject = JSON.parseObject(str2,DiaoSi.class); System.out.println(parseObject); List<DiaoSi> list = new ArrayList<DiaoSi>(); for(int i = 1;i<=500;i++) { if(i>=1 && i<=100) { list.add(new DiaoSi(i+1, "康康屌丝"+i, "男")); }else if(i>=101 && i<=200) { list.add(new DiaoSi(i+1, "刘湘杨"+i, "男")); }else if(i>=201 && i<=300) { list.add(new DiaoSi(i+1, "雷惠玲"+i, "女")); }else if(i>=301 && i<=400) { list.add(new DiaoSi(i+1, "邓婉婷"+i, "女")); }else if(i>=401 && i<=500) { list.add(new DiaoSi(i+1, "章游"+i, "男")); } } 数组转换为字符串 String jsonString2 = JSON.toJSONString(list); System.out.println(jsonString2); // [{"did":2,"dname":"康康屌丝1","sex":"男"},{"did":3,"dname":"康康屌丝2","sex":"男"}]"; 字符串 转为对象数组 List<DiaoSi> parseArray = JSON.parseArray(str3, DiaoSi.class); System.out.println(); } }
ObjectMapper 转换工具的使用
ObjectMapper 转换工具的使用 架包下载 密码:b7sn
package com.zking.ajax.test; import com.fasterxml.jackson.databind.ObjectMapper; import com.zking.ajax.entity.DiaoSi; public class Demo2 { public static void main(String[] args) throws Exception { //jackJSON //必须实例化ObjectMapper对象才能使用 ObjectMapper mapper = new ObjectMapper(); DiaoSi diaoSi = new DiaoSi(1, "谢文建", "男"); 对象转字符串 String writeValueAsString = mapper.writeValueAsString(diaoSi); // {"did":1,"dname":"谢文建","sex":"男"} System.out.println(writeValueAsString); String ds = "{\"did\":1,\"dname\":\"谢文建\",\"sex\":\"男\"}"; 字符串转对象 DiaoSi readValue = mapper.readValue(ds, DiaoSi.class); System.out.println(readValue); } }
ajax实现手机号码是否被注册 Jquery 请前往 Jquery插件库下载
后台servlet代码
package com.zking.ajax.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/checkPhone.do") public class CheckPhoneServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("ajax请求成功"); //编码 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); //模拟一个数据库 List<String> list = new ArrayList<String>(); list.add("17134568763"); list.add("17132568763"); list.add("17133568763"); list.add("17135568763"); list.add("17136568763"); list.add("17137568763"); list.add("17139568763"); list.add("15084961293"); //获取前端传输过来的手机号 String phone = request.getParameter("phone"); String result = ""; //验证 if(list.contains(phone)) { result = "此手机号已被注册"; }else { result = "OK"; } PrintWriter out = response.getWriter(); out.write(result); out.flush(); out.close(); } }
前端html代码与jquery
<%@page import="java.util.Date"%> <%@page import="java.text.SimpleDateFormat"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> input{ width:300px; height:35px; font-size: 25px; } </style> <script type="text/javascript" src = "js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> //加载函数 $(document).ready(function(){ //获取输入框 设置失焦事件 $("input").blur(function(){ //获取输入框的值 let phone = $(this).val(); //alert(phone) if(!phone){ $("#phone_error").html("手机号不能为空"); return; }else{ //验证手机号是否满足规则 let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/; if(!myreg.test(phone)){ $("#phone_error").html("手机号不符合要求"); return; }else{ $("#phone_error").html(""); } } //调用ajax方法传输servlet $.ajax({ url:"checkPhone.do", type:"post", data:{"phone":phone}, datatype:"text", success:function(data){ $("#phone_error").html(data); } }); }); }) </script> </head> <body> <h1>检测用户是否已被注册(ajax)</h1> <input type ="text"/><span id = "phone_error"></span> <hr/> <%=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()) %> </body> </html>
ajax jquery方式编写搜索提示
后端servlet界面
package com.zking.ajax.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.databind.ObjectMapper; import com.zking.ajax.entity.DiaoSi; @WebServlet("/autoFull.do") public class AutoFullServlet extends HttpServlet { //生成500条数据 public List<DiaoSi> queryDiaoSiAll(){ //新建一个集合 List<DiaoSi> list = new ArrayList<DiaoSi>(); for(int i = 1;i<=500;i++) { if(i>=1 && i<=100) { list.add(new DiaoSi(i+1, "康康屌丝"+i, "男")); }else if(i>=101 && i<=200) { list.add(new DiaoSi(i+1, "刘湘杨"+i, "男")); }else if(i>=201 && i<=300) { list.add(new DiaoSi(i+1, "雷惠玲"+i, "女")); }else if(i>=301 && i<=400) { list.add(new DiaoSi(i+1, "邓婉婷"+i, "女")); }else if(i>=401 && i<=500) { list.add(new DiaoSi(i+1, "章游"+i, "男")); } } return list; } //模拟查询 public List<DiaoSi> queryDiaoSiAll(String searchName){ //获取数据 List<DiaoSi> queryDiaoSiAll = queryDiaoSiAll(); //新建一个集合 List<DiaoSi> list = new ArrayList<DiaoSi>(); //遍历老集合 for (DiaoSi diaoSi : queryDiaoSiAll) { if(diaoSi.getDname().contains(searchName)) { //将模糊查询的结果集存放到新集合中 list.add(diaoSi); } } return list; } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("ajax请求成功"); //编码 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); //获取客户端传过来的搜索关键词 String searchName = request.getParameter("searchName"); List<DiaoSi> queryDiaoSiAll = this.queryDiaoSiAll(searchName); //获取out PrintWriter out = response.getWriter(); //out.write(queryDiaoSiAll); // 实例化jackJSON工具中的objectMapper对象 ObjectMapper mapper = new ObjectMapper(); String result = mapper.writeValueAsString(queryDiaoSiAll); out.write(result); out.flush(); out.close(); } }
前端搜索提示界面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #container{ text-align: center; } input{ width:500px; height: 35px; font-size: 24px; } #content{ border:1px solid black; text-align:left; width:500px; /* height:300px; */ /* 外间距 自动居中 */ margin:0 auto; /* 滚动条 */ overflow: auto; /* 手势 */ cursor: pointer; } </style> <script type="text/javascript" src = "js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> //获取全路径 let path = "${pageContext.request.servletContext.contextPath}"; $(function(){ //隐藏 $("#content").hide(); //获取输入框 键盘按下事件 $("input").keyup(function(){ //获取输入框的值 let searchName = $(this).val(); if(searchName){ $("#content").show(); }else{ $("#content").hide(); return; } //将关键词通过ajax请求传输到servlet $.post(path+"/autoFull.do",{"searchName":searchName},function(data){ //console.log("result = "+data); //获取结果 let list = $.parseJSON(data); if(list.length===0){ $("#content").show(); $("#content").css("height","20px"); $("#content").html("无记录"); }else{ //超过十条则固定死高度 if(list.length>=10){ $("#content").css("height","200px"); }else{ $("#content").css("height",(20*list.length)+"px"); } let str= ""; $.each(list,function(index,obj){ //console.log(index,obj,obj.dname); str+="<div onclick = \"divBtn('"+obj.dname+"')\" onmouseout = \"this.style.background=''\" onmouseover = \"this.style.background='red'\">"+obj.dname+"</div>"; }) $("#content").html(str); } }); }); }); //设置值到输入框 function divBtn(dname){ $("#searchName").val(dname) $("#content").hide(); } </script> </head> <body> <h1 style = "text-align: center;">吊炸天搜索引擎</h1> <div id = "container"> <input type = "text" name = "searchName" id = "searchName"/> <div id = "content"> </div> </div> </body> </html>