XMLHTTPRequest简介以及用法加个人真实示例

Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。　　

最早应用XMLHTTP的是微软,IE（IE5以上）通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。

Mozilla（Mozilla1.0以上及NetScape7以上）做出的回应是创建它自己的继承XML代理类：XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。

XMLHttpRequest的应用：

XMLHttpRequest对象在JS中的应用

var xmlhttp = new XMLHttpRequest();

微软的XMLHTTP组件在JS中的应用

var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);

var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);

XMLHttpRequest 对象方法

/** * Cross-browser XMLHttpRequest instantiation. */

if (typeof XMLHttpRequest == 'undefined')

{

XMLHttpRequest = function ()

{

var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']

for (var i=0; i < msxmls.length; i++)

{ try { return new ActiveXObject(msxmls[i]+'.XMLHTTP') } catch (e) { } } throw new Error("No XML component installed!") } }

function createXMLHttpRequest() { try { // Attempt to create it "the Mozilla way" if (window.XMLHttpRequest) { return new XMLHttpRequest(); }

// Guess not - now the IE way

if (window.ActiveXObject) { return new ActiveXObject(getXMLPrefix() + ".XmlHttp"); } } catch (ex) {} return false; };

XMLHttpRequest 对象方法方法描述 abort() 停止当前请求 getAllResponseHeaders() 作为字符串返问完整的headers getResponseHeader("headerLabel") 作为字符串返问单个的header标签 open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数 send(content) 发送请求 setRequestHeader("label", "value") 设置header并和请求一起发送 XMLHttpRequest 对象属性属性描述 onreadystatechange 状态改变的事件触发器 readyState 对象状态(integer):

0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 responseText 服务器进程返回数据的文本版本 responseXML 服务器进程返回数据的兼容DOM的XML文档对象 status 服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功" statusText 服务器返回的状态文本信息

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函数。 r

eadyState:请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载， 2 = 已加载， 3 = 交互中， 4 = 完成。 responseText:服务器的响应，表示为一个串。

responseXML:服务器的响应，表示为XML。这个对象可以解析为一个DOM对象。 status:服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）. statusText:HTTP状态码的相应文本（OK或Not Found（未找到）等等）。 *************************************************************************** */

/*********************来看看到底要怎么才能发送请求*******

使用XMLHttpRequest对象发送请求的基本步骤如下：

1.得到XMLHttpRequest对象实例的一个引用，为此，可以创建一个新的实例，也可以访问包含有 XMLHttpRequest实例的一个变量。

2.告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变。为此要把对象的 onreadystatechange属性设置为指向一个JavaScript函数的指针。

3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数：一个是指示所用方法（通常是GET或POST）的串，另一个是表示目标资源URL的串，还有一个Boolean值，指示请求是否是异步的。

4. 将请求发送给服务器。

XMLHttpRequest对象的send()方法会把请求传送到指定的目标资源。

send()方法接受一个参数，这通常是一个串或一个DOM对象。这个参数会作为请求体的一部分传送到目标URL.向send()方法提供参数时，要确保open()中指定的方法是POST。如果没有数据要作为请求体的一部分发送，则使用null。异步方式给用户带来的体验:(我想程序员看到这段解释,心里真的很爽!) 对服务器的请求是异步发送的，因此浏览器可以继续响应用户输入，并在后台等待服务器的响应。如果选择同步操作，而且倘若服务器的响应要花好几秒才能到达，浏览器就会表现得很迟钝，在等待期间不能响应用户的输入。这样一来，浏览器好像被冻住一样，无法响应用户输入，而异步做法可以避免这种情况，从而让最终用户有更好的体验，尽管这种改善很细微，但确实很有意义。这样用户就能继续工作，而且服务器会在后台处理先前的请求。能与服务器通信而不打断用户的工作流，这样就可以采用很多技术来改善用户体验。例如，假设有一个验证用户输入的应用。用户在输入表单上填写各个域时，浏览器可以定期地向服务器发送表单值来进行验证，此时并不打断用户，他还可以继续填写余下的表单域。如果某个验证规则失败，用户会立即得到通知，而不必等表单真正发送到服务器进行处理时才知道有错误，这就能大大节省用户的时间，也能减轻服务器上的负载压力，因为不必在表单提交不成功时完全重建表单的内容。下面是说明安全问题的: XMLHttpRequest对象要受制于浏览器的安全“沙箱”。

XMLHttpRequest对象请求的所有资源都必须与调用脚本在同一个域（domain）内。这个安全限制使得XMLHttpRequest对象不能请求脚本所在域之外的资源。这个安全限制的强度如何因浏览器而异（见图2-5）。Internet Explorer 会显示一个警告，指出可能存在一个安全风险，但是用户可以选择是否继续发出请求。Firefox则会断然停止请求，并在JavaScript控制台显示一个错误消息。Firefox确实提供了一些JavaScript技巧，使得XMLHttpRequest也可以请求外部URL的资源。不过，由于这些技术针对特定的浏览器，最好不要用，而且要避免使用XMLHttpRequest访问外部URL。

更多资料：http://www.lifepop.com/view.aspx?castid=306807
http://ajaxcn.org/space/XMLHttpRequest

下为个人项目经验：

异步获取回调信息：

var http = new ActiveXObject("Microsoft.XMLHTTP"); var text; function GetPlayerlist() { http.open("POST","outPlayerlist.asp?action=getPlayerlist&Game_id=1",true); http.onreadystatechange = getReady http.send(); text=unescape(http.responseText); } function getReady() { if(http.readyState==4) { if(http.status==200) { alert(http.responseText); } } } GetPlayerlist(); function showplayer() { alert(text); }

项目代码：

//****************************************************************XML操作*********************************//

