1. Ajax概述
1.1 概述
1.1.1 介绍
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
总结：
局部刷新-异步访问
1.1.2 Ajax原理介绍
1）同步:
当用户发起请求时,如果这时服务器正忙,那么用户处于等待的状态,同时不可以做其他的操作.
2）异步:
当用户发起请求时,如果遇到服务器正忙,这时用户可以继续执行后续的操作.同时通过回调函数与服务器沟通.
3）Ajax异步原理
3.1）常规同步的调用方式：
3.2）Ajax异步调用：
说明:
Ajax通过Ajax引擎实现异步的调用.当后台的服务器响应数据之后,通过预先设置好的回调函数进行数据的展现.
2. Ajax的种类
2.1 原生版ajax
2.1.1 $.ajax类型
2.2 JQuery的ajax
2.2.1 $.get() / $.delete()请求
/**
* $.get(url地址,提交数据,回调函数,返回值类型)
*/
$.get("/访问地址",function(result){
}
2.2.2 $.post() / $.put() 请求
2.2.3 补充
1）getJSON类型：
2）带参数的请求：
2.1）字符串拼接
/**
* 参数说明:
* 语法: key=value&key2=value2....
* 例如: id=1&name=tom
*
*/
$.get("/findAjaxUser",'id=1&name=tom',function(result){
console.log("ajax请求成功!!!")
})
2.2）JS对象
/**
* 参数说明:
* 语法: {key:value,key2:value2.....}
* 例如: {id:1,name='tom'}
*
*/
$.get("/findAjaxUser",{id:1,name='tom'},function(result){
console.log("ajax请求成功!!!")
})
通过chrom控制台检验
2.3 Axios(Vue)
2.3.1 Axios介绍
Axios 是一个基于 promise(内部封装了ajax) 的 HTTP 库，可以用在浏览器和 node.js 中。
作用:
在内部简化异步调用
Axios的优势：
在开发中，JQuery和原生版的ajax存在回调地狱的问题（即一个ajax请求内可能嵌套多个ajax请求），这样如果其中一个请求发生异常，则整个请求会访问失败，后面则诞生了promise对象解决这一问题，但是promise的使用过于繁琐并且语法不够简洁，因此，Axios便开启了它在请求时代的曙光。
2.3.2 Axios的特性
2.3.3 Axios的请求说明
2.3.3.1 前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios入门案例</title>
</head>
<body>
<h1>Axios Ajax调用</h1>
<!-- 1.导入js类库 -->
<script src="../js/axios.js"></script>
<script>
//1.发起Get请求
// 原始参数 1: url地址 参数2:提交参数 参数3:回调函数
// 知识点: 传统的ajax的操作有"回调地狱问题" '闭包'
// 回调地狱问题: 由于业务复杂,导致多重的ajax进行嵌套. 如果中间出现任何问题.则导致整个ajax调用失败.
//参数 1: url地址 2.提交的参数
//跨域请求: 浏览器不能正常执行!!!!
let url = "http://localhost:8090/hello"
axios.get(url)
.then(function(result){
//获取返回值 promise对象
console.log(result)
//如果需要获取服务器的返回值则使用.data属性
console.log(result.data)
})
</script>
</body>
</html>
总结：
- axios的定义：
axios.请求类型(url地址，提交参数).then(方法( 返回值 ){ })- axios请求的返回值结果为一个promise对象，如果要获取服务器返回值，则使用其中的data属性
- 注意跨域问题
2.3.3.2 后端代码
注意开启跨域 @CrossOrigin
2.3.4 Axios的参数传递
2.3.4.1 get/delete的参数传递说明
1）使用 ？ 的方式拼接 参数较少时推荐使用
编辑前端JS：
编辑后端：
2）使用Params对象 推荐，数据一目了然
编辑页面JS
总结：
1.首先传递的是一个对象{},将params作为 key , 对象作为value
2.params是固定写法
编辑后端
3）使用restFul风格
编辑页面JS
编辑后端
2.3.4.2 post/put的参数传递说明
说明: POST/PUT请求一般都是页面向服务器提交数据. 参数应该可以使用对象的方式封装
1）使用对象的方式传参 特殊！传递的是JSON串
编辑页面JS
注意：
这种方式传递时，传递的是一个JSON串，后端要特殊处理
编辑后端
使用 @RequestBody 将前端传递的JSON串转换为对象
2）使用Form表单传参
编辑页面JS
创建 URLSearchParams对象，并通过其中的 append方法添加参数进行传递
编辑后端
2.3.5 async-await的使用
2.3.5.1 语法介绍
1.async-await 是ES7 引入的最新的规范 更加简单的进行异步调用
2.async 用来标识方法(函数)
3.await 标识ajax调用
2.3.5.2 使用说明
2.3.5.3 解构赋值操作
采用解构赋值的操作让代码更加灵活
2.3.6 Axios的常用配置
配置了ajax的基本路径后，以后发起ajax请求可以简写，浏览器会自动拼接生成url地址
3 请求类型说明
3.1 get/delete请求
1.会将参数通过?号的形式进行拼接. http://localhost:8090/findUser?id=1&password=123456
2.get请求会将所有的参数动态的拼接到URL中,相对不安全.
3.Get请求不适用于大量的数据提交，各大的浏览器对于Get请求一般都是有上限的.
总结:
1.查询数据时.
2.获取简单数据时使用(页面/JS/CSS…)
3.一般请求中get请求居多.
3.2 POST/PUT请求
1.POST请求将所有的参数都会进行form的封装.
2.如果需要传递海量的数据,则首选POST
3.POST的请求使用form进行封装,相对于GET请求更加的安全.
总结:
1.提交海量的数据时使用.
2.一般提交文件时使用.
4. 跨域
4.1 同源策略
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。如果缺少了同源策略，浏览器很容易受到 XSS、 CSFR 等攻击。
总结：浏览器出于安全性的考虑,要求所有的请求都必须满足同源策略!!!
同源规则：
所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。
要素: 请求协议://域名:端口 必须相同!!!
4.2 跨域问题
Ajax的请求违反同源策略,ajax的请求就称之为跨域访问
跨域练习:
1.页面地址 https://www.jd.com/xxx/xx
2.ajax请求地址 http://www.jd.com/xx/xx
协议不同,是跨域请求.
1.页面地址 http://www.jd.com/xxx/xx
2.ajax请求地址 http://192.168.1.100/xx/xx 备注: IP就是域名的IP
域名不同 是跨域访问!!!!
1.页面地址 http://www.jd.com:80/xxx/xx
2.ajax请求地址 http://www.jd.com:8090/xx/xx
端口不同 是跨域访问!!!!
4.3 CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS的实质就是在服务器端添加允许访问的响应头 CORS是服务端的一种技术.
chrom浏览器查看响应头信息
*号代表通配符.允许所有的请求访问.
*号可以换成特定的网址.则只允许该网址访问
1321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
