4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/20-尚硅谷-云尚办公系统-前端基础知识-Axios发送ajax请求.mp4原创

各位同学大家好，下面呢，我们继续来学习前端中的基础知识，下面呢，我们来看一个内容，这个名字叫ex，我这里说明呢，它不是VE中的一部分，是一个独立VE的一个项目，在浏览器中可以帮助我们完成请求，在note JS里边可以向远程接口发送请求。而我们项目中基于ex完成接口请求得到数据，最终进行操作，大家看这张图里边啊，这是前端，这是后端，前端我们通过阿贾克斯调用后端接口得到接反数据，最终完成功能，而这个阿斯调用过程中，我们就要用到这个技术叫。那下面呢，给大家演示一个简单的例子，然后后面我们在项目中再具体使用，那咱们看怎么来做啊，咱们先看一下基本的步骤，首先第一步我们建一个HTM的文件，然后在里边引入两个J次文件，一个是e view的，一个是ex的，然后在里边写上E的结构，大家看结构中啊有咱们之前写到的EL date。

然后加上click，在页面渲染前执行method里边加上具体方法，方法中用Excel发送get请求，进行你的接口，最终得到百色数据，然后最终这里边我们可控制台都输出，或者说在页面中进行显示，那下面呢，按照这个过程，咱们把这个具体例子给各位来写一下，关于这个的具体使用。那我们来看一下啊。首先我在这里边呢，创建一个HT文件，我们是第三个点HTML，这个咱们完成了创建。创建完页面之后呢，在里边我们先生成HT相关代码，然后代码生成之后，按照刚才我们说的步骤，把这个具体的实现咱们进行编写，这个步骤呢，我在图里边给大家先写下，然后咱们一步一步行实现。

所以各位注意啊，你看我现在讲课的一个过程，我都喜欢呢，把这个步骤给大家先分析出来，就是第一步干什么，第二步干什么，第三步做什么，一步一步先分析清楚，然后按照步骤我们再一步一步进行实现。然后咱们看一下啊，首先第一步怎么做，我们在LTML页面中是不是先引入相关的JS文件，这个呢，包含有两个，一个是we的，还有一个是JS文件，这是我们的第一步，然后这步之后第二部分呢，我们在这个。标签里边来编写的相关的代码，包括咱刚才看到的几个结构啊，我就简单写一下，就是咱们写具体的，首先EL指定你的位置。

除此之外，里边有一个date定义我们的初始值，另外里边有一个叫create，咱们之前提到了啊，Create表示在页面渲染之前执行，就是渲染之前你先得到数据，然后之后还有一个属性叫methods。这method里面写什么呢？就是定义我们具体的方法，所以一会儿按照这个结构我们来编写代码，就是课件中写这个结构，这是它固定的格式，E date created methods。除此之外，最后啊，这里边大家注意啊，因为咱要用XSE呢来请求，或者说发送请求，这个请求呢，我们先这么来做，第三步咱这么来写。创建一个Jason格式的文件，然后在我们的代码里面通过Excel。

来发送一个阿贾克的请求，得到里面的数据，把数据咱们在这个控制台进行显示，或者说啊，你也可以在页面中进行显示，所以咱们以上就是一个基本的过程，那下面呢，按照这个过程，咱们把具体内容进行实现，我们来写一下啊，第一步我现在呢，来到我的资料中，在我资料中呢，有两个文件，一个wave，一个Excel，那把两文件复制到我们当前的这个文件夹中啊，之前有wave了，咱就复制这个，这个完成，完成之后在页面中咱们引入两个JS文件，我这里边引入一下啊。首先第一个V点面点JS。然后第二个。不。S2C加上这个叫X。点上命令，这是我们的第一步完成，完成之后呢，怎么做在里边按照we的这个写法啊，但有一个细节没有写，咱之前讲过了，我们在里边呢，加上一个div标签，用于显示内容的，就是我的具体内容在里边显示，然后加个ID属性，我们起个名字，比如叫APP。

完之后下面呢，加上此块的标签，里边写上具体内容，咱们写一下啊，上一，然后在里边加上它的结构，第一个E指定我们显示的位置，来个井号，第二个加上一个date，加上你的初始值，比如我们现在啊，我们起一块一个中的把一个列表，或者说是一个数组数据，咱们起个名字，比如说我叫。优色、栗色。代表咱们就是范围内搞。列表的数组或者列表的集合，然后之后呢，我们再加上下一个方法叫。

它表示在页面渲染之前执行。咱们之前演示过啊，这个什么意思，这里我直接写一下，然后之后我们再加一个属性，这属性methods里边写上具体方法。比如说啊，我写一个这个方法，咱们就叫get list的啊，当然里面可以有参数啊，咱目前是没有，我们就写一个方法，然后在这方法中就实现这个阿贾克斯请求的发送，或者说用。发送阿贾克斯请求。然后这个过程特别说明啊，大家注意create是不是在页面渲染前执行，所以咱们要实现在页面渲染前执行，就来调这个方法得到数据，所以在里边我们来调用一下这个方法，怎么调用呢？咱们加this，点上get，最终可以调方法，页面渲染调方法得到数据，最终在里边我们可以进行显示。

