经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » AJAX » 查看文章
前后端分离之Ajax入门
来源：cnblogs　　作者：烫烫烫烫烫烫烫　　时间：2024/3/15 9:04:08　　对本文有异议

前后端分离之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）

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

  2. 客户端程序

    步骤：

    • 创建 XMLHttpRequest对象, 直接new就可以
    • 要指定回调函数
    • 调用它的open方法,指明提交方式,提交地址,及数据
    • 调用它的send方法,发送请求
    • 在回调函数中进行相应的处理
    1. <script src="js/jquery-1.8.0.js"></script>
    2. <script>
    3.     var xmlhttp;
    4.     function test(){		
    5.         //创建 XMLHttpRequest对象
    6.         xmlhttp = new XMLHttpRequest();
    8.         //要指定回调函数
    9.         xmlhttp.onreadystatechange=mystatechange;
    11.         //调用open方法
    12.         xmlhttp.open("get","UserServlet",null);
    14.         //调用send
    15.         xmlhttp.send(null);	
    16.     }
    18.     function mystatechange(){
    19.         //alert(xmlhttp.readyState);	   
    20.         if(xmlhttp.readyState==4){
    21.             if(xmlhttp.status==200){
    22.                 // alert(xmlhttp.responseText);
    23.                 document.getElementById("lbl_msg").innerHTML=xmlhttp.responseText;
    24.         	}
    25.     	}
    26.     }
    28. </script>
    29. <body>
    30.     <button onclick="test()">测试</button>
    31. 	<label id="lbl_msg"></label>
    32. </body>

三、使用jQuery实现ajax

四种实现方式：

  • load()方法
  • $.get()方法
  • $.post()方法
  • $.ajax()方法 - 常用

  1. load()：请求方式由是否传递参数决定。即传递参数，为GET方式;不传递参数，为POST方式。

    1. <script src="js/jquery-1.8.0.js"></script>
    2. <script>
    3.     //load(url,data,callback)
    4.     /*
    5.         url：异步请求的地址
    6.         data：异步请求的数据
    7.         如果省略请求数据的话，当前的请求方式为GET
    8.         如果发送请求数据的话，当前的请求方式为POST
    9.         callback - 异步请求成功后的回调函数
    10.     */
    11.     $(function(){
    12.         function mystatechange(){
    13.             alert('异步请求成功')
    14.         }
    16.         function test(){
    17.             $('button').load('UserServlet',mystatechange())
    18.         }
    19. 	})
    21. </script>
    23. <body>
    24.     <button onclick="test()">测试</button>
    25. </body>

  2. $.get()：使用get方式向服务器端发送异步请求

    2. <script src="js/jquery-1.8.0.js"></script>
    4. <script>
    5.     //get(url,data,callback,type)
    6.     /*
    7.         url：异步请求的地址
    8.         data：异步请求的数据
    9.         callback：异步请求成功后的回调函数
    10.         type：设置服务器满响应结果的格式；值为xml、html、script、json、text和default
    11.     */
    12.     $(function(){
    13.         $("button").click(function(){
    14.             $.get("UserServlet",{userName:"admin",password:"123"}, function(data){
    15.             	alert('异步请求成功');
    16.             });  	
    17.         });  	   
    18.     });	
    19. </script>
    21. <body>
    22.     <button>测试</button>
    23. </body>

  3. $.post()：使用POST方式向服务器端发送异步请求

    1. <script src="js/jquery-1.8.0.js"></script>
    3. <script>
    4.         //post(url,data,callback,type)
    5.         /*
    6.             url：异步请求的地址
    7.             data：异步请求的数据
    8.             callback：异步请求成功后的回调函数
    9.             type：设置服务器满响应结果的格式；值为xml、html、script、json、text和default
    10.         */	
    11.     $(function(){
    12.         $("button").click(function(){
    13.             $.post("UserServlet",{userName:"admin",password:"123"}, function(data){
    14.             	alert('异步请求成功');
    15.             });  	
    16.         });  	   
    17.     });	
    18. </script>
    20. <body>
    21.     <button>测试</button>
    22. </body>

  4. $.ajax()：是jQuery中最为底层的Ajax方法

    1. <script>
    2.     $(function(){
    3.         $("button").click(function(){
    4.          	$.ajax({
    5.                  type:"post",
    6.                  url:"UserServlet",
    7.                  data:{userName:"admin",password:"123"},
    8.                  success: function(data){
    9.                      alert('异步请求成功');
    10.                  }
    11.          	});  	
    12.         });   
    13. 	});
    14. </script>
    15. <body>
    16.     <button>测试</button>
    17. </body>

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

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

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

比如下面的表单:

  1. <form action="UserServlet?flag=add"  method="post">
  2.     <input name="userName">
  3.     <input name="password">
  4.     <submit >
  5. </form>

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

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

$.ajax() 其他参数：

  • async
  • cache
  • dataType //服务端传回来的数据,是什么类型, 取值有 text,html, js,xml,josn, jsonp
  • contentType //发给服务端的数据,是什么格式
  • 回调函数

  1. async 是否启用异步,默认是true

    1. $(function(){
    2.     $("button").click(function(){
    3.         alert("a");
    5.         $.ajax({
    6.             type:"post",
    7.             url:"UserServlet",
    8.             data:{userName:"admin",password:"123"},
    9.             success: function(data){
    10.             	alert("b");
    11.             }
    12.         });
    14.         alert("c");
    15.     });
    16. });
    17. /*
    18. 	以上代码的执行顺序有可能是a, b, c；也有可能是a, c, b
    19. 	原因：默认情况下，async的取值是true，即使用异步的方式提交
    20. 	想要同步执行，需要设置：async : false
    21. */

  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 不管成功,失败,都调用

      1. $(function(){
      2.     $("button").click(function(){
      3.         $.ajax({
      4.             type:"post",
      5.             url:"UserServlet?flag=visit",
      6.             success:function(data){
      7.             	alert("success调用了");
      8.             },
      9.             error:function(e){
      10.             	alert("error 调用了"+e);
      11.             },
      12.             complete:function(){
      13.             	alert("complete 调用了");
      14.             }
      15. 		/*
      16.             总结
      17.                 success 在服务端正确返回的情况下调用
      18.                 complete 总要调用
      19.                 error 在出错的时候会调用
      20.                     (1) 客户端请求写错了,会引起error的调用
      21.                     (2) 服务端出错了,也会引起error的调用
      22. 		*/
      23.         });
      24.     });
      25. });
      26. <body>
      27. 	<button>测试</button>
      28. </body

原文链接：https://www.cnblogs.com/namenana/p/18073356

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

AJAX热门文章

  • ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器
  • PHP使用ajax的post方式下载excel文件简单示例
  • 解决Shiro 处理ajax请求拦截登录超时的问题
  • PHP+iframe模拟Ajax上传文件功能示例
  • Ajax返回值类型与用法实例分析
  • Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递
  • Ajax提交post请求案例分析
  • php ajax confirm 删除实例详解
  • 爬取今日头条Ajax请求
  • Ajax原理与应用案例快速入门教程

    • AJAX推荐文章

  • 前后端分离之Ajax入门
  • ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器
  • Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递
  • AJAX请求以及解决跨域问题详解
  • Ajax实现省市县三级联动
  • jQuery ajax仿Google自动提示SearchSuggess功能示例

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号