现在的位置: 首页 > 综合 > 正文

初学Ajax笔记

2014年01月02日 ⁄ 综合 ⁄ 共 2318字 ⁄ 字号 评论关闭

Ajax是什么?今天我也在求知欲的鼓动下看完了Ajax的入门篇幅,终于知道了Ajax是什么了.用我个人的理解,传说中的Ajax技术,其实就是在不刷新页面的情况下与服务器交互的技术.为什么要不刷新?举个例子,城市联动菜单,验证注册数据库等...Ajax解决的就是刷新问题.使web应用程序尽量接近桌面应用程序.Ajax技术的核心在于Javascript中的XMLHttpRequest对象,它是一种支持异步请求的技术.简单的说XmlHttpRequest使你可以使用JavaScript向服务器提出请求并处理响应的同时而不阻塞用户(不刷新页面).自然,要使用这种异步技术,客户端必须建立在javascript脚本上

XMLHttpRequest对象常用方法
abort()    停止当前请求
getAllResponseHeaders()  把Http请求的所有响应首部作为键/值对返回
getResponseHeader("header") 返回指定首部的串值
open(string method,string url,boolean asynch,string username,string password)
method:页面提交方法(Get/Post/Put这个不用解释了吧)
                            url:要得到的资源Url
                            asynch:请求模式(默认为异步true)
                            username/password:可选用户名/密码
send(context):向服务器发送请求.context
setRequestHeader(string header,string value)把指定首部设置为所提供值.在设置任何首部之前必须先调用open()

XMLHttpRequest对象常用属性
onreadystatechange 每个状态改变时都会触发这个事件处理器,通常会调用一个javascript函数.其实它是个过程指针
readyState  请求的状态.有5个可取值:0=未初始化,1=正在加载,2=已加载,3=交互中,4=完成
responseText  服务器的响应,表示为一个串
responseXml  服务器的响应,表示为XML.这个对象可解析为一个DOM对象
status   服务器的Http状态码(200对应ok,404对应Not Found,..)
statusText  http状态码的相应文本(OK或Not Found..)

建立第一个基于Ajax脚本
<script type="text/javascript">
  var xmlHttp;
  function GetXmlObject()
  {
   if(window.ActiveXObject)
   {
    xmlHttp =  new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest)
   {
    xmlHttp = new XMLHttpRequest();
   }
   function MyEvent()
   {
          if (xmlHttp.readystate == 4) 
          {
                 if(xmlHttp.status == 200)
                 {
                         document.write(xmlHttp.responsetext);
                 }
          }
    } 
    function MyShow()
    {
           GetXmlObject(); 
           xmlHttp.onreadystatechange = MyEvent; 
           xmlHttp.open("GET","test.xml"); xmlHttp.send(null);
    }
Ajax步骤:
1.首先构造一个XMLHttpRequest对象var xmlObject = new XMLHttpRequest() ..
2.将过程指针关联事件驱动 xmlObject.onreadystatechange = lpEvent
3.用xmlObject.open("Get","test.xml",true)建立对服务器异步请求的调用
4.对服务器发送第4步中已建立好的服务器调用请求xmlObject.send(null)
5.服务器返回字符串模式的responseText和DOM模式的responseXml

用于处理XML文档的DOM元素属性
childNodes 返回当前元素所有子元素的数组
firstChild 返回当前元素的第一个下级子元素
lastChild 返回当前元素的最后一个子元素
nextSibling 返回紧跟在当前元素后面的元素
nodeValue 指定表示元素值的读/写属性
parentNode 返回元素的父节点
previousSibling 返回紧邻当前元素之前的元素

用于遍历XML文档的DOM元素方法
getElementById(id)  获取有指定惟一ID属性值文档中的元素
getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组
hasChildNodes()   返回一个布尔值,指示元素是否有子元素
getAttribute(name)  返回元素的属性值,属性由name指定
 

抱歉!评论已关闭.