2. 尚硅谷_佟刚_Ajax_使用 XMLHttpRequest 实现 Ajax

那我们就来实现一下吧，那实现的话呢，前面我们讲了哈，工具包里边有那么多的这个技术点，其中呃，一个我们比较生疏的就是这个XL htb request，我们讲啊，这是一个对象。这要是一个对象的话就简单了是吧，无非是有一些属性和方法呗，来看一下这个呢，最早是在IE5里边以activex主件的形式出现的，它并不是W3的标准，创建这个方式呢，因为是非标准，所以说不统一，我们在IE7以后统一了IEIE7以前不统一，好在我们现在没有用IE6的吧，对，只要是E7以后的话呢，我们这个创建的方式就统一了，那这个IE浏览器的话呢，以前把这个作为一个呃，Active X对象，但我们我们现在到后边的话呢，到这个IC以后都是XL htp request对象，那这个在不同浏览器上的实现是兼容的，就创建的方式不一样，但属性啊，方法呀是一样的。

创建的方式的话呢，我们目前创建的方式，我们直接这样写就可以。这一行，嗯，New XL htp request就可以了，那要是在这个IE7以前的话呢，你可能还得照顾到IE，我们现在的话呢，我们就不去做这个兼容性了，因为我们后边开发的话呢，使用解query，我们不用考虑这个兼容性的问题，我们创建这个XL request，我们仅是给大家举一个例子啊，我用原生的可以这样写，但开发的时候用原生写太麻烦了，但是我们这个底层我们需要了解吗？是吧？好了，创建好之后的话呢，它会有一些属性和方法，呃，我们说重点说几个方法，第一个open是啥意思啊？打开吧，打开里边的话呢，可以放两个参数，第一个method请求的方式ul。

请求的地址好了，还有一个是send发送请求。啊，里边指定的一个内容好了，这个类似于什么呢？小的时候啊，有一款这个日本的这个科幻的一个这个这个小片叫泰坦尼克号，你们听过吧。人间大炮一级准备人机大炮，二级准备人机大炮发射，看来我们之间的这个代沟是非常非常的大呀是吧？好了，那这个open的话呢，就相当于把这个炮口张开，告诉我打击的方式是盖的方式还是炮S的方式，打击的目标就是那个ul，炮口张开，但是没有发射哈，Send的发射点火了是吧？点火一发射的话呢，哎，里边可以带一个呃发射的内容，这是我们发请求使用open跟send就可以了，好了，请求发过去以后的话呢，那到了服端，服务端把这个内容准备好了是吧？服务端把这个内容给我返回来了，那我在客务端如何在接收服务端给我返回的这个请求呢？哎，我们需要用到这样的几个属性，呃，Ready state change。

On state change这是一个什么？这是一个事件，那我们服务器端的每一次的这个，比方说我发一个请求过去了是吧？那过程中我们会有一些状态的改变，每一个状态的改变都会导致onri state change这个事件被触发，但哪些事件呢？就是这个writing state啊，可以取01234等等等等，是四的时候表示交互完成啊，Status啊，服务器端返回的状态码，200表示OK 404表示不存在，500表示内部错误等等等等。还有一个就是呃，Response text表示服务器端返回的一个文本字符串，Response xml表示服务器端返回的一个X数据，对，这就是整个的。

最常用的两个方法和样最常用的五个属性，当然还有一个可以用哈，叫set request，什么时候用呢？我们在讲用post请求的时候用它。Po请求的时候，你需要设一下POS请求嘛，设这个request hier好了，说完之后的话呢，下边我们就来写一个hello word看一眼。新建一个动态的外部工程A。我们先写一个简单的哈。我呢，来写一个JP。

这个页面里边我不写别的哈，我只写一个超链接。我要显示一个字符串。要显示一个字串，比方说hello。TXT。你说C拿过来。写完了，这样写完之后的话呢，我们找一下啊。好了，我一点这个是不是过来了呀，这肯定不是HX，我希望怎么办呢？哎，我希望我点它的时候用alert把这个信息给我弹出来，懂这个意思吧，看我点它的时候，它要是页面不刷新，能把这个内容给我弹出来，这不就是一个AX吗？

