- A+
所属分类：Web前端
------------恢复内容开始------------
Ajax
1. 概念
- ASynchronous JavaScript and xml,异步的 JavaScript 和 xml.
异步和同步:客户端和服务器端相互通信的基础上
- Ajax 是一种用于创建快速动态网页技术.
- Ajax 是一种无需重新加载整个网页的情况下,能够更新部分网页的技术.
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味可以在不重新加载整个网页的情况下,对网页的某部分进行更新.
传统网页(不使用 ajax)如果需要更新内容,必须重载整个网页页面. - 作用:提升用户体验
2. 实现方式
2.1 原生 js实现方式(了解)
<body> <input type="button" value="发送异步请求" onclick="fun()"> <input> <script> //定义方法 function fun() { //1. 创建核心对象 var xmlhttp; if (window.XMLHttpRequest) { //code for ie7+ firefox,chrome,opera,safari xmlhttp = new XMLHttpRequest(); } else { //code for ie6 ie5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2. 建立拦截 /* * 参数: * 1. 请求方式:get,post * ++>get方式,请求参数在 url后边拼接.send方法为空参 * ++>post方式,请求参数在 send方法中定义 * 2. 请求的 url: * 3. 同步或异步请去:true(异步),false(同步) * */ xmlhttp.open("get", "ajaxServlet?username=tom", true) //3. 发送请求 xmlhttp.send(); //4. 接收并处理来自服务器的响应结果 //获取方式 //什么时候获取?当服务器响应成功的时候获取 xmlhttp.onreadystatechange = function () {//单 xmlhttp对象的就绪状态改变时,就触发事件 onreadystatechange //判断 readyState就绪状态 0,1,2,3,4 // 判断响应状态码是否为200 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var responseText = xmlhttp.responseText; alert(responseText) } } } </script> @WebServlet("/ajaxServlet") public class AjaxDemo1Servlet extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text:html;charset=utf-8"); //获取请求参数 String username = request.getParameter("username"); //处理业务逻辑 耗时 try { Thread.sleep(5000); } catch (InterruptedException e) { e.printStackTrace(); } //打印 username System.out.println("username = " + username); //响应 response.getWriter().write("htllo " + username); } } 2.2 jQuery实现方式
- $.ajax()
- 语法: $.ajax(url,[settings])
<body> <input type="button" value="发送异步请求" onclick="fun()"> <input> <script src="/js/jquery-3.6.0.min.js"></script> <script> //定义方法 function fun() { //使用 $.ajax()发送 异步请求 $.ajax({ url: "ajaxServlet", // 请求路径 type: "pose",//请求方式 //data:"username=jack&age=23", //请求参数 data: {"username": "jack", "age": 23}, //请求参数 json格式 success: function (data) { //响应成功后的回调函数 alert(data); }, error: function (data) {//请求响应出现错误,会执行的回调函数 alert("出错了") }, dataType: "test",//设置接收到响应数据格式 }); } </script> </body> - $.get(): 发送 get请求
- 语法: $.get(url, [data], [callback], [type])
- 参数:
url:请求路径
data:请求参数
callback:回调函数
type:响应结果类型
<input type="button" value="发送异步请求" onclick="fun()"> <input> <script src="/js/jquery-3.6.0.min.js"></script> <script> //定义方法 function fun() { //使用 $.ajax()发送 异步请求 $.get("ajaxServlet", {username: "rose"}, function (data) { alert(data) }), "text"; } </script> - 参数:
- $.post(): 发送 pose请求
- 语法: $.post(url, [data], [callback], [type])
json
1. 概念
- JavaScript object notation,JavaScript对象
Person p = new Person();
p.setName();
p.setAge();
p.setGender();var p {"name":"A","age":"24","gender":"女"}
- json现在多用于存储和交换文本信息的语法,类型 xml,json比 xml更小更快更容易解析
2. 语法
- 基本规则
- 数据在名称/值对中: json数据是由键值对构成的
- 键用引号(单双都行)引起来,也可以不适用引号
- 值的取得类型
数字 >正数或浮点数
字符串 >在双引号中
逻辑值 >true false
数组 >在方括号中 {"persons":[{},{},..]}
对象 >或括号中 {"address":{"province":"北京"...}}
null
- 数据由逗号分隔 :多个键值由逗号分隔
- 花括号保存对象 :使用{}定义 json格式
- 方括号保存数组 :[]
- 数据在名称/值对中: json数据是由键值对构成的
- 获取数据
