002_CRM项目-复习ajax2原创

好，那么我们接着啊来看。一个这个小案例啊，老师之前呢，这个搭了一个这个项目啊，啊，因为咱们现在这个最新版本的这个idea啊，这个有点这个环境上的一个小问题，我测了一下这个搭建的这个环境啊，感觉没有什么太大问题啊。好，咱们简单看一看啊。在咱们这个后台啊，我简单搭了一个这个so that do get do post，咱们都很熟悉对吧？呃，然后在这个外面叉L里边啊，咱们有一个后台的这个访问路径MY01.do对吧。那将来咱们访问前端，访问后台是不根据这个路径能够看得出来啊，以后同学们要看路径其实要很敏感的啊，我如果访问一个点GSP是说明我要访问前端，我如果访问一个点度是访问后台，OK吧，前端资源和后台资源啊，都是属于我们服务器中的资源，你根据路径能够判断的出来，OK吧，好，那么我们在这儿啊，老师搭了一个这个test1.gspok吧啊，我们使用的是这个base pass变量结合这个base标签的形式。

加这个贝斯标签之后啊。我们这个页面中所有的相对路径集体失效。我们未来的实际项目开发不存在相对路径，必须都是绝对路径，是这样吗？哎，加入了这个base标签之后，咱们以后这个路径怎么用呢？比如说我现在要引一下咱们这个JS下的这个杰克，你看看啊老师这个引法首先啊，需要大家注意的是前面加不加这个杠。这个杠是不加的，OK吧，我们所有的资源啊，这个前端资源啊，一律从web web，或者有些同学叫这个web APP，对吧，从这个夹一下开始往下引，前面不加杠，OK吧，好。那现在啊，咱们来看一看啊，这包的里边我随便加了点东西啊。

好，然后写课文引入之后啊，呃，我问了他一下，因为有这个有很多同学在这个做这个项目的时候呢。呃，其实代码没有问题啊，啊，尤其是第一遍的时候，有可能是赵超老师代码啊，先熟悉一遍，那跟老师代码一模一样的时候，有可能你的就出现问题了，为什么你的显示不出来了啊，就是因为有可能你的这个环境它是失败的，OK吧？啊，你看同样都是咱们导入了这个解扣呀，但是有可能你的这个解扣这个资源啊，没有这个加载到我们这个项目里。OK吧，所以说你先来个Dollar function，你先alert弹个框，如果这个框弹的是不是说明我们这个Dollar好使了。说明咱们这个解扣是不是引入成功了，OK吧，好，我现在啊，把这个服务先给跑一下啊。其实idea它这个不同的版本啊，也是天差级别的啊，应用的方式都不一样，那比如说一七版和这个一八版，那这个差别是很大的啊OK吧，好有，但是咱们这个一八班有也有一些个这个小问题啊，诶同学们有没有出现过这个system out不出的情况有没。

或者是你写着写着咱们这个窗口自动关闭，这个问题有没。这个同学们应该有吧啊，教师机上，反正我现在暂时还没遇到过啊，我暂时还没遇到过，因为之前我们用的是最早最早玩的是那个eclipse嘛，对不对，然后eclipse之后咱们又是这个idea，这个2017版，现在是2018版啊，反正我在2018版之后，我我也没遇到过这种情况，但是有些个别同学遇到过OK吧啊，所以说这个idea还是挺挑这个环境的。啊，好。我先来看啊，输入一下咱们的HTTP好。Local host，我这个跟你们的不太一样啊，啊，因为这个如果是这个你们同学们的啊，这个东西有可能是什么呢？这个你在启动完服务器之后，咱们是自动弹出来了，对不对，而且我还跟有一点跟你们不一样是什么呢？呃，我习惯于这个自己保存。

我在改完之后，D说自动保存呢啊，我是手动保存啊，这这两点啊，这个不强制要求，根据你个人的习惯来OK吗？啊，我个人的习惯是这个，我自己敲这个地址啊，我觉得心里踏实OK吧，好，这个也不强制你们啊，好，咱们来一个零一杠阿贾克斯零一杠test1.jsp，好我们现在来看咱们这个123谈了，对吧，而且这个内容也展现了，好现在再再来测试一下啊，咱们这个前端资源的这个加载情况，呃，我在这个D的后边，咱们再来一串E，好，我在不重新启动服务器的情况下，看看咱们这个idea能不能自动帮我们加载好刷新一下有吧。啊，有就行啊，没有任何问题，OK吧，好，那现在啊，老师先来给大家描绘一个局部刷新的这么一个案例啊，我们来看一看。

