首页 > 其他分享 >前后端分离之Ajax入门

前后端分离之Ajax入门

时间:2024-03-14 17:36:11浏览次数:20  
标签:function 异步 入门 分离 alert Ajax data 服务端 请求

前后端分离之Ajax入门

一、概念

Ajax(Asynchronous Javascript And XML),即是异步的JavaScript和XML,Ajax其实就是浏览器与服务器之间的一种异步通信方式。它可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面,在这种情况下,浏览器可以做自己的事情。直到成功获取响应后,浏览器才开始处理响应数据。

  1. 传统传统的Web应用模式和 ajax方式的比较:

    传统的web应用:请求提交的时候,提交的是整个表单,服务端返回的时候,也是返回整个页面(刷新)
    ajax方式:提交请求的时候只把某些数据提交(可以不用表单),服务端也只返回特定的数据

  2. Ajax 应用的特点
    • 不刷新整个页面,在页面内与服务端通迅
    • 使用异步方式和服务端通迅
    • 大部分交互都在页面内完成
  3. Ajax 技术组成

    XMLHttpRequest:用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,发送和获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容,所有的现代浏览器都支持这个对象。

    javascript:一种脚本编程语言,它可以在网页上实现复杂的功能,网页展现的不再是简单的静态信息,而是实时的内容更新。

    HTML:超文本标记语言,是一种用来结构化 Web 网页及其内容的标记语言。

    json(曾经使用XML):将结构化数据表示为 JavaScript 对象的标准格式,是一种轻量级数据交换格式,而XML较为复杂

二、XMLHttpRequest 实现ajax

  1. 准备好服务端程序(tomcat)

    @WebServlet("/UserServlet")
    	public class UserServlet extends HttpServlet {
    	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		response.setContentType("text/html;charset=UTF-8");//设置结果集
    		response.getWriter().print("这是服务端的数据:"+LocalDateTime.now());//向浏览器发送数据
    	}	
    }
    
  2. 客户端程序

    步骤:

    • 创建 XMLHttpRequest对象, 直接new就可以
    • 要指定回调函数
    • 调用它的open方法,指明提交方式,提交地址,及数据
    • 调用它的send方法,发送请求
    • 在回调函数中进行相应的处理
    <script src="js/jquery-1.8.0.js"></script>
    <script>
        var xmlhttp;
        function test(){		
            //创建 XMLHttpRequest对象
            xmlhttp = new XMLHttpRequest();
    
            //要指定回调函数
            xmlhttp.onreadystatechange=mystatechange;
    
            //调用open方法
            xmlhttp.open("get","UserServlet",null);
    
            //调用send
            xmlhttp.send(null);	
        }
    
        function mystatechange(){
            //alert(xmlhttp.readyState);	   
            if(xmlhttp.readyState==4){
                if(xmlhttp.status==200){
                    // alert(xmlhttp.responseText);
                    document.getElementById("lbl_msg").innerHTML=xmlhttp.responseText;
            	}
        	}
        }
    
    </script>
    <body>
        <button onclick="test()">测试</button>
    	<label id="lbl_msg"></label>
    </body>
    
    

三、使用jQuery实现ajax

六种实现方式:

  • load()方法
  • $.get()方法
  • $.post()方法
  • $.ajax()方法 - 常用
  • $.getScript()方法
  • $.getJSON()方法
  1. load():请求方式由是否传递参数决定。即传递参数,为GET方式;不传递参数,为POST方式。

    <script src="js/jquery-1.8.0.js"></script>
    <script>
        //load(url,data,callback)
        /*
            url:异步请求的地址
            data:异步请求的数据
            如果省略请求数据的话,当前的请求方式为GET
            如果发送请求数据的话,当前的请求方式为POST
            callback - 异步请求成功后的回调函数
        */
        $(function(){
            function mystatechange(){
                alert('异步请求成功')
            }
    
            function test(){
                $('button').load('UserServlet',mystatechange())
            }
    	})
    
    </script>
    
    <body>
        <button onclick="test()">测试</button>
    </body>
    
    
  2. $.get():使用get方式向服务器端发送异步请求

    
    <script src="js/jquery-1.8.0.js"></script>
    
    <script>
        //get(url,data,callback,type)
        /*
            url:异步请求的地址
            data:异步请求的数据
            callback:异步请求成功后的回调函数
            type:设置服务器满响应结果的格式;值为xml、html、script、json、text和default
        */
        $(function(){
            $("button").click(function(){
                $.get("UserServlet",{userName:"admin",password:"123"}, function(data){
                	alert('异步请求成功');
                });  	
            });  	   
        });	
    </script>
    
    <body>
        <button>测试</button>
    </body>
    
    
  3. $.post():使用POST方式向服务器端发送异步请求

    <script src="js/jquery-1.8.0.js"></script>
    
    <script>
            //post(url,data,callback,type)
            /*
                url:异步请求的地址
                data:异步请求的数据
                callback:异步请求成功后的回调函数
                type:设置服务器满响应结果的格式;值为xml、html、script、json、text和default
            */	
        $(function(){
            $("button").click(function(){
                $.post("UserServlet",{userName:"admin",password:"123"}, function(data){
                	alert('异步请求成功');
                });  	
            });  	   
        });	
    </script>
    
    <body>
        <button>测试</button>
    </body>
    
  4. $.ajax():是jQuery中最为底层的Ajax方法

    <script>
        $(function(){
            $("button").click(function(){
             	$.ajax({
                     type:"post",
                     url:"UserServlet",
                     data:{userName:"admin",password:"123"},
                     success: function(data){
                         alert('异步请求成功');
                     }
             	});  	
            });   
    	});
    </script>
    <body>
        <button>测试</button>
    </body>
    

