javaweb(AJAX快速入门）

最新推荐文章于 2024-06-05 15:29:49 发布

第五天537

最新推荐文章于 2024-06-05 15:29:49 发布

阅读量767

点赞数

文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/weixin_64549900/article/details/124548692

版权

1.概念

1.1为什么需要使用AJAX技术

在我们之前的开发，每当用户向服务器发送请求，**哪怕只是需要更新一点点的局部内容，
服务器都会将整个页面进行刷新。**

- **性能会有所降低(一点内容，刷新整个页面！)**
- **用户的操作页面会中断(整个页面被刷新了)**

**Ajax就是能够做到局部刷新**！

1.2AJAX是什么

*Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML**

> Ajax实际上是下面这几种技术的融合：
>
> - (1)XHTML和CSS的基于标准的表示技术
> - (2)DOM进行动态显示和交互
> - (3)XML和XSLT进行数据交换和处理
> - (4)XMLHttpRequest进行异步数据检索
> - (5)Javascript将以上技术融合在一起

是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

1.3AJax介绍

传统项目前后端不分离，用户触发一个http请求服务器，然后服务器接收之后，
在做出响应到用户，并且返回一个新的页面，也就是说交互都是通过页面刷新或页面跳转来实现。

	这样的方式对于用户体验来将其实并不友好，少量的数据更新也会引发整个页面重新请求，
浪费了很大一部分资源。
	
	因此，我们希望有一种更好的方式，可以不用重新请求整个页面而达到更新部分数据的效果。
	
	2005年，AJAX（Asynchronous Javascript And XML）横空出世，
给前端行业带来了巨大的变化与革新。

1.3特点

优点
	（1）不需要插件支持（一般浏览器且默认开启JavaScript即可）
	（2）用户体验极佳（不刷新页面即可获取可更新的数据）
	（3）提升WEB程序的性能（在传递数据方面做到按需发送，不必整体提交）
	（4）减轻服务器和带宽的负担（将服务器的一些操作转移到移动客户端）
缺点
	（1）前进、后退的功能被破坏（因为AJAX永远在当前页，不会记录前后页面）
	（2）搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解JS引起变化数据的内容）
	（3）不同版本的浏览器对XMLHttpRequest对象支持度不足（比如IE5之前）

1.4应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

1.5运行原理

Ajax相当于浏览器发送请求与接收响应的代理人，
以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

2.jQuery的AJAX

原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本）
jquery帮咱们封装好了一个方法 ajax，我们直接调用jquery的方法，就可以发送ajax的请求
后期，前后端分离了，还可以继续使用jquery的ajax， axios更主流一些

因为学习的是jQuery中Ajax方法，所以所说的结构即是$.ajax()的结构。 $.ajax()方法中的参数很多，我在实例中使用的只是一小部分，这里只介绍实例中所需要的参数的使用，其余更多参数还将继续学习。

$.ajax({          
       	 url:"发送请求（提交或读取数据）的地址", 
         dataType:"预期服务器返回数据的类型",  
         type:"请求方式", 
         async:"true/false",
         data:{发送到/读取后台（服务器）的数据},
         success:function(data){请求成功时执行},      
         error:function(){请求失败时执行}
});

2.1post方式

$.post(url, [data], [callback], [type]);

参数1：url，请求路径
参数2：data，请求参数
参数3：callback，回调函数
参数4：type，返回内容格式，默认的是text,xml, html, script, json, text, _default。

2.2get方式

$.get(url, [data], [callback], [type]);

第一个参数：请求的路径 如：
	${pageContext.request.contextPath}/Servlet1
第二个参数：请求的参数 格式：// JSON数据格式
	{key1:value1,key2:value2}
第三个参数：回调函数 格式：
    function(data){
        alert(data);    
    }
第四个参数：返回内容 格式：xml, html, script, json, text, _default。

服务器响应编码为：application/json;charset=UTF-8，回调函数data类型是json对象
服务器响应编码为：text/html;charset=UTF-8，回调函数data类型是字符串。
$.get() 以get请求方式发送ajax除了请求方式不同，使用方式与$.post()完全一致。
.get()和.get()和.post()两种方式书写格式一模一样，只需要修改.get()为.get()为.post()，其余地方不需要改动！
它们的请求方式不同$.get()为get请求，$.post()为post请求。这两种请求方式在处理编码方式上不一样，建议优先使用$.post()请求方式。