zoukankan      html  css  js  c++  java
  • 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部分

    服务端部分:

    运行结果:

  • 相关阅读:
    base标签使用
    自定义cell的背景图(色)
    如何在iphone 4上使用高分图
    转iphone元素的尺寸
    mac下显示隐藏文件的方法
    转iphone如何调试EXC_BAD_ACCESS
    iphone sleep方法
    uitable view自带的动画效果
    iphone 直接中转到appstore
    uitableview 默认选中第一行
  • 原文地址:https://www.cnblogs.com/shijia-dreamhome/p/4345794.html
Copyright © 2011-2022 走看看