好，现在我来搭一个按钮啊。Button好，给button呢这个按钮呢，起一个名字，好起名字啊，大家注意啊，我以后说起名字其实就是给ID起名字，OK吧，ID呢是我们当前页面元素当中属于唯一标识的这么一个属性，OK吧，好，我现在来一个，比如说叫点击BTN啊，自己起个名而已，咱们加一个点击吧，点。点击。好，呃，下面呢，我再画两个盒子啊，盒子咱们说div啊对不对，好这个ID啊，咱们要用到的啊，给它起一个名字msg message啊缩写啊消息OK吧，好，给它来一个样式啊宽。

咱们来个200吧。高。咱们也来个200啊。啊，就相当于一个正方形呗，对不对。好，再来一个背景色，背景色怎么弄？Background color是不是咱们随便来个颜色啊，浅一点。比如说。Pink。粉色行吗？啊。咱们班也有女同学嘛，对不对啊，好久没见到女生了。

好。咱班好几个女同学呢，是吧，啊哎，行了，别看了，还行了啊，听课啊，这这个你们放心啊，这个老师上课不开车啊啊跟跟跟跟以前某阶段老师不一样啊，说跟某阶段什么第几阶段。一和反是吧，行。行了行了，静一静，静一静，静一静啊柯老师屏幕啊好了。我现在要干个活啊，我现在干个活，大家注意啊，我现在通过一个点击的按钮做一个点击。干嘛呢？我要往第一个div里边添点内容。很简单吧，对不对，好，但是第二个大家注意啊，第二个div里边呢，我已经有了点内容啊，比如说ABC。DF行吧，好，第一个这个MSG里边啊，我给他添点内容，好，这里边儿这个内容咱们怎么填写，首先呢，我要先拿到这个div，第一步拿到这个div元素，第二步往div标签对里边塞内容没错吧。

好，怎么拿到这个div。这什么井号MSG对不对，DR哎，这是我们下一个需要注意的地方啊，大家注意啊，好，我现在来看一看对于接口RY这个存值和取值的这个理解啊好呃，在这呢，老师要说明这个几点问题啊，首先第一个呢，叫做这个VL。里边有值和和里边没值的啊。然后下一个是什么呢。HTML。里边在值和里边为止的OK吧，好，哎，不是这个H对吧，好最后一个。

在啊里边带值和里边。不带值的啊，好，这三个啊，我们来看一看，首先呢，我们先来看第一个啊，Val方法好，那么它相当于什么呢？同学们，它相当于。咱们原声接S的，这个好理解一些啊，原生JS的哪句话，同学们do点什么？是什么是value啊，能不能反应过来，我给你写全啊，do.get element by ID，这个很熟悉啊，这不是一个拿到一个do对象对吧？好，然后点什么，同学们说点value啊，对不对？好，它主要针对于什么呢？针对于什么？

表单元素什么呢？叫Y流属性值的存取值操作OK吧，存取值操作OK吧，好例如什么呢，咱这个。Input标签对吧，Select标签OK吧，包括咱们未来这个text area，但是这个text area啊，这个咱们以后再说OK吧，这个东西啊，AA这个东西见过吧，文本域对不对啊，这个东西需要特殊说明的啊，这个以后再说OK吧，好啊，他们有这个属性值，大家注意看啊，咱们例如有一个。Input你看啊，这里边可以有ID，也可有有这个type，对不对，也可以有name，但是我要说的什么呢？就value这是一个属性啊。对吧，好，那对于slack呢，同学们。

Select，它这个value在哪呢？是不是在这个option里边呢，对不对，这是针对于这个value的这个属性值的存取值操作，OK吧，好，它是针对于表单的啊，针对于表单元素的，OK吧，那这肯定是什么，这个是。存折这个什么。取值啊好，下边的咱们这个HTML啊，它相当于什么呢。原生接S的。Document get element by ID，这回是什么点？你呢？HTML是这样吧，好，它针对于什么呢？标签对。中的内容的存取值操作啊存取值操作什么叫标签对中的内容呢？

