AJAX

  • A+
所属分类:Web前端
摘要

————恢复内容开始————Person p = new Person();
p.setName();
p.setAge();
p.setGender();

------------恢复内容开始------------

Ajax

1. 概念

  • ASynchronous JavaScript and xml,异步的 JavaScript 和 xml.
    异步和同步:客户端和服务器端相互通信的基础上
    AJAX
  • 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实现方式

  1. $.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> 
  2. $.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> 
  1. $.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. 语法

  1. 基本规则
    • 数据在名称/值对中: json数据是由键值对构成的
      • 键用引号(单双都行)引起来,也可以不适用引号
      • 值的取得类型
        数字 >正数或浮点数
        字符串 >在双引号中
        逻辑值 >true false
        数组 >在方括号中 {"persons":[{},{},..]}
        对象 >或括号中 {"address":{"province":"北京"...}}
        null
    • 数据由逗号分隔 :多个键值由逗号分隔
    • 花括号保存对象 :使用{}定义 json格式
    • 方括号保存数组 :[]
  2. 获取数据
  • 版权声明:本站原创文章,于2021年9月18日20:54:15,由 发表,共 2951 字。
  • 转载请注明:AJAX - 张拓的天空