16-JSON和Ajax请求&i18n国际化/08-尚硅谷-AJAX-原生JavaScript的AJAX请求示例

呃，咱们接着看一下哈。我们先来演示一下，嗯，这个啥是啥样子，是阿贾克的请求哈，大家注意看，呃，我们打开我们要练习的另一个页面啊，咱们刚用的页面是Jason演示了Jason了，阿贾克请求呢，咱咱们用这个是吧，那么大家注意这个页面是啥呢？咱们先看看这个页面的内容再说哈。走，大家看这个页面特别简单，就一个按钮，看见吗？就一个按钮，那这是文字说啊，这request什么意思，就是说你点这个按钮的时候，他希望你发起一个阿贾克的请求给服务器，好，那服务器怎么样接收啊，对吧？用select来接收呗，我们我们先准备个S类的哈，呃，我们来这里再建个包啊。用来接收这个阿里克里请求的，呃，咱们今天演示的时候啊，需要用到书城里的basele，咱们把这个base拿过来啊，就咱们前面写好那个贝斯类的复制啊，复制到咱们今天这里面来。

走。好啊，这是base了哈，那么咱们现在写一个类去继承这个base。叫做阿贾克斯soet哈，然后继承贝斯。那么我们先来写个方法。好，咱们说用它来处理这个请求哈，那咱们说Java script，阿贾克斯就调用它，我们给这个配置一个访问地址哈，呃，到咱们web当中web in符的web点查表里面配置一下。

好。呃，咱们这个name是阿贾克斯，那他的全类名。阿贾克斯，再给他配置一下这个访问地址啊，斜杠阿贾克斯，好了，这个有了哈，那现在大家注意看的哈，我们回到这个页面，我们说这里就就一个按钮吗？看见了吗？就一个按钮，那这个按钮上面其实绑定了一个单击事件，它会在上面执行这个方法。呃，这个方法里面我们要干啥？就是我们说在这里使用javascript语言发起阿贾克斯请求，访问服务器这serve let中这个方法对吧？就访问它啊，就这样了哈，就咱们得现在来干啥哈，好，咱们怎么做呢？大家注意啊，使用加斯克的语言发起阿贾克请求，主要分以下四个步骤，记住啊，以下四个步骤有同学老师你咋知道啊，其实你要不会的话，我们也可以看文档，哪个文档啊，就是咱们今天笔记里面有一个离线的手册啊，你看它阿贾克斯怎么用，这里也有教程，你看这个浏览器啊。

阿贾克斯，看见了吗？点开啊，大概就这里这四步，这四步第一干什么呢？创建对象啊什么呀。他没有APP request对象就跟我们这里说的其实是一样的，看见了吗？那怎么创建呢？你看人家代码呀，看人示例，人家是不是new啊，然后用一个变量来接收，为什么变量接收看见吗？哎，那我们接收来创建一下啊哇，叫做插门HTP。

Request等于什么东西啊，New一个插门HP request有吧，有的哈，好创建好之后注意看第二步通过open方法设置请求的参数啊，或者说你看你看下面也行，看见了吗？先调用open，然后调用send，看open是设置参数send的发送请求是吧？来我们看一下哈，这里有说明，Open看啥呀，规定请求的类型，请求的地址是否是异。啊，主要就是三个method是表示请求类型，Get还是破请求，Ul是表示请求的地址嘛，对吧？呃，最后第三个参数是表示是否是异啊，那我们用阿贾克斯基本上都是异啊。来，那我们做一下哈，XLHB快的点open。看见吧，第一个写上你请求类型，第二个请求的地址那个写上啊HTTP冒号双斜线localho，呃，8080，然后呢，咱们的工程路径啊，这比较长这个东西。

大家复制一下，然后后面是阿贾克斯，这别写错啊，问号大家注意，你要请求这里面这个方法。是不是还得加一个参数啊，哪个参数是不是加这个action参数还记得吧啊，我复制方法名哈。先关了啊。Action等于方法名。就好了，嗯，然后第三个参数是什么呀？异补是否是异补是吧？好这样就好了，这就是设置请求的参数，记住啊，然后你要发送请求呢，第这第三步send你可以看看这边啊，大家可以看文档，Send干嘛呢？发请给服务器啊，发点图给服务器来吧，他们APP快点send哈，走好了，那么这三步之后，他就可以把这个请求发给服务器了，那么我们在服务器要验证下这个请求过来怎么办呢？我打印这话阿贾克斯请求过来了是吧。