例如来看看同学们，这是标签对吧，这里边儿内容的存取和OK吧，好，还有什么咱们比较熟悉的，来看一看。P是不是段落呀，对不对，好用最多的什么div或者什么，还有一个用最多的是吧，死边这个用的是不是都很多呀？哎，这个标签对中内容的存取值操作OK吧，好，那么知道大家注意的是什么呢？我们该形式啊。该形式。好，对于这个啊，HTML啊，能够这个啊，随着内容啊，随着对于HTML。这个元素啊，对于H元素啊，随着内容啊，可以动态的赋予啊，好，那么这个值呢，叫做存值，这个叫做。

取值啊好，下面的这个T啊，那么大家注意啊，它跟我们上边的啊，这个与我们上述的这个HTML方法啊。非常相似啊，非常相似，好，它同样也是针对于什么呢？标签对中的内容的存取值操作OK吧，但是啊，与上述HTML方法。不同的是啊，咱们这种形式啊。方法啊。方法啊，这个啊，只针对于什么呢？只针对于。

这个啊，内容本身啊，内容本身不注重什么呢。不注重这个啊，这个HTML元素的动态赋予啊，在这儿老师举一个例子啊，那比如说我在这块给它赋个值啊，这个HT它对于什么你看啊，比如说都是这个3A啊，假设都是3A啊。啊，从这点来看都行都可以OK吧，好，但是呢，这个我在这里边，他对什么支持比较好呢？比如说我来一个fo，看到没。OK吧，我来一个cor等于一个red，比如红色啊，好，咱们来个front OK吧，好，那这个大家注意啊，如果你在这里边这么写的话啊，其实它支持的不是很好，能理解吧，所以说呢，一般来讲啊，我们使用的啊，未来实际项目开发当中，咱们使用的最多的就是咱们这个HTML方法，这种形式能理解吧？好，那也就是说啊，我们总结出来啊，以后只要是给Y6属性值这个赋值，咱们就用什么呢？VL方法对吧，咱们给标签对中的内容赋值和取值就用什么。

HTML方法OK吧，好，那现在我要做的是什么，我现在是不是要为这个div的这个标签，对里边附点内容，附个123呢，点什么同学们。HTML来个123好。但是大家注意看啊，在页面加载完毕之后，它是不是会自动的赋予这个伊尔法。页面加载完毕之后，我是不是干嘛呢，第12行呢，这个Dollar function里边东西是不是自动执行啊，对不对，但是我现在想要的是什么呢。

哎，是不是通过这个点击来执行啊，对不对，所以说啊，我们现在啊，需要为这个点击按钮来绑定一个时间，是这样吗？好。来，那我还得找到这个按钮啊，也就是说啊，我们这个流程都是一样的啊，首先啊，先找到你需要操作的这个元素，OK吧，好来这回是什么，点击BT掉一个点什么，同学们点click鼠标左键单击事件啊，好把我们上边的这一句给他拿过来。走。OK吧，好，那也就是说啊，这个绑定这个事件啊，你不点击它不处罚是这样吧，行，我们这回啊再来看一看。好，大家注意看啊，点击啊，很简单的一个效果OK吧，好，但是呢，我现在来问你们一个问题啊，也就是说我在点击的时候，我现在在第一个div当中所刷新出来的这个123。

它是局部刷新出来的吗？哎，这个我就分不同阵营了，一半说是，一半儿说不是。啊。就说白了，我换一种换一种问题啊，我就我指的是什么呢？我从点击点击这个按钮，大家注意啊。刷新出来这个123，我下边这个ABCDF。他动我们。动我们。没动你们怎么观察下，老师没动过吧，你不能这么玩啊，你观察谁呢？大家注意啊，你观察这个东西，这个东西是如果闪了一下，就说明咱们页面数整体刷了一次。没错吧，好的，大家注意，你们看他闪没闪啊。没闪，这说明什么？这个123是什么？这123它确确实实什么局部刷新出来的，是这样吗？下边的ABCDF确实是什么连动都没动过，是这样吗？诶，这就很有效的完成了一个局部刷新的效果。

OK吧，页面没有整体闪呢，咱们也没看到闪，也没有看到上面这个啊，刷新这个光标闪是这样吗？它是局部刷新，OK吧，好，局部刷新啊，是我以后有效的提升用户体验的方式，OK吧，但是大家先思考一下，我现在是实现了局部刷新啊，但是呢。我用阿贾克斯了吗？没有啊，好想一想，那阿贾克斯到底是什么？