哎，我们来实现一下，看看怎么写，我们使用原生的XL http request写一个招啊，Script。先不用这个quiry什么温on等于方。我要使底下这个A标签起作用哈，Document点在element by解的话是不是也看内A的D0个元素啊，Click等于function，首先我return一个false什么作用啊，取消默认行为吧，否则一点数是跑了呀。

跑一个，你看他不跑了，不跑了OK。我们说一下步骤哈，一。获取A节点，并为其添加on click响应函数二、取消A。节点的默认行为，好，OK，这个步骤第三步，我们要创建一个XL http request对像四。

准备请求，准准备发送请求的这个数据，我们都是准备什么呢？具体就是准备一个ul就可以了，因为我们要发一个带请求好五调用。这个的盆方法六，要用八个肾的方法发请求啊。光这些啊还不够，这些的话呢，只能说明我们这个请求发过去了，但我需要看，但我需要看见结果，然后呢，为这个对象添加on it。

Change state change响应函数必须的九，那什么时候这个钱要回来了呢？说判断这个响应是否完成，如何判断这个是否完成啊，这个对象对啊，Friday it属性值为四的时候，表示这个假映完成了。九钱完成的话呢，并不意味着钱可以用啊，再判断。

响应。是否可用，是否可用的话什么呢？使用这个对象的status，如果这个值是200的话不。这个对象的这个属性值为200老是正常返回，然后呢，打印行结果。响应。结果是什么呀？Response这么多，一步一步来哈，Request。等于6X秒二。

什么应该有提示的有xp request。或URL等于URL是谁啊，这么写是吧，X点属性它们。Open方法。Open请求方式等于。爱的方式。打击的方式是吧，请求方式还有一个地址啊URL，然后发请求，注意我不发任何请求，因为这个时候什么样，是不是一个盖的请求啊，这个请求的这个这个这个数据的话呢，应该放在这个URL后边好了，这些写完之后的话呢，应该能够看到点啥了，咱试试哈。

复制用它看。工具开发者工具，我们看这个网络，我点一下坏了没好用是吧。直接走了，Gets a window.onload等于function周都没进来呀，是这个意思吧？对呀，为啥进不来呀，对啊。

第一个A是好用的是吧，这A也是好用吧，那说明后边这有问题，后边有什么问题啊，某一步写错了包后包，导致后边这个return不好使吧，Request等于new xmltp看一眼我也不写，有点忘了是吧？HTTP是小写的，嗯，再来。放心。好了，我们看到什么了，我把这个去掉，后来的问题就是出现这个对象的这个写错了啊，待会写这个写错了，把我刷新一下好了，我们注意，我点它注意哈，这个是我发送这个inex JSP这个请求吧，是吧，我点它注意看我点哎，这个时候发了一个请求大家看。

发了一个什么请求啊，发了一个get请求ul吗？Get的请求返回值是什么呀？304没有被修改。OK，这样一个结果就是这个这个时候这个请求啊，我已经发过去了，那好吧，那我想侦测到我这个这个结果呢，等于是request on state等于function。好，什么时候完成呢，说当request。等于四的时候表示完成好了再来，我希望返回的是一个正常结果呀，Because status等于200表示正常返回吧，或者我是不是还看见一个304 status等于304的时候完成来。

然后我要最后的这个结果。A，什么呢？request.response。这种。刷新。点一下搜出来了，Hello Ajax。这就可以了。看hello a X，看这个请求是有响应的哈，结果就是hello a X，这是一个最基本的应用，回头再看一眼，这里边的话呢，相当于是我们AX的一个hello word，我们看获取对应的节点，如果是一个超链接的话，我们需要取消其默认行为，然后我们整个这个过程用的就是GS，具体说的话呢，核心是这个xmlhtp request对象，创建这个对象，嗯，调open跟S的方法，这个是是准备请求，发送请求，然后我需要用一种方式来得到想应结果，靠什么呢？靠这个unri state change。好了，我们可以来看一下整个的这个状态变化。

这个时候啊，它跟服务器每交互到一定程度的话呢，都会导致的这个red space这个属性发生变化，看一下哈，刷新走，你看有二有三有四，这个四表示完成，这个四表示完成，OK。