四、$.ajax([options]) 详解

$(function(){
    $("button").click(function(){
        $.ajax({
            type:"post",   //请求的提交方式,可以是post和get, 大小写不敏感
            url:"UserServlet",  //请求的地址
            data:{userName:"admin",password:"123"},  //提交的数据,前面的key可以用双引号引起来也可以不引
            success: function(data){   //回调函数,data 代表服务端返回的数据,data这个名字不是固定的,叫什么都可以
            	alert(data);
            }
        });
    });
});

注:当以post方式提交请求的时候,放在url后面的参数,是可以用的

比如下面的表单:

<form action="UserServlet?flag=add"  method="post">
    <input name="userName">
    <input name="password">
    <submit >
</form>

请求提交以后,服务端能收到 flag, userName,password

但当请求以get的方式提交的时候,放在url后面的参数会被表单中其他的数据覆盖

$.ajax() 其他参数:

  • async
  • cache
  • dataType //服务端传回来的数据,是什么类型, 取值有 text,html, js,xml,josn, jsonp
  • contentType //发给服务端的数据,是什么格式
  • 回调函数
  1. async 是否启用异步,默认是true

    $(function(){
        $("button").click(function(){
            alert("a");
    
            $.ajax({
                type:"post",
                url:"UserServlet",
                data:{userName:"admin",password:"123"},
                success: function(data){
                	alert("b");
                }
            });
    
            alert("c");
        });
    });
    /*
    	以上代码的执行顺序有可能是a, b, c;也有可能是a, c, b
    	原因:默认情况下,async的取值是true,即使用异步的方式提交
    	想要同步执行,需要设置:async : false
    */
    
  2. cache 是否缓存

    默认值:true,当dataType为script时,默认为false,设置为false将不会从浏览器缓存中加载请求信息

    当cache 为true时,浏览器会优先从缓存中取数据,若缓存中存在则直接取出,若不存在会向服务端发送请求。

    优点:从缓存中取数据,减少了服务器端的压力

    缺点:无法实时更新。如需要获得请求服务器的次数时,客户端完成获取次数,服务器段完成更新次数,会从缓存中直接取数据,不会请求服务器执行增加次数操作

  3. dataType 服务端传回来的数据,是什么类型

    如:

    • xml:返回XML文档。
    • html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
    • script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
    • json:返回JSON数据。
    • jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
    • text:返回纯文本字符串。
  4. contentType 发给服务端的数据,是什么格式

    默认值:application/x-www-form-urlencoded。这种格式的特点:name/value 成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。如:url?name=zhangsan&password=123

    注:这种形式是没有办法将复杂的 JSON 组织成键值对形式。

  5. 回调函数

    • success 成功以后调用

    • error 出错的时候调用

    • complete 不管成功,失败,都调用

      $(function(){
          $("button").click(function(){
              $.ajax({
                  type:"post",
                  url:"UserServlet?flag=visit",
                  success:function(data){
                  	alert("success调用了");
                  },
                  error:function(e){
                  	alert("error 调用了"+e);
                  },
                  complete:function(){
                  	alert("complete 调用了");
                  }
      		/*
                  总结
                      success 在服务端正确返回的情况下调用
                      complete 总要调用
                      error 在出错的时候会调用
                          (1) 客户端请求写错了,会引起error的调用
                          (2) 服务端出错了,也会引起error的调用
      		*/
              });
          });
      });
      <body>
      	<button>测试</button>
      </body
      

标签:function,异步,入门,分离,alert,Ajax,data,服务端,请求
From: https://www.cnblogs.com/namenana/p/18073356

相关文章