javaweb(AJAX快速入门）

目录

1.概念

1.1为什么需要使用AJAX技术

1.2AJAX是什么

1.3AJax介绍

1.3特点

1.4应用场景

1.5运行原理

2.jQuery的AJAX

2.1post方式

2.2get方式

---

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()请求方式。