Ajax介绍

Ajax介绍

Ajax介绍

特点：

局部刷新-异步访问

什么是Ajax？

总体来说Ajax就是一个异步的服务器请求访问

为什么要用到Ajax？

首先平常的服务器访问网址输出数据渲染页面加载跳转这个操作对后台服务器来说造成的压力是不小的…一般少量的数据形式可以用这种方式但数据一但多了用户处于等待的状态
这种访问的操作方式称为同步：也就是说当用户发起请求时,如果这时服务器正忙,那么用户处于等待的状态,同时不可以做其他的操作.一直等到服务器忙完在处理用户的请求。

怎么去优化呢？

首先要了解通常往后的项目中大多数都是实现前后端分离的一个效果，而Ajax中的操作真正体现了前后端的一个分离效果让代码更清晰方面阅读理解 并将 实现异步优化了用户访问服务器等待的一个问题， 也就是所谓的Ajax异步访问

异步：当用户发起请求时,如果遇到服务器正忙,这时用户可以继续执行后续的操作.同时通过回调函数与服务器沟通.这就大大的提高了代码的灵活性减少了后台服务器的压力并且解放了用户的限制

Ajax异步说明：Ajax通过Ajax引擎实现异步的调用.当后台的服务器响应数据之后,通过预先设置好的回调函数进行数据的展现.也就是相当于一个代理服务把请求全部交给Ajax引擎由引擎来等待用户想干嘛干嘛等引擎等到了通过回调函数 的通知方式告知你把数据传输给你等于别人给你全权弄好用户只需要接收一下就好了

什么是回调函数?

一个函数作为参数需要依赖另一个函数执行调用
什么是回调函数？来看一下百度百科的定义为：回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。说的很复杂，我们来用一个生活中的例子来理解回调的意义。在看这个例子之前我们来总结一下回调机制原理。

回调函数是利用函数指针来实现的一种调用机制，学过GUI程序设计技术的同学肯定知道，回调函数还是GUI程序设计的底层技术。

回调机制原理：

1.调用者不知道具体事件发生时需要调用的具体函数

2.被调函数不知道何时被调用，只知道需要完成的任务

3.当具体事件发生时，调用者通过函数指针来调用具体函数

回调机制中的调用者和被调函数互不依赖。

例子：我们经常在电视剧或者电影中看到如下情节，一位主人公为了完成某个非常难的任务，这个时候一个绝世高人给了他一个锦囊，对他说你在遇到困难的时候打开这个锦囊，这个锦囊里面写的东西会告诉你怎么做。其实这里面就蕴含了回调的机制在里面。为什么呢？就比如我们把主人公去某个地方完成任务比作一个函数（调用者），然后锦囊里面的内容为一个函数（被调用者）。看看满不满足上述的3个条件。1.主人公不知道锦囊里面的内容，2.锦囊不知道什么时候会被主人公拆开，锦囊里面只写着怎么帮助主人公解决困难。3.当主人公遇到困难的时候，主人公通过打开锦囊来解决困难。
————————————————

通常呢我们都是 通过典型的同步操作通过Model对象的封装数据将数据渲染到页面的操作这里的跳转页面和访问数据是一步完成的！！！也就是同步操作
如图：

而Ajax是一个分开执行的操作！异步访问注意Ajax 大部分用JOSN方式接收
Ajax操作分为两步：
第一步：发请求后台服务器接收
第二步：接收完以后呢Ajax返回 返回完通过回调函数接收 通过result把数据拿到 接着通过js方式处理到页面上

要想发起Ajax请求呢就要用到jQuery的方式（请求方式之一）:
首先jQuery不能直接用需要导包！导包的话在js的里面 所以就要导入js js去jQuery官网下载jQuery.js


下载好之后存到resources包下的static包中：

然后下载完之后开始做接着先找到页面然后写js，js一般都是要么写头要么写尾我们一般写头上
①第一步引入函数入库 通过

为什么要用这个功能？

因为js是一个解释的语言从第一行执行到最后一行执行的如果执行到函数式编程时函数里有一个属性的赋值要执行 ， 但是属性赋值需要提前声明 才能赋值 而属性的声明在此函数编程的下面还没有解析执行到 此时就会造成里面的属性还没有被声明 那么这里就会报错 所以要用这个功能function() 执行到函数式编程时 会自动跳过此执行，直接执行下面的程序这样等全部的程序加载完之后在执行函数式编程就解决了这个问题！