好，那咱们重新启动一下哈。找到今天这个工程再重新启动一下。稍等啊。啊，这个启动了，那启动之后呢，来咱们看一下哈，阿贾克斯点HTML，现在我轻量服务器这边的内容啊，注意看了哈，我现在点击这个按钮走，诶咋没反应呢。来，我看看是不是缓存的原因啊，这个大码已经有了。来吧，那我再点一次，大家这次过来了啊，这就过来了哈，刚刚可能是缓存，我刷新一下就有了，好这个呢，大家注意，已经把请求发给了服务器，但是大家注意，我们说一般请求是不是为了要获取某些信息啊，是吧，我们说请求跟响应是成对出现的，但现在呢，只有请求。

那响应怎么办？我们来看看哈，我们在服务器这边给客户端返回一点数据。咱们就说返回一个person对象吧，啊，就假设他现在查到一个person是吧，要返回怎么办呢？New person。呃，咱们这里写上一国歌。好，大家注意看，我现在要返回这个person对象，我怎么返回？啊，我怎么返回？大家注意，客户端跟服务器啊，不在同一台电脑上，你把这个person返回地址返回给人家是没有用的，人家需要的是里面的数据，而客户端和服务器如果不在同一个服务器上，你要把这个数据传回去怎么办？你得先把这个person转成字符串联行，那转成什么样格式的字串呢？那就是咱们今天说的Jason格式的字符串啊，那咱们其实前面也讲过。

大家看，我们说大家看啊，一般我们在客户端和服务器之间进行数据交换的时候，是不是用C的字符串呢？那现在你是不是要把这个数据转给客户端，那你就得把它转成Jason，这不串了哈，就跟我们前面讲的一样，等于六高森哈，然后呢高森点。go.to Jason哈，你把这个person对象呢，就放下来，它会转成这个person Jason啊，那这个东西怎么返回，大家看看哈，现在你要把一个字符串返回了客户端怎么做？那你得先得到响应的字符输出流啊。

Right就可以了，叫做。好，这样就好了，那客户端怎么接收呢？我们可以看到文档哈，他说响应了，那怎么接收，注意看，他说如果需要获取来自呃服务器的响应，那可以使用它没有HP对块的对象，也就是我们刚刚在这里创建的这个对象，对吧。哎，可以使用这个对象的属性就是什么呢？Response test或者response插描属性。啊，你可以看这个说明是吧，他说这是什么获取呃，字符串返回的数据，这个呢，获取叉L的，那咱们很明显不是叉L了吧，那那就用这个。那那就用这个怎么用啊。

大概就是这样子，就是X没HP.response有吧，哎有但是怎么用呢，怎么用，大家来看一下哈。他说你看到了吗？通过这个对象点这个属性就行了，但只是这样子就完了吗？不是，还要看第四步，大家看啊，当请求发送到服务器时，我们需要做一些基于响应的任务，什么意思？这个话就是说响应回来了，我想做点事情怎么办啊，是吧？那怎么办呢？那么你就就会调用这样一个事件，叫做unre state change，大家注意这里有个叫做reed这个属性，这个属性呢是存在于这个对象当中的。啊，它一共有五个值，每个值表示不同的一个状态值，那咱们可以看一下哈，就是01234嘛，就五个嘛，对吧，零表示请求还没有处始啊，一表示服务器已经建立了连接，二表示请求已被接收，三表示请求处理中，四表示。