var xmlDoc; 

var root;  

function xmlonclick()

{  

//    for(var i=0;i<root.length;i++)

//    {

//        root.parentNode.removeChild(root[i]);

//    }

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async=false;

root = xmlDoc.createNode(1,"bqTree","");

    //表格内容增加

    for (var i=0;i<PT.rows.length-2;i++ )

    {

        var pt=xmlDoc.createNode(1,"pttree","");

        var bqid=xmlDoc.createAttribute("id"); 

        pt.setAttributeNode(bqid); 

        bqid.value = i

        pt.text = linkstring[i];

        root.appendChild(pt)

    }

    

    //表头、备注、备注加信息

    for(var i=PT.rows.length-2;i<PT.rows.length+1;i++)

    {

        if(i==PT.rows.length-2)

        {

            var pt=xmlDoc.createNode(1,"pttree","");

            var bqid=xmlDoc.createAttribute("id"); 

            pt.setAttributeNode(bqid); 

            bqid.value=i

            pt.text = strtt; 

            root.appendChild(pt)

        }

        else if(i==PT.rows.length-1)

        {

            var pt=xmlDoc.createNode(1,"pttree","");

            var bqid=xmlDoc.createAttribute("id"); 

            pt.setAttributeNode(bqid); 

            bqid.value=i

            pt.text = strqt; 

            root.appendChild(pt)

        }

        else if(i==PT.rows.length)

        {

            var pt=xmlDoc.createNode(1,"pttree","");

            var bqid=xmlDoc.createAttribute("id"); 

            pt.setAttributeNode(bqid); 

            bqid.value=i

            pt.text = strrt;

            root.appendChild(pt)

        }

    }

    //添加根接点 

    xmlDoc.appendChild(root); 

    //alert(xmlDoc.xml)

//    var a = xmlDoc.selectNodes("//ttyp"); 

//    for (var i=0;i<root.childNodes.length;i++ )

//    {

//       alert(root.childNodes[i].text);

//    }

    var   text;  

    var xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");   

      xmlhttp.open("Post","../RelatedReport/Report_SSD_SaveData.aspx",false);     

      xmlhttp.setRequestHeader("Content-Type","text/XML")   

          xmlhttp.setRequestHeader("Content-Type","gb2312") 

//          alert("send") 

      xmlhttp.onreadystatechange=function getReady(){   

    if(xmlhttp.readyState==4)   

    {   

      if(xmlhttp.status==200)   

      {     alert(xmlhttp.responseText);         

      }   

    }   

}   

      xmlhttp.send(xmlDoc);

      text=unescape(xmlhttp.responseText);

//      alert("send")

}

//****************************************************************End*************************************//

异步获取CS代码：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.IO;

using System.Xml;

using System.Xml.XPath;

public partial class RelatedReport_Report_SSD_SaveData : System.Web.UI.Page

{

    protected string[] data;

    protected string[] data1;

    protected string[] data2;

    protected string[] data3;

    protected int item;

    protected string connstr;

    protected void Page_Load(object sender, EventArgs e)

    {

        connstr = System.Configuration.ConfigurationSettings.AppSettings["sql2005"];

        if (!IsPostBack)

        {

            GetXMLInfo();

        }

    }

    /// <summary>

    /// 得到传来的XML信息

    /// </summary>

    private void GetXMLInfo()

    {

        //取得XML文件

        Response.Expires = -1000;

        XmlDocument xmlDoc = new XmlDocument();

        xmlDoc.Load(Request.InputStream);

        //xmlDoc.Save(Server.MapPath(".//DataSaved.xml"));

        //xmlDoc.Load(Server.MapPath(".//DataSaved.xml"));

        //解析返回的XML文件

        XmlNodeList xmlList = xmlDoc.SelectSingleNode("bqTree").ChildNodes;

        int max = (new SqlDataAccess(connstr)).GetMaxValue("SELECT version FROM ZStormStopedDetail ORDER BY version DESC") + 1;

        DateTime nowtime = System.DateTime.Now;

        //先拿到相关的信息

        data1 = xmlList.Item(xmlList.Count - 3).InnerText.Split(new char[1] { '|' });

        data2 = xmlList.Item(xmlList.Count - 2).InnerText.Split(new char[1] { '|' });

        data3 = xmlList.Item(xmlList.Count - 1).InnerText.Split(new char[1] { '|' });

        for (int i = 0; i < xmlList.Count - 3; i++)

        {

            data = xmlList.Item(i).InnerText.Split(new char[1] { '|' });

            string sqlstr = "insert into ZStormStopedDetail (name, version, roadname, roadsqure, towatertime, endwatertime, waterdeepm, waterdeeps, togetherwb, upcompany, uptime, rainsum, raintime, toptime, getwatersum, test, author, updatetime)values('" + data1[0] + "','" + max + "','" + data[0].Trim() + "','" + data[1].Trim() + "','" + data[2].Trim() + "','" + data[3].Trim() + "','" + data[4].Trim() + "','" + data[5].Trim() + "','" + data[6].Trim() + "','" + data1[1].Trim() + "','" + data1[2].Trim() + "','" + data2[0].Trim() + "','" + data2[1].Trim() + "','" + data2[2].Trim() + "','" + data2[3].Trim() + "','" + data3[0].Trim() + "','" + data3[1].Trim() + "','" + nowtime + "')";

            (new SqlDataAccess(connstr)).DataCom(sqlstr);

            Response.Write(i + "<br>");

        }

    }

}

通过以上的一些认识后才初步知道这些的好处！真的不错！代码验证过！