龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

AJAX和XmlHttpRequest下的Web开发(1)(2)

时间:2013-03-06 14:58来源:未知 作者:admin 点击:
分享到:
四、还不确信? 你还不感到害怕并因此而愤怒吗?还不准备愤起并删去你的浏览器中的XMLHttpRequest代码吗?那么,好,也许本文强势的措词论证会吓倒了你;那

四、还不确信?

你还不感到害怕并因此而愤怒吗?还不准备愤起并删去你的浏览器中的XMLHttpRequest代码吗?那么,好,也许本文强势的措词论证会吓倒了你;那么在游戏"Fonzie寻宝记"(The Search For 's Treasure。译者注:在GOOGLE中输入这几个关键词,你肯定能找到这个在线文本游戏,本人没有深入试验。难道这个小东西那么可爱的面孔下竟然埋伏着上面所述的那么恐怖的……)中-你能够救出Fonzie吗?

通过使用很有艺术的命令行接口,穿过充满文本的门厅寻找丢失的Arthur 'Fonzie' Fonzarelli宝藏。祝你幸运,但是请记住,虽然它看上去就象无危害的客户交互-你每作四次移动,该游戏通过XMLHttpRequest对象发送一个请求到服务器上并保存你的移动。永远记住:不要做一个印刷工(Don't make a typo);不要尝试一些愚蠢的东西如"eat jukebox";不要在游戏中输入一个用户名和口令字;否则……

XMLHttpRequest详解

/*
*author Jouy.lu
*/
var xmlHttp; //首先定义一个全局域变量来保存对象的引用;
function createXMLHttpRequest(){ //该方法用来创建XMLHttpRequest对象的实例.
 if(window.ActiveXObject){
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }else if(window.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest();
 } 
}

考虑到兼容浏览器的问题,建议的写法如下:

var xmlhttp;
function createXmlhttp(){
 if(window.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest();
  if (xmlhttp.overrideMimeType){
   xmlhttp.overrideMimeType("text/xml");
  }
  
 }
 else if(window.ActiveXObject){
  try{
   xmlhttp = new  ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
 if(!xmlhttp){
  window.alert("Your broswer not support XMLHttpRequest!");
 }
 return xmlhttp;
}

XMLHttpRequest的标准操作

abort():终止当前请求;

getAllResponseHeaders():把HTTP所以响应首部作为键/值对返回;

getResponseHeader("header"):返回指定首部的串值;

open("POST/GET/PUT","url"):建立对服务器的调用,url参数可以是相对URL或绝对URL,该方法还包含了另三个可选参数;

send(content):向服务器发送请求;

setRequestHeader("header","value"):把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。

注:

void open(string method, string url, boolean asynch, string username, string password):这个方法会建立对服务器的调用。要提供调用的特定方法(GET、POST或PUT),还要提供所调用资源的URL。另外还可以传递一个Boolean值,指示这个调用是异步还是同步的,默认值为true,这表示请求本质上是异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优点之一,所以倘若将这个参数设置为false,从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。在某些情况下这,个参数设置为false也是有用的,比如在持久存储页面之前你可能想先验证用户的输入。最后两个参数不说自明,允许你指定一个特定的用户名和口令。

void send(content):这个方法具体向服务器发出请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待,直到接收到响应为止。参数是可选的,可以是一个DOM对象的实例、一个输入流,或者是一个串。传入这个对象的内容会作为请求体的一部分发送。

void setRequestHeader(string header, string value):这个方法为HTTP请求中一个给定的首部设置值。它有两个参数,第一个串表示要设置的首部,第二个串表示要在首部中放置的值。需要说明,这个方法必须在open()之后才能调用。在所有这些方法中,最有可能用到的就是open()和send()。XMLHttpRequest对象还有许多属性,在设计Ajax交互时这些属性非常有用。

void abort(): 顾名思义,这个方法就是要停止请求。

string getAllResponseHeaders(): 这个方法的核心功能对Web应用开发人员应该很熟悉了,它会返回一个串,其中包含HTTP请求的所有响应首部。首部包括Content-Length、Date和URI。

string getResponseHeader(string header):这个方法与getAllResponseHeaders()是对应的,不过它有一个参数来表示你希望得到哪一个首部值,并且会把这个值作为一个串返回。

标准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(未找到)等等)。

精彩图集

赞助商链接