然后说如果这个反，如果这个这个属性值是四的话，表示响应完成好了，响应完成的话，并不意味着这个响应可用吧，为什么呀，比方说你这块你写了一个它。是不是根本，我是不是根本就没有这个地儿啊，这个时候这个状态码就是四乘四，你得保证它正常返回了，你再打印呢，所以说我们说啊，这个值是200或者三乘四的时候，表示这个返回值是可用的，然后加上这样一个限定条件啊，打了一个结果看一眼。我在刷你再走怎么了，是不是是不是四乘四啊，这时候就不能用，当然你也可以说啊，我这块这个值是四乘四的时候怎么办。

那那我们说哎，判断这个是200给304的时候，把这个结果给打出来，这就可以了。好，利用XL htp request实例跟服务器端进行通信，包括三个关键部分，第一个unre change事件的处理函数，Open跟send。On ready state change这个这个事件是由服务器来触发，我们以前我们那个事件是不是我们自个点啊，比方说on change啊，On click呀等等等等，而这个事件的话呢，是由服务器出发，而不是用户，然后aja执行过程中，服务器会通知客户端当前的通信状态，这个时候呢，就靠这个属性来实现，呃，每次改这个属性的时候都表示啊，服务器跟客户端的交互到达一定的这个状态，就好像什么呀，就好像这个我们的国家领导人是吧，去这个访问，那你飞机还没到呢，就是说哎，还有多长时间到了啊，已经到机场了，已经到中统府了，这个状态就是靠这个right state，呃，靠靠这个，呃，On ready state change这个事件出发，那标志呢，是这个ready state属性的变化啊。

Open。建立请求，但没有发送请求哈，我们用的是method跟URL请求方式，请求地址后边这个属性啊，一般不用，那这里边有一个需要说的，很多时候啊，我们都需要在这个月L的后边附着一个时间戳，以保证多次请求的这个请求的这个路径是不同的，然后可以禁用浏览器的缓存，啥意思嘞，你看我这个，我打了一个笑脸。

我们要想每次请求这个结果不一样的话呢，我们通常都需要给他带上一个时间戳，那我们这个里边我们这样来写啊。什么意思呢？那这块比方说你加上一个时间戳，加上一个问号，比方说time等于加用对，大家注意我这么写这个new date，这个new date是谁的对象啊，是GS的对象啊，而不是这个Java的对象，好了，我这样写好之后的话呢，我们用Chrome来看。看它大家看我请求这块的话，我是不是要附着了一个time呀，这个时候的话呢，如果你要刷新之后，你要再点的话，这个时间戳这个值是不一样的，所以说这个时候的话就可以起到一定这个禁用缓存的效果哦，我每次点的时候都会创建一个这个新的date啊，以起到禁用缓存这样的一个目的。

再看看还有什么？接收，我们就是用这个ready state，四代表完成响应发送完毕，所以说我们通常情况下的话呢，都把这个值是四来设置这个显应已经回送的一个标准status，我们通常情况下取这个304跟200仪器OK啊，没有修改，然后这就是我们的一个结果po text，它是什么呀？包含了从服务器端发回的数据。好了，那于是的话呢，我这个hello word就写完了，大家也来像我这样来写一个写一下吧，下面的话呢，我们说一下如何用这个xmlhttp request发post请求。

但是的话呢，这个也只是演示一下啊，开发的时候啊，我们用原生的XL HTC request的这个机会并不多，演示一下如何去发送就可以了，了解一下我们还是找到我们最开始那个，嗯，Hello word在这个里边，哎，这里边的话呢，用的是get请求，我们需要改几个地方是吧，首先改为post，然后。应该在open之后，在send之前，我们需要来设置一个request header是吗？如果是post请求的话呢？我们向服务器发数据，我们需要将content type叫什么内容类型设置为它告知服务器正在发送数据，而且呢，这个数据已经是符合这个编码方式的，我写给大家看一眼啊，Request点。

这个值都是他。写完好了，发出你给大家看一眼来，Name等于。写完了，好了，找一下。我们怎么样能够看出它是盖还是POS呀？对，我们使用工具看就可以了，网络没问题，我点一下。是个post请求吧，看到了吧，Post来请求的请求参数，这不是吗？Request在这呢。这就可以了，这就是使用xmlhttp request。

来完成POS请求，仅希望大家，仅希望大家做一个了解就可以了哈。