打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Ajax 基础知识
1、Ajax定义:
   Ajax(Asynchronous JavaScript and XML:异步...)是多种技术的综合,包括:JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。
   其中,使用XHTML和CSS标准化呈现,使用DOM进行动态显示和交互,使用XML和XSTL进行数据交换和处理,使用XMLHttpRequest进行异步数据读取,使用JavaScript绑定和处理数据。

2、Ajax的典型应用:
   1)数据校验:判断用户注册时用户名的唯一性
   2)按需读取数据:级联菜单。先读取并显示一级菜单,然后根据用户的选择,读取并加载下级菜单
   3)读取外部数据:可以方便的读取XML文档、RSS文档等数据,实现数据整合或开发应用程序

3、Ajax的缺陷:
   1)IE5.0、NetScape7以上版本
   2)后退按钮失效
   3)因为Ajax是无刷新显示数据,用户可能会没有注意到数据的更新,需要在明显的位置提示用户数据已经更新

4、Ajax应用到的技术:
   1)XMLHttpRequest:
      XMLHttpRequest是XMLHTTP组件对象,通过XMLHttpRequest对象,Ajax可以只同数据库进行数据层面上的交换,而不用刷新页面。
      XMLHttpRequest对象的方法:
        abort()      停止当前请求
        getAllReponseHeaders()    作为字符串返回完整的headers
        getResponseHeader("heaserLabel")   作为字符串返回单个的header标签
        open("method","Url",[,asyncFlag,...])  设置未决的请求的目标Url,方法和其他参数
        send(content)     发送请求
        setRequestHeader("Label","Value")   设置header,并和请求一起发送
      XMLHttpRequest对象的属性:
        onreadystatechange  状态改变的事件触发器
        readyState   对象状态:0,未初始化;1,读取中;2,已读取;3,交互中;4,完成
        responseText   服务器进程返回数据的文本版本
        responseXML   服务器进程返回数据的兼容DOM的XML文档对象
        status   服务器返回的状态代码,如:404,文件未找到;200,成功
        statusText   服务器返回的状态的文本信息

   2)JavaScript:
      操作XMLHttpRequest和数据打交道

   3)DOM
      DOM(Document Object Model)是提供给HTML和XML使用的一组API,提供了文件的表达结构,并可以利用它改变其中的内容和可见物。教本语言通过DOM才可以跟页面进行交互。

   4)XML:
      XML(Extensible Markup Language)可规范定义结构化数据

5、Ajax开发框架:
   Ajax也是遵循Requst/Server模式,基本流程为:对象初始化->发送请求->服务器接受->服务器返回->客户端接受->修改客户端页面显示。只不过这个过程是异步的。

   A:初始化对象,并发出XMLHttpRequest对象
      if(window.XMLHttpRequest)
      { //Mozilla,Safari,...
         http_request = new XMLHttpRequest();
         http_request.overrideMimeType('text/xml');
      }
      else if(window.ActiveXObject)
      {
         http_request = new ActiveXObject("Microsoft.XMLHTTP");
         http_request.overrideMimeType('text/xml');
      }

   B:指定相应处理函数
      指定服务器返回信息时客户端的处理方式,只需要将处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可。如:
      http_request.onreadystatechange = processRequst;
      注:函数名不加括号,且不指定参数。也可使用JavaScript即时定义函数的方式。如:
      http_request.onreadystatechange = function()
      {};

   C:发出HTTP请求
      调用XMLHttpRequest对象的open和send方法。如:
      http_request.open('Get','http://www.***.com/test.asp',true);
      http_request.send(null);
      注:第一参数为HTTP请求的方法,为Get、Post或Head
         第二个参数为目标Url。这个Url只能是同网域的,否则会提示“没有权限”。目标页面处理XMLHttpRequest和普通的HTTP请求完全一样。
         第三个参数指定在等待服务器返回信息的时间内是否继续执行。true,不会继续执行,默认为true
         如果要传文件或Post内容给服务器,必须先调用serRequestHeader方法,修改Mime类别,如下:
         http_request.serRequestHeader("Content-Type","application/x-www-form-unlencoded");。此时,资料将以查询字符串的形式列出,作为send 的参数。

   D:处理服务器返回信息
      1)判断readyState的值,如果为4,代表服务器已经传回了所有的信息。
      if(http_request.readyState==4)
      {
         //处理数据
      }
      else
      {
         //信息没有返回,继续等待
      }

      2)判断返回的HTTP代码,保证页面没有错误
      if(http_request.status==200)
      {
         //数据处理
      }
      else
      {
         //页面有问题
      }

      3)XMLHttpRequest返回信息的处理方式:
         (1)responseText:将传回的信息当字符串使用
         (2)responseXML:将传回的信息当XML使用,可以使用DOM处理

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
BlogJava - eamoi之Coder日志
AJAX笔记
ajax
基于ajax的应用程序架构汇总
Web 2.0中AJAX技术应用详解
Drunk Dream-AJAX基础教程
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服