接上期后续

本期分享第七章节

servlet

第三篇章

已经分享过半了，你们都跟上了吗？

每天都在学习嘛？

有什么不会的嘛？

今日教学文档分享来了 

今日新篇章

【AJax】

1. 传统开发模式的不足

传统开发模式基于浏览器数据传输功能,页面填写数据/展示数据。浏览器通过访问一个URL地址，将页面的数据提交给服务器。服务器将需要展示的数据返回给浏览器，浏览器再进行数据解析，将数据呈现在用户面前。这种模式主要依赖于浏览器的渲染功能，并且浏览器每次渲染是都是整个页面进行渲染。整个页面包含：样式文件,图片资源,DOM标签.每次浏览器渲染时都要进行重新统一渲染,重新请求一些重复的资源数据.但是实际上变化的只是页面上的数据,一些静态资源没有发生变化.这种统一的重新渲染,导致以下不足:

1. 操作服务器额外的负担,因为浏览器重新请求重复数据,服务器又不记录是否发送过,导致服务器重新发送,网络/磁盘读写都造成额外的负担.

2. 浏览器重复解析数据,浏览器本身也产生了额外的开销.

程序的设计者,提出了一个理念,能不能只返回想要的数据?如果做到了根据需要返回数据,减少了服务器和浏览器的负担.提出了异步交互的理念.浏览器本身在渲染时,浏览器是占用状态,无法做其它事情的.异步交互,就是指浏览器在渲染时,将渲染的等待时间利用起来,做其它行为.就像同时在做多件事情.

1.1 什么是同步交互

首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后，按照预先编写好的程序中的业务逻辑进行处理，比如和数据库服务器进行数据信息交换。最后，服务器对请求进行响应，将结果返回给客户端，返回一个HTML在浏览器中显示，通常会有CSS样式丰富页面的显示效果。

如果浏览器在使用中,用户都是等待状态.用户全程的参与了整个请求到数据渲染的过程.类似早期排队充值话费/打饭.

1.2 同步交互的不足

1. 同步交互的不足之处，会给用户一种不连贯的体验,当服务器处理请求时，用户只能等待状态，页面中的显示内容只能是空白。

2. 因为已经跳转到新的页面,原本在页面上的信息无法保存,好多信息需要重新填写

3. 这种交互的方式对于服务器和浏览器而言都存在压力.存在性能的损耗

2. 异步交互的概念

指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待。例如:在支付宝上充值话费.

在部分情况下，我们的项目开发中都会优先选择不需要等待的异步交互方式。将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。异步不用等所有操作等做完，就响应用户请求。即先响应用户请求，然后慢慢去写数据库，用户体验较好.类似于多个线程在进行运行.

3. 什么是AJax

Ajax是基于异步交互思想,诞生的复合的前端技术.其核心浏览器厂商约定的一套用于进行网络请求数据交互的API.浏览器厂商通过Javascript暴露了一套API,可以用于使用JS时就能通过网络从服务器获取特定的数据,然后在利用DOM技术和CSS技术,实现页面的数据变化.

由于AJax技术是浏览器厂商提供的API,浏览器厂商各自早期没有统一规范,还由于浏览器技术一直在迭代.前端技术一直在更新.市面上就出现了一些对原生ajax技术进行封装的插件.比较早期就是jQuery插件,现在比较流行的axios插件.由于现在前端推荐DOM操作,比较推崇MVVM思想,而jQuery中很大比重的都是在进行DOM操作,很多企业中,提出了去”j”的理念.

3.1 jQuery中的ajax

由于原生的Ajax存在一些不足,浏览器的兼容性,整个请求需要分为5个步骤相对繁琐.基于这样的原因.jQuery插件对原生ajax进行了封装.简化了ajax的使用.

在使用ajax时,开发者主要请求地址和请求参数及返回的数据.jQuery中的ajax在使用时,主要只需要定义请求地址,参数及返回数据的处理即可.

3.1.1 jQuery中ajax使用

1. 在页面引入jQuery的JS

2. 编写前端代码

3.1.2 jQuery中核心方法

3.1.3 ajax方法核心配置参数

3.1.3.1 ajax方法的演示

3.1.3.1.1 前端代码

3.1.3.1.2 后端代码

3.1.4 get/post方法演示

在实际使用中,开发者只关注2个点,请求信息和返回的数据.jQuery提供一些方法对ajax方法进行简化,如:get(url,[param],function)/post(url,[param],function).分别表示get类型的异步请求和post异步请求(比较常用).

3.1.4.1 演示案例

3.2 axios的使用

首先要在页面引入axios的js插件.参考:axios中文网.

3.2.1 axios应用

3.2.1.1 后端代码

3.2.1.2 前端代码

4. 浏览器跨域访问

在Ajax请求中,JS是基于浏览器进行网络通信的.这种功能必须依附浏览器,出于安全的考虑,浏览器会对JS通信的数据进行检查.浏览器对数据检查通过之后,才会将通信数据移交给JS程序.浏览器最基本检查策略叫同源策略.是一种最基本安全保护机制

4.1 同源策略

在网络访问中,必须存在3种数据:协议/域名/端口.如果3种数据一致就标识同源访问,如果不一致就是非同源访问.默认浏览器只支持同源访问.

以下就是非同源访问的浏览器异常信息.也被称之为跨域访问.

当前浏览器访问地址:http://localhost:8080/ajax_crud/index.html

ajax的访问地址:http://127.0.0.1:8080/ajax_crud/user.do

由于当前浏览器地址的域名:localhost,但是ajax的地址是127.0.0.1虽然都是标识同一个地址,但是浏览器检测时认为和自己的不一致,所以进行抛出了异常,认为存在跨域访问.

4.2 跨域解决

跨域问题解决方案比较多,例如:jsonp,服务器允许跨域访问设置.浏览器既然会检查数据,服务器返回数据时,直接通知浏览器本次访问是允许跨域访问的.需要通过响应头通知浏览器.

5. Ajax综合案例

利用ajax 实现增/删除/查/改.

5.1 后端代码

5.1.1 servlet

5.1.2 dao

5.2 列表页面

5.3 新增列表

5.4 修改页面

更多干货我们下期再说！

下期会分享

第七章节

servlet

第四篇章

相关知识~

下期见！