以上是咱们写的一个基本结构，这个咱们就完成，完成之后呢，下面呢，为了咱们请求操作，我在里边呢，建一个Jason文件啊，你可以就是请求我们的口，我这里边一个son文文，过程是一样的，起个名字啊就叫date，然后在里边我给它加上一段数据啊，随便写一个啊，比如第一个我叫这个。Success。它的值写个处。然后第二个咱来一个就是状态码，我写个200。第三个我加上一个date里边加上我们的具体的数据。就这个数据部分，比如说数据里边咱们写一下啊，啊，数据中我们第一个再来一个名称。就是user name名称我就叫name了啊，然后这个叫Lucy，再写一个叫A啊，它的值写个20。

啊，冒号20，然后我们再写下一个，但为了明确啊，比如再写一条数据。这个名称我们叫。然后这个。所以大家看这个是V段这数据，那咱就请求最终得到这段数据，然后咱们在控制台中进行显示啊，这个我们就完成创建啊，当这个数据你可以写别的格式啊，我就以这个为例，这个之后我们在里边来写这个的具体代码，那大家看怎么做啊，它的写法很简单，因为咱们引入了EXJS文件，那我们的做法就是加上ex。点上你的请求方式，比如说get请求啊，咱就来个get，然后在get里边呢，加上你请求的路径，比如说你请求哪个接口，或者说哪个文件，咱们目前是date点请求，然后之后呢，后面我们加上有这么两个方法，就写到下一行了啊，一个叫Z方法。

还有一个方法叫开方法，大家注意啊，看这两个单词什么意思。是不是有，然后这个意思开，咱都知道是不是异常这个意思，所以你可以理解为当我请求成功的时候，我加个注释啊。就是我发送阿列克请求，请求成功就会调用这个Z方法，如果说你请求失败，他就会调用里边那个。势方法，这是一个结构，然后在里边可以得到这个文件，或者说这个接口返回的数据。写下啊，在里边可以得到接口或者文件。里边的那个数据，或者说里边的内容，那我们写一下啊，在里边咱们给它起个名字接收一下，比如说我叫response，呃，加别的名字也可以，咱们加上一个箭头函数，Response就是由这个文件反映的数据，然后里我起个名字，比如我这个啊，加上段函数，这表示你这个错误的信息。

所以现在这一部分就完成了，完成之后咱们把这个response做一个输出，看一下里边得到的是什么样的一个结果。加上response。然后这里中一个。啊，咱来一个挨着，注意写的时候啊，这名字不要写错啊，你这两个要保持一致，要不然他会找不到这名字可以随便起，比如写个A写个W都可以啊，咱为了让它更有实际意义，写一个response。现在这个基础代码我们就完成了，然后咱再重复一遍啊，第一步引入这次文件有wave的U，创建标签用于它显示的位置，然后new view在里边指定位置定义初始值，Create在页面渲染前执行。那我们来调这个方法，方法中发送阿克的请求，得到数据，这里边我们做了一个输出。

所以现在这个就完成了，完成之后咱们访问看一下效果怎么样，先试一下啊。我把F12。这个控制台打开，然后咱们点击03XL啊。比如我刷新一下，大家看你看这位置。是不是有它返回的数据，但是大家发现啊，这数据是不是很多呀，所以咱们把这数据给各位截个图，咱们说一下这数据中到底它是什么样的东西啊，就是这些内容都是什么，我们来看一下啊。我把这个截个图。然后放到一张图里边，咱们在图里边来看一下啊。

然后大家看啊，你看里边是不是有很多内容啊，而内容中是什么呢？这里强调啊，各位应该知道有一个技术叫HTTP协议，该听过啊，P么是请，而现在是response，你是个响应的信息啊，它就是响应的信息，而响应中包含什么？这各位要清楚啊，跟我一起想一下，响应包含什么，是不是有响应行，响应头，还有响应体，我就简写啊，响应行，响应头，响应体包含这三部分，所以它返回的就是这些东西，而咱们数据在哪里，是不是在这位置响应体里边，所以咱找到响应体得到它的数据啊，包括你看有什么hi的啊，有什么其他值。这是它返回内容，而咱们重点看的应该是在这个位置给大家画一下啊在这里。

这一部分是我们说那个响应部分，然后看数据怎么得到啊，整个部分是response，然后它里面第一个是不是有一个叫date。比如说你理解为response里的date代表体，然后在体中我们想真正得到的数据，咱们看啊，是不是在这里边，所以它的下一层还有一个角，Date就是在这个位置，在date里边是咱这个数组，你看有name Lucy name是不是有这个值，所以咱们通过它来得到，那怎么来得到，我在里边写一下啊，展开这个代码。我小这位置。Response，我们点上date，这个得到就是说那个响应体部分，然后在想题里边还有一个date，这个date是我们刚才写的date，所以咱们再点上一个date，这个得到就是咱们最终的这个数据啊，所以现在咱们把它就得到了，当然我的课件中呢，还多了一层list啊，就是你可以再加list，我刚才写的时候没有加这个，直接就是这个数据，所以咱们点上date，再点个date得到数据，各位自己写的时候呢，你可以把这F12打开，自己看一下里面的结构是怎么样，通过它来编你的代码。

这个就完成。完成之后咱做个赋值，这次点user list。等于我们这个数据啊，User是咱们上面定义这个。初始值就这个右侧这个速度。这个我就注释掉了啊，直接输出这个点user。所以现在这个就完成了，完成之后咱们再访问，再来试一下啊，这个结果刷新。大家看是不是有数据，就是Les是二得到里边的两条，第一个是名称是Lucy，第二个名称是Mary。

所以就是用完成阿贾克斯请求的发送，这个我们就完成了，所以各位把这个过程给他知道，因为咱后面项目中是基于它来调用接口得到我们最终的数据。