一 AJAX简介
异步刷新技术。A:Asynchronous(异步)；J：javascript; A:and; X:xml
1.1AJAX实现的效果示例：
1.2AJAX实现的原理
首先要知道：数据都是在服务器上的，要获取数据，就必须要向服务器发送请求。然后等待服务器的响应。通过form表单提交或者通过url地址栏，或者超链接等等技术进行请求的发送，都是同步的，整个页面是会刷新的。
二原生JavaScript编写AJAX
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用原生javascript实现AJAX请求</title> <style> #msg{ border:#F00 1px solid; widht:300px; height:100px; } </style> <script> var getdata = function(){ //1.创建ajax对象 //只兼容非ie6的浏览器，在ie6浏览器上运行会提示没有被定义 //var oAjax = new XMLHttpRequest();//这才是ajax实际的请求
//ie6浏览器下按照下面方法写,但是在别的浏览器中不能用，会报错。 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//鉴于上面出现的问题，可以采取下面的方法解决，用if判断是否为IE6浏览器 //如果有XMLHttpRequest，那就是非IE6浏览器。()里面加window的原因下面会有描述。 var oAjax; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest();//创建ajax对象 } else{//如果没有XMLHttpRequest，那就是IE6浏览器 oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象 }
//2.连接服务器 //open(方法、文件名、异步传输） //方法： //传输方式是get方式还是post方式。 //文件名(资源地址) //告诉服务器要读哪个文件 //异步传输 //异步：多件事一件一件的做 //同步：多件事情一起进行 //但是js里面的同步和异步和现实的同步异步相反。 //同步：多件事一件一件的做 //异步：多件事情一起进行 //ajax天生是用来做异步的 oAjax.open("GET","/Servlet4/ajax1",true);
//3.发送请求 oAjax.send();
//4.接收返回 //客户端和服务器端有交互的时候会调用onreadystatechange oAjax.onreadystatechange=function(){ //oAjax.readyState //浏览器和服务器，进行到哪一步了。 //0->（未初始化）：还没有调用 open() 方法。 //1->（载入）：已调用 send() 方法，正在发送请求。 //2->载入完成）：send() 方法完成，已收到全部响应内容。 //3->（解析）：正在解析响应内容。 //4->（完成）：响应内容解析完成，可以在客户端调用。 if(oAjax.readyState==4){ if(oAjax.status==200){//判断是否成功,如果是200，就代表成功(判断HTTP协议状态) //oAjax.responseText 从服务器响应回来的消息 document.getElementById("msg").innerHTML=oAjax.responseText; } else{ alert("失败"); } } } } </script> </head> <body> <p>需求：通过AJAX技术从服务上获取一个字符串，然后将此字符串显示在页面的指定位置。</p> <input type="button" id="btn" value="获取" onclick="getdata();"/> <div id="msg"> 在这里显示数据： </div> </body> </html> |
| //对应的servlet @WebServlet("/ajax1") public class Ajax1 extends HttpServlet { private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); out.println("这是从服务器servlet传输过来的消息"); out.flush(); } } |
三 JQuery实现AJAX
3.1简单示例
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jquery实现AJAX请求</title> <script type="text/javascript" src="/Servlet4/js/jquery-3.3.1.min.js"></script> <style> #msg{ border:#F00 1px solid; widht:300px; height:100px; } </style> <script type="text/javascript"> var getdata = function(){ $.ajax({ type: "GET", //发送http请求的方法（get/POST） url: "/Servlet4/ajax1", //请求的资源路径 success: function(msg){ //成功后的回调函数 //在这里进行成功后的处理 $("#msg").html(msg); } }); };
</script> </head> <body> <p>需求：通过AJAX技术从服务上获取一个字符串，然后将此字符串显示在页面的指定位置。</p> <input type="button" id="btn" value="获取" onclick="getdata();"/> <div id="msg"> 在这里显示数据： </div> </body> </html> |
3.2jquery.AJAX（）方法
$.ajax(url,[settings])方法；$.ajax({json对象})
Url：需要请求的资源路径
Settings：可以有很多的属性。而且每个属性都是可选的。
Json对象中的常用属性介绍：
Url: 路径
Type: 请求方式
Data: 发送的数据（type=post的时候使用）
dataType：发送和接收的数据格式（XML、HTML、Script、JSON、JSONP、text
）
Success:成功后的回调函数
3.3 实现注册用户验证示例
需求：注册用户时，如果已存在该用户，则提示“用于已被注册”，否则提示“恭喜，该用户名可以使用”
实现思路：
- 焦点离开用户名文本框的时候，向服务器发送验证请求(并且将输入的用户名发送到服务器)；
- 在servlet中验证用户名是否已存在，然后将结果响应给浏览器
- 根据servlet的响应结果，进行不同的处
具体实现：
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册验证用户名示例</title> <script type="text/javascript" src="/Servlet4/js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> var ck = function(){ var uname = $("#username").val(); alert(uname); $.ajax({ type: "POST", url: "/Servlet4/checkuser", data: "username="+uname, success: function(msg){ alert(msg); if(msg == "0"){ $("#msg").html("恭喜该用户名可以使用"); }else{ $("#msg").html("该用户已被注册"); } } }); };
</script> </head> <body> 用户名：<input type="text" name="username" id="username" onblur="ck();" /> <font id="msg"></font> </body> </html> |
| @WebServlet("/checkuser") public class CheckUser extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); String str = "0"; if(username.equals("zhangsan")){ //存在 str = "1"; } PrintWriter out = response.getWriter(); out.print(str); out.flush(); } } |
四 使用json传输数据
4.1 json对象的结构
Var data ={
Username：zhangsan,
Userpwd:123456
}
Var arrs = [{username:”zhangsan”,userpwd:”123456”}];
4.2 从服务器响应json对象到浏览器
需求：浏览器请求服务器发送一个用户的详细信息；然后在页面上显示用户的用户名和密码。
1、不使用JSON的情况下的解决方案
思路：例如需要传输数据:zhangsan(用户名)和123456（密码）。可以将这两个数据拼接到一起，中间用一个特殊字符将其分割。例如：（zhangsan,123456）；然后，在前端收到这个消息之后，根据分割的字符将字符串拆分成一个字符串数组。这样就可以获取到用户名和密码了。
程序实现：
| protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = "zhangsan"; String userpwd = "123456"; String msg = username+","+userpwd; PrintWriter out = response.getWriter(); out.print(msg); out.flush(); } |
| var getuser = function(){ $.ajax({ type: "GET", url: "/Servlet4/getuser", success: function(msg){ alert(msg); var arrs = msg.split(","); $("#uname").val(arrs[0]); $("#upwd").val(arrs[1]); } }); } |
问题分析：上面的程序虽然可以实现这个功能。但是如果需要传输的数据中包含“，”，那么在JS中的解析就会有问题。第二个问题，如果传输的是比较复杂的对象，那么在JS中的解析就比较麻烦。
2、使用JSON对象来传输数据解决方案
实现步骤：
- 首先定义好所需要的json对象的格式（字符串的格式）
- 当浏览器获取到这个json字符串的时候，在JS中使用eval（）方法，将字符串转换为JS对象。
- 然后就可以在JS中直接使用对象的属性了。
JSON字符串格式定义：
| User={username:”zhangsan”,userpwd:”123456”} |
在servlet中构建上面的字符串：
| String msg = "user={username:'"+username+"',userpwd:'"+userpwd+"'}"; |
在JS中使用上面的字符串：
| //eval函数将字符串转换为JS对象。 eval(msg); $("#uname").val(user.username); $("#upwd").val(user.userpwd); |
问题分析：这样使用JSON对象，那么在JS端使用非常方便，但是手动在servlet中构建JSON字符串是非常麻烦的事情。那么程序猿肯定是不会去做这种细致的体力活的，如何解决？可以将构建JSON字符串的功能进行封装（思考，如何封装一个将实体对象转换为JSON字符串的功能）。
五 FASTJson组件的应用
1、引用fastjson.jar的依赖包
2、在servlet中使用fastjson组件将实体对象转换为json字符串
| protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //构建一个实体对象 User u= new User(); u.setUsername("lis"); u.setUserpwd("1111111"); //调用toJSONString将JAVA对象转换为一个JSON字符串 //toJsonString方法不仅可以转换实体，还可以转换list,map等等 String msg = JSONObject.toJSONString(u); PrintWriter out = response.getWriter(); out.print(msg); out.flush(); } |
3、在JS中获取数据
| var getuser = function(){ $.ajax({ type: "GET", url: "/Servlet4/getuser", dataType:"JSON", //将dataType设置为JSON后，user就是一个json对象了 success: function(user){ $("#uname").val(user.username); $("#upwd").val(user.userpwd); } }); } |
3180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