然后开始写Ajax！在 函数式编程里面写：$(function(){ 这里面写 }）

首先常见Ajax用法（4种）

1.$.get(url地址，提交数据（参数），回调函数，返回值类型）查询2.$.post(url地址，提交数据（参数），回调函数，返回值类型）增加
3.$.put(url地址，提交数据（参数），回调函数，返回值类型）修改4.$.delete(url地址，提交数据（参数），回调函数，返回值类型）删除
(url地址，提交数据，回调函数，返回值类型）解析：url地址和回调函数必须写！！！其他的用了写不用了不写！！！
请求代码格式：$.get("/xxxx"，function(result){}) （其他请求写法都一样换个方式就可以了）
result：是服务器返回的结果
jQuery整体格式写法：
$(function(){
$.get("/xxxx"，function(result){})
}）（其他请求写法都一样换个方式就可以了）
写完了之后呢我们需要把返回的结果一行一行 的渲染到页面当中 就要把数据拿出来一个一个使用
此时就需要用js的循环的方法！接着将返回值结果进行循环
js循环三种写法:
1.常规for循环
for(var i=0;i<result.length;i++){
var user = result[i];
console.log(user)
}

		  2.使用in的关键字
			  //关键字 in index 代表遍历的下标
			  for(index in result){
				var user = result[index]
				console.log(user)
			  }
		 
		  3.使用of关键字 第三种比较常用
			for(user of result){
				console.log(user)
			}

————————————————

循环完后得到服务器返回的结果需要渲染到页面中怎么写？

1.获取对象的属性值 设置一个var类型的变量声明将对象的属性进行赋值获取 js直接对象点。就可以了java中则是get属性 写完之后将赋值的变量用标签进行拼接在标签内部把标签进行拼接
2.选中id=userTable的元素$("userTable")3.之后追加数据append(追加的内容)$(“userTable”).append(tr) 函数：append(追加的内容) 追加 括号里面的内容
代码如图：

Ajax带参用法：

1).字符串拼接

2）2).js对象的写法

$.ajax类型

get请求
1.会将参数通过?号的形式进行拼接. http://localhost:8090/findUser?id=1&password=123456
2.get请求会将所有的参数动态的拼接到URL中,相对不安全.
3.Get请求不适用于大量的数据提交 各大的浏览器对于Get请求一般都是有上限的.
总结:
1.查询数据时.
2.获取简单数据时使用(页面/JS/CSS…)
3.一般请求中get请求居多.

POST
1.POST请求将所有的参数都会进行form的封装.
2.如果需要传递海量的数据,则首选POST
3.POST的请求使用form进行封装,相对于GET请求更加的安全.

总结:
1.提交海量的数据时使用.
2.一般提交文件时使用
3.提交
————————————————————————————————————————————

发起Ajax请求（二——VueAjax用法！）

Axios介召：（英语读法：啊克斯奥斯）

通常的Aajx是通过回调函数的方式通知用户的而回调函数有一个弊端就是回调地狱！！

什么是回调地狱？

函数作为参数层层嵌套

解释：

好比一个用户发起一个查询请求通过Ajax的请求发出 而Ajax是通过异步的方式通过回调函数的方式通知用户并返回数据请求的一个操作。而Ajax内部是用户把 请求数据提交给javascript编写的Ajax引擎中， 通过Ajax引擎接收用户所有请求让Ajax引擎帮用户去完成请求（Ajax引擎相当于一个代理）等用户请求完成后通知用户并返回用户请求结果 ，那么如果用户发起多次查询请求那么Ajax引擎就要完成用户所有请求后一起返还给用户。 所以在Ajax引擎内部中：请求要一个一个完成请求最终全部执行完毕交给用户 ，第一个请求完成后通过回调函数返回给用户. 第二个请求完成后也返回给用户.那么第一个请求已经完成了已经返回给用户了第二个请求还在后台服务器中加载中还没有执行完毕那么用户就还要等第二个请求完成后才能接收，如果有多个请求那么用户还是要等待？而前面提到Ajax引擎是完成所有请求后一起返回的所以第二个请求就会依赖与第一个请求把第二个请求的返回结果通过回调函数返回给第一个请求最后通过第一个请求的回调函数一起返还给用户就相当于第一个请求等第二个请求第二个请求等第三个请求以此类推全部执行完毕后都由第一个请求通过回调函数方式返还给用户请求结果。这样就达到了Ajax引擎的内部执行的操作就等于如果有很多层请求业务或者业务复杂时一个请求依赖于上一个请求如果中间出现任何问题。则导致整个ajax调用失败！！

回调地狱的原因是：

回调地狱是由功能逻辑代码嵌套的层次太多,导致可读性降低,维护困难,避免回调地狱的最重要的方面是将功能移开,保持代码简单，不嵌套并分成小模块,也就是多多进行代码封装

回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

那该如何解决回调地狱呢？

用Axios！！首先了解Promise是js中的一个原生对象，是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案。Ajax包含了Promis，而Promis兼容了Ajax所以学习最高级的Axios。
Axios： 是一个基于 promise(内部封装了ajax) 的 HTTP 库，可以用在浏览器和 node.js 中.所以用最高级的Axios来解决
Axios作用: 在内部 简化异步调用
==解释：==并不是jQuery的Ajax就不用了，看情况如果工作公司不用vue的话就用jQuery的Ajax而vue只是解决了ajax的一些弊端并不代表jQuery的Ajax就不能用了如果公司用vue那就用vue 的写法减少代码的弊端！！！

Ajax特性：

Axios写法：

先下载一个axios.js的一个包从这个网址下载

接着放到HBuilder X的js的文件中就可以了
首先前端写法：
1.用标签src属性导入Js类库

2.定义一个

Axios-get/delete请求：

说明： 首先get和delete都是查询请求 查到要查的和查到要删的请求 写法以get为例（delete写法与get一样换个请求类型就可以了：
写请求之前操作：
从js类库引出对象通过对象点也就是（axios.）的一个 形式

get：
axios.get（）的形式写：原先的括号内的参数有四个，优化后只有两个参数：①url的地址 ②提交的参数 （提交参数用到了写不用可以不写）
url原先是写在括号了里面的也做了优化调整声明了一个变量赋值的操作进行了优化简写这样不用写一个请求就要写一遍地址直接调声明 的变量就可以了（没有提交参数可以这样简化）

如果有提交参数就不能这么写了 要这样写：直接写全名

之前这样写后面有回调函数：（这样写有疯狂的回调地狱的风险）

于是做了优化了把回调函数的方式抽取了出来通过.then（回调方法（结果）+{回调函数}）来获取返回的结果！！！

接着返回服务器的结果
get最终写法格式：

但是发现里面的回调函数写法过于繁琐于是又进行了优化改成了：

这样写公司里都是这样简化写的以这个为主！！！！
注意：axios写法和jQuery的Ajax写法不一样 jQuery的Ajax是相对路径的写法通过tomcat服务器内部跳转的 ,axios写法是绝对路径(全路径）的写发不是通过tomcat服务器内部跳转的而是axios专门的单独的一个Ajax请求所以浏览器认定是一个跨域的请求要想通过tomcat服务器去访问外部的请求就要用到一个注解：@CrossOrigin

axios-get带参的写法：
==前端写法：==get和delece写法一样都是通过id查询和删除（切记Ajax返回结果是JSON串需要用注解转换：@ResponseBody在后端的方法上使用）

接着后端接收：

axios带参的getrestFul写法：
前端请求：

后端拦截：

axios带参的getparams写法：(只能用于get和delete）
前端请求：

这种方式好处：结构虽然混乱但是用户请求参数如果多的话方便写也好整理
后端拦截：

Axios-POST/PUT请求

说明: POST/PUT请求一般都是页面向服务器提交数据. 参数应该可以使用对象的方式封装
以POST为例子POST/PUT请求写法都一样:
axios带参的对象传参POST请求:
前端写法:

后端写法:

解释分析：
axios并不是简简单单把对象参数传递过来而是把整个对象当作JOSN串进行传递，此时
传过来的是JSON没有办法去接。因为如果用name和id具体的Key和value去接不行被JOSN串
包裹了在内部没有办法解析，推过来的是一串JSON我们只能按照一堆的方式去处理。所以就要去定义一个实体类将数据一 一 对应，最后加一个注解将返回的JSON串转化为对象传回到前端中这样就可以接收到参数了。
post/put Form表单传参
前端写法：

后端写法：

post/putrestFul风格写法其实都是通用的理解就好
前端写法：

后端写法：

这里其实和其他请求写的一样只需要把注解和请求类型换换就可以然后请求类型{id}/{tomcat}形式就可以了

Axios的配置简化操作

解释写请求前可以把这些标注上这样写起请求就不用一个一个加很长的地址了！！！