2015.3.17Ajax小练习

      网页被浏览器处理时,动态供给网页动态数据。以动态数据建造的网页成为数据驱动网页,数据负责网页的内容。

  JavaScript内置了动态数据的支持,这种支持就是ajax。一直以来都对ajax非常的感兴趣,今天做了一个小实验。先来描述一下ajax,ajax能让客户端的浏览器能与网络服务器产生一些“对话”,动态数据也因此而成真,脚本可向服务器请求部分数据,服务器利用ajax传递数据,脚本收下数据并动态的将数据整合到网页里。而网页并不需要全部刷新和重新加载,这样就能大大提高用户的体验和提升速度。ajax是Asynchronous Javascript And XML的缩写,这里也提到了一个xml的概念,xml是种为任何类型的数据设计格式的标记语言。xml可以用自己的标签标示数据,xml与html相似,都是文本。还有xhtml,XHTML是遵守xml的较严格语法规则的新版html。

   整个ajax的交互模型是这样的,在实行客户端浏览器与服务端的数据通信时,ajax以请求(request)与响应(response)为中心概念。浏览器送出请求到服务器,并等待响应,服务器收到响应,开始工作,创建响应,服务器脚本就不是JavaScript了,但JavaScript很厉害啊,现在node.js可以担负部分简单的服务器职责并且功能还在不断的扩展。接下来就是服务器创建给浏览器的响应,把客户端请求的数据打包由ajax响应返回,浏览器解开响应中打包的数据,并小心的将数据整合至网页中。

   javascript内置一个XMLHttpRequest的对象,用于发起ajax请求并处理ajax响应。包含了很多支持ajax的方法与特性。

   readyState请求的状态代码:0(未初始)1(开启)2(已传送)3(接受中)4(已载入)

   status(HTTP的请求状态代码,例如404(NOT FOUND)或200(ok))。

   上述两个特性,可判断ajax请求是否以合法的响应结束。

   onreadystatechange请求状态改变时会被调用的函数引用。(这个特性的独特之处,在于它存储一个引用,引用于ajax请求的状态改变时被调用的自定义事件处理器,这个事件处理器就是处理响应的地方)

  responseText(由服务器返回的响应数据,格式为纯文本字符串)和responseXML(由服务器返回的响应数据,格式为XML节点树构成的对象。)这个两个特性存储服务器返回的Ajax响应数据。

send()传送请求,交给服务器处理。

open()准备请求,指定请求的类型(get,post),URL及其他细节。

send()和open()这两个方法合作准备Ajax骑牛,而后返回给服务器。

abort()这个方法只用在需要取消ajax请求的时候。

由于XMLHttpRequest相当复杂,即使最基础的请求,也需要很多的代码,于是这里把这个基本请求语句封装成一个js模块。方便调用实验,源码如下:

   技术分享

接下来是原生js写的异步加载,这里服务端是用的C#,

技术分享

 

原生js的ajax方法:技术分享

 

执行结果:点击前:技术分享

执行后:

技术分享

 第一次原生异步成功之后,现在试一试jquery的ajax方法

一个是jquery的load加载文档,一个是post和get联接一起使用的方法。

body部分:

技术分享

js部分

技术分享

服务端部分:

技术分享

运行结果:

技术分享

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。