请求已完成且响应你就去，什么叫做响应你就去啊，简单一点说就是服务器已经把数据回传回来了，而且我们收到了啊，那么也就是在你收到了以后，你是不是才能够得到相应的内容了，所以大家注意，一般情况下就这个地方，你你要用的话，你得先判断，大家注意哦，这个值等于四才行，就ready state等于四才行，那每一次大家注意每一次ready state只要发生改变，它就会触发一个事件，叫做onate change。就这个意思啊，好，除此以外，除了这个状态以外，还有一个stay状态等于200啊，404啊，其实就是这个就是响应代码了是吧，那你看哈，他说在这个事件当中，我们规定服务器响应啊，那么并且呢，准备去处理任务的时候，注意看他要这个状态等于四，而且这个状态还要等于200，哎，就表示请求响应成功嘛，啊那下面呢，人家就已经告诉我们一个设例，就大概怎么用啊，这个这个东西你得给这个on state change辅一个函数，在这里面判断这release state等于是并且响应状态码是200，那你才能用它。

啊才能用它好，那怎么写哈来注意看。那就是在这个地方插每HD这块点ready，啊ready state change等于一个function个顺，哎就这样子，我们在这里面。也不是直接就用了，也不是直接就用了，你还得再判断，就跟我们文档中看到的是一样的啊，他们要点ready state要等于四，并且HTML ready state等于200才行，只有这两个值都对了，OK，那么你才能够使用这个东西，好，但是光这样就够了吗？还不行，大家看我在这里的第第四步啊，我还给你标求一下，我们说在三个方法前绑定这个事件，大家注意I ready state change。

这个函数最好是在S的方法之前。否则有时候这里就会出现一些问题，注意啊，那我们把这个第四步移到第三步之前一定要注意哈，好，那现在得到这个内容，我们先aloud试试看，看看是不是服务器给我们传回来那个数据啊，好了，呃，这个写好以后啊，咱们重新部署一下。稍等啊。好，重新部署成功了，我们清掉。我们在这边刷新刷新一下啊，你的这个缓存确认一下啊，没问题改了来我们点一下走。

大家看数据是不是返回了，但是它有响应的这个乱码问题是吧，那我们解决一下呗，响应乱码怎么做，我们在这边。啊，写上这个response set contain t HTML try set等于UTF杠八啊，这就解决了响应乱码了哈。啊就可以了，我们再重新部署一下。加点变异啊，等一等。好了，我们清一下哈，这时候我们再刷新点是不回来了。哎，就回来了，好，那一般得到这个数据以后啊，大家注意哈。在开发的时候，我们很少会alert把这个信息出来，而是把这个信息显示到页面上，那怎么显示？大家注意看，我们把这个数据啊，放到这个div里面来。

放这里面来，那怎么做呀？document.get element by ID，这个ID值是谁啊？就DIV01嘛，对吧，先得到这个标签对象，那我现在要把这个数据放到这个div起始标签和结束标签里面怎么办？那就是注意看啊，点in呢，HTL等于什么？等于返回了这个内容。是吧，然后就放进来了，你说这是干啥？把响应的数据显示在页面上是吧？好来，咱们多刷新几次啊，因为它可能会有缓存点击，这是不是出来了也没问题，但是大家请看啊，这个数据是显示出来了，但你想一想，对于这个普通用户而言，就是用户啊，一个普通的用户啊，没有学过计算机的，就是发了某个请求，干了某个功能是吧？在页面上看到这样一个字符串，你觉得普通的用户他能看得懂吗？

普通用户看不懂，普通的用户他希望看到的是什么？编号是一名称叫做国歌，能理解吗？诶，那这时候怎么办？你得把那个Jason字符串得转成什么Jason对象之后取出它的这个K啊，分别显示在页面上才行，那我们看一下怎么做哈，就是这个数据呀，你你还不能直接用是吧？来怎么办呢？就是jason.tell诶。Jason点，然后呢，你把这个Jason的字符串。转进来。那我手写吧，Jason OB BJ，等于它转过来之后啊，怎么怎么用这东西呢，大家看哈，我们说编号用户希望看到是这种Jason oj.ID。

加上姓名Jason oj.name哎，就这样子啊，就这样子好了，那我们改过之后啊，我们来看看这效果，刷新刷新走，大家看这个是不是更加的友好啊，好，那这就是咱们的一个。阿贾克斯请求示例了啊，有请求有响应好。