AJAX（Asynchronous Javascript And Xml）

AJAX（Asynchronous Javascript And Xml）

传统请求及缺点

●
传统的请求都有哪些？ 
○
直接在浏览器地址栏上输入URL。
○
点击超链接
○
提交form表单
○
使用JS代码发送请求 
■
window.open(url)
■
document.location.href = url
■
window.location.href = url
■
....
●
传统请求存在的问题 
○
页面全部刷新导致了用户的体验较差。
○
传统的请求导致用户的体验有空白期。（用户的体验是不连贯的）
○

AJAX概述

●
AJAX不能称为一种技术，它是多种技术的综合产物。
●
AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。
●
什么是异步，什么是同步？ 
○
假设有t1和t2线程，t1和t2线程并发，就是异步。
○
假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。
○
AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的。
●
AJAX代码属于WEB前端的JS代码。和后端的java没有关系，后端也可以是php语言，也可以是C语言。
●
AJAX 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
●
AJAX可以更新网页的部分，而不需要重新加载整个页面。（页面局部刷新）
●
AJAX可以做到在同一个网页中同时启动多个请求，类似于在同一个网页中启动“多线程”，一个“线程”一个“请求”。
●

●

XMLHttpRequest对象

●
 XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。 
●
 XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。 
●
 创建XMLHttpRequest对象 

AJAX GET请求的缓存问题

●
对于低版本的IE浏览器来说，AJAX的get请求可能会走缓存。存在缓存问题。对于现代的浏览器来说，大部分浏览器都已经不存在AJAX get缓存问题了。
●
什么是AJAX GET请求缓存问题呢？ 
○
在HTTP协议中是这样规定get请求的：get请求会被缓存起来。
○
发送AJAX GET请求时，在同一个浏览器上，前后发送的AJAX请求路径一样的话，对于低版本的IE来说，第二次的AJAX GET请求会走缓存，不走服务器。
●
POST请求在HTTP协议中规定的是：POST请求不会被浏览器缓存。
●
GET请求缓存的优缺点： 
○
优点：直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好。
○
缺点：无法实时获取最新的服务器资源。
●
浏览器什么时候会走缓存？ 
○
第一：是一个GET请求
○
第二：请求路径已经被浏览器缓存过了。第二次发送请求的时候，这个路径没有变化，会走浏览器缓存。
●
如果是低版本的IE浏览器，怎么解决AJAX GET请求的缓存问题呢？ 
○
可以在请求路径url后面添加一个时间戳，这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的，这样就不会走浏览器的缓存问题了。
○
可以采用时间戳："url?t=" + new Date().getTime()
○
或者可以通过随机数："url?t=" + Math.random()
○
也可以随机数+时间戳....

AJAX乱码问题

●
 测试内容： 
○
发送ajax get请求 
■
发送数据到服务器，服务器获取的数据是否乱码？
■
服务器响应给前端的中文，会不会乱码？
○
发送ajax post请求 
■
发送数据到服务器，服务器获取的数据是否乱码？
■
服务器响应给前端的中文，会不会乱码？
●
 包括还要测试tomcat服务器的版本： 
○
tomcat10和tomcat9都要进行测试。
●
 测试结果： 
○
 对于tomcat10来说，关于字符集，我们程序员不需要干涉，不会出现乱码。 
○
 对于tomcat9来说呢？ 
■
 响应中文的时候，会出现乱码，怎么解决？ 

AJAX的异步与同步

●
 什么是异步？什么是同步？ 
○
ajax请求1和ajax请求2，同时并发，谁也不用等谁，这就是异步。（a不等b，b也不等a）
○
如果ajax请求1在发送的时候需要等待ajax请求2结束之后才能发送，那么这就是同步。（a等待b，或者b等待a，只要发生等待，就是同步。）

 什么情况下用同步？（大部分情况下我们都是使用ajax异步方式，同步很少用。） 
○
举一个例子 
■
用户注册 
●
用户名需要发送ajax请求进行校验
●
邮箱地址也需要发送ajax请求校验
●
其他的也可能需要发送ajax请求。。。
●
并且最终注册按钮的时候，也是发送ajax请求进行注册。
●
那么显然，注册的Ajax请求和校验的ajax请求不能异步，必须等待所有的校验ajax请求结束之后，注册的ajax请求才能发。

AJAX代码封装

●
 AJAX请求相关的代码都是类似的，有很多重复的代码，这些重复的代码能不能不写，能不能封装一个工具类。要发送ajax请求的话，就直接调用这个工具类中的相关函数即可。 
●
 接下来，手动封装一个工具类，这个工具类我们可以把它看做是一个JS的库。我们把这个JS库起一个名字，叫做jQuery。（我这里封装的jQuery只是一个前端的库，和后端的java没有关系，只是为了方便web前端代码的编写，提高WEB前端的开发效率） 
●
 手动开发jQuery.