AJAX基础教程读书笔记

and4walker

浏览: 558284 次
性别:
来自: 北京

最近访客更多访客>>

mumume123

a2547082375

suntengfei110

yangkr

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

读书 Ajax 浏览器 IE Microsoft

第一.XMLHttpRequest对象:
1.Sample:创建一个XMLHttpRequest对象的实例:

var xmlHttp;   //定义全局变量来保存对对象的引用
function createXMLHttpRequest(){
    if(window.ActiveXObject){  //判断浏览器是否为IE
       xmlHttp=new XMLHttpRequest("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){   //判断非IE的浏览器是否支持xmlhttprquest
       xmlHttp=new XMLHttpRequest();                                
    }
}
//IE浏览器肯定支持xmlhttprequest,因为其是存在于ActiveX中

2.XmlHttpRequest对象的方法:
1>void open(String method,String url,boolean asynch,String username,String password):表示建立对服务器的调用.后三个参数为可选参数;mehod可以为GET,POST,PUT; url可以为绝对或相对地址; asynch默认值为True,表示异步,当为false时处理就会等待,直到从服务器响应为止;username跟password为用户指定特定的用户名跟密码.
2>void send(content):这个方法具体向服务器发出请求,如声明为异步则会立即返回此方法,否则它会等待直到接受相应为止.
3>void sendRequestHeader(String header,String value):此方法为HTTP请求中一个给定的首部设置值,header表示设置的首部,value表示要设置的值.
注意:此方法必须要在void open()方法之后才能调用.
4>void abort():停止请求.
5>String getAllResponseHeaders():返回一个串包含所有的http的首部(Content-Length,Date,URI)
6>String getResponseHeaders(String header):header表示指定首部值.
7>onreadystatechange():每个事件改变时都会触发事件处理器,通常会调用一个JS函数.
8>readyState:=0:未初始化;=1:正在加载;=2:已加载;=3:交互中;=4:完成
9>states:HTTP状态码.=200:OK.=404:未找到.

2.Sample:
交互实例具体步骤:
1><input type="text" id="email" name="email" onblur="validateEmail()">
2>创建XMLHttpRequest对象的一个实例:

var xmlHttp;
function validateEmail(){
  var email=document.getElementById("email");
  var url="validate?email="+escape(email.value);
  if(window.ActiveXObject){
     xmlHttp=new XMLHttpRequest("Microsoft.XMLHttpRequest");
  }else if(window.XMLHttpRequest){
     xmlHttp=new XMLHttpRequest();
  }      
  xmlHttp.open("GET",url);
  xmlHttp.onreadystatechange()=callback;
  xmlHttp.send(null);
}

3>调Servlet等服务器端.
4>服务器端完成业务逻辑.
5>请求返回浏览器.设置Content-Type为:text/xml.还要设置一下首部以使浏览器不会在本地缓存结果:response.setHeader("Cache-Control","no-cache");response.setHeader("progma","no-cache");
6>XMLHttpRequest对象配置为处理返回时要调用callback():这个函数会检查readystate属性,然后查看服务器返回的状态码,如果正常,callback()将会做些有意义的事情.例如:

function callback(){
  if(xmlHttp.readystate==4){
     if(xmlHttp.state==200){
        //do sth in here. 
     }
  } 
}

3.GET与POST的区别:
GET:请求为幂等(多个请求返回相同的结果)时选用.会限制净荷的大小.(eg:URL的长度)
POST:当改变服务器上的状态时.不会限制净荷大小.
一般,可以用GET从服务器上取数据,但是要避免调用服务器上的状态.
如果选择的方法为POST,需要比GET多一步操作:设置XMLHttpRequest对象的首部:
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4.DOM说明:
DOM是一个W3C规约,可以以一种独立于平台和语言的方式.DOM的设计是以对象管理组织(OMG)的规约为基础,因此可以用于任何语言.DOM实际上是以面向对象方式描述的面向对象模型.

第二,与服务器的通信:
1.XMLHttpRequest对象提供了两个处理服务器响应:1>responseText(将相应提供为一个串); 2>responseXML(将相应提供为一个XML对象)
2.利用HTML的innerHTML属性跟responseText结合使用,服务器就能"生产"出HTML内容,由浏览器利用innerHTML属性来"消费".
Sample:
innerHTML.html文件:

<html>
<head>
<script type="text/javascript">
//第一步:定义XMLHttpRequest对象;
var xmlHttp;
function createXMLHttpRequest(){
   if(window.ActiveXObject){
      xmlHttp=new XMLHttpRequest("Microsoft.xmlHTTP");
   }
   if(window.XMLHttpRequest){
      xmlHttp=new XMLHttpRequest();
   }
}

function startRequest(){
//第二步:调用刚才创建的实例对象;
   createXMLHttpRequest();  
//第三步:告诉XMLHttpRequest对象handleStateChange函数会处理XMLHttpRequest对象状态的改变,为此把对象的onreadyStatechange属性设置为指向JS函数的指针.
   xmlHttp.onreadystatechange=handleStateChange;
//第四步:指定请求的属性
   xmlHttp.open("GET","innerHTML.xml",true);
//第五步:将请求发送给服务器
   xmlHttp.send(null);
}

function handleStateChange(){
   if(xmlHttp.readyState==4){
      if(xmlHttp.status==200){
         document.getElementById("results").<color=red>innerHTML</color>=xmlHttp.responseText;
      }
   }
}
</script>
</head>
<body>
    <form action="#">
        <input type="button" value="Search for Today's Activities" onclick="startRequest();"/>
    </form>
    <div id="results"></div>
</body>
</html>

innerHTML.xml文件:

<table border=1>
<trbody>
<tr>
<th>Active Name</th><th>Location</th><th>Time</th>
</tr>
<tr>
<td>watersking</td><td>Dock #</td><td>9:00 AM</td>
</tr>
<tr>
<td>Volleyball</td><td>East Count</td><td>11:00 AM</td>
</tr>
<tr>
<td>hikings</td><td>Trails 3</td><td>2:00 PM</td>
</tr>
</trbody>
</table>

分享到：

URL编码 | CSS全攻略

2006-10-25 16:41
浏览 2017
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论