AJAX框架

概述:

1.AJAX并不是一种技术,而是多种技术的综合产物
2.可以让浏览器发送一种特殊的请求,这种请求可以是异步的
3.AJAX可以更新网页的部分,而不需要重新加载整个页面
4.AJAX可以做到在同一个网页中同时启动多个请求,类似于在同一个网页中启动"多线程",一个"线程"一个"请求"

为什么用AJAX,而不用传统请求?

传统请求:1.直接在浏览器地址栏上输入URL;2.点击超链接;3.提交form表单;4.使用JS代码发送请求

传统请求存在的问题:

1.页面全部刷新导致了用户的体验较差
2.传统请求导致用户的体验有空白期(用户体验不连贯)

1.发送AJAX get请求流程:

1.创建AJAX核心对象XMLHttpRequest
var xhr = new XMLHttpRequest();

2.注册回调函数
xhr.onreadystatechange = function (){ console.log(xhr.readyState)

3.开启通道(open只是浏览器和服务器建立连接,通道打开,并不会发送请求)
xhr.open( "GET" , "/ajax/ajaxrequest1" , true)

4.发送请求
xhr.send()

示例:


第二点注册回调函数

后端代码

2.发送AJAX post请求流程

和get一样,只是前端代码第四步要增加一些代码

前后端传输数据都是用json格式,现在一般都是用fastjson的toJSONString这个依赖来把数据转换成json

3.AJAX乱码问题

对于tomcat10来说,不会出现乱码,不需要干涉

对于tomcat9及以下来说:

1.响应中文时,会出现乱码,只需要加上:
response.setContentType("text/html;charset=UTF-8");

2.发送ajax post请求时,发送给服务器的数据,服务器接收后乱码,只需要加上:
request.setCharacterEncoding("UTF-8");

4.跨域问题

跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(https://baidu.com)页面去请求京东(https:l/www.jd.com)的资源。

通过超链接或者form表单提交或者window.location.href的方式进行跨域不存在问题

只有一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源,会由于同源策略的存在导致无法跨域访问

同源策略:指一段脚本只能读取来自同一来源的窗口和文档的属性，同源就是协议、域名和端口都相同。

同源策略作用:如果你刚刚在网银输入账号密码，查看了自己还有1万块钱，紧接着访问一些不规矩的网站，这个网站可以访问刚刚的网银站点，并且获取账号密码，那后果可想而知。所以，从安全的角度来讲，同源策略是有利于保护网站信息的.

区分同源和不同源的三要素:1.协议 2.域名 3.端口
协议一致,域名一致,端口号一致,三个要素都一致才是同源,其他一律都不是同源

解决跨域问题

方案一:设置响应头

核心原理:跨域访问的资源允许你跨域访问

实现: 

方案二: jsonp

核心原理: jsonp不是一个真正的ajax请求,可以说成是带填充的json,一种类ajax请求的机制,可以完成局部刷新的效果,也可以解决跨域问题,但是只支持GET请求

实现: 利用标签可以跨域的机制

方案三: jQuery封装的jsonp 

核心原理: 就是方案二的高度封装,底层原理一样,可以直接引入牛人写的jQuery库的js文件

实现:

核心代码:

完整示例:

方案四: 代理机制(httpclient)

核心原理:

就是相当于用java程序发送get/post请求给2号服务器

有两种方案能使java程序发送get/post请求
1.使用JDK内置的API(java.net.URL...),这些API可以发送HTTP请求(不推荐)
2.使用第三方开源组件,比如apache的httpclient组件(可以直接在网上复制粘贴) 

方案五: nginx反向代理

核心原理: 其实也是利用了方案四的这种代理机制来完成AJAX的跨域

实现: 实现起来很简单,只需要修改一个nginx的配置即可,具体可以去看nginx的视频