【AJAX】XmlHttp是什么？

XmlHttp是什么？

XmlHttp是什么？
最通用的定义为：XmlHttp是一套可以在Javascrīpt、Vbscrīpt、Jscrīpt等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。

现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

XmlHttp对象参考：
属性：
onreadystatechange* 指定当readyState属性改变时的事件处理句柄。只写
readyState  返回当前请求的状态，只读.
responseBody  将回应信息正文以unsigned byte数组形式返回.只读
responseStream 以Ado Stream对象的形式返回响应信息。只读
responseText 将响应信息作为字符串返回.只读
responseXML 将响应信息格式化为Xml Document对象并返回，只读
status 返回当前请求的http状态码.只读
statusText  返回当前请求的响应行状态，只读

* 表示此属性是W3C文档对象模型的扩展.

方法：
abort 取消当前请求
getAllResponseHeaders 获取响应的所有http头
getResponseHeader 从响应信息中获取指定的http头
open 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
send 发送请求到http服务器并接收回应
setRequestHeader 单独指定请求的某个http头


事件：
无

AJAX快速入门之HTTP协议基础
作者：出处：CSDN责任编辑： 方舟 [ 2006-06-28 16:02 ]要很好地领会Ajax技术的关键是了解超文本传输协议（HTTP），该协议用来传输网页、图像以及因特网上在浏览器与服务器间传输的其他类型文件
--------------------------------------------------------------------------------

　　要很好地领会Ajax技术的关键是了解超文本传输协议（HTTP），该协议用来传输网页、图像以及因特网上在浏览器与服务器间传输的其他类型文件。只要你在浏览器上输入一个URL，最前面的http://就表示使用HTTP来访问指定位置的信息。（大部分浏览器还支持其他一些不同的协议，其中FTP就是一个典型例子。）
　　注意：本文中只涉及HTTP协议，这是Ajax开发人员关心的方面，它可作为HTTP的参考手册或指南。
　　HTTP由两部分组成：请求和响应。当你在Web浏览器中输入一个URL时，浏览器将根据你的要求创建并发送请求，该请求包含所输入的URL以及一些与浏览器本身相关的信息。当服务器收到这个请求时将返回一个响应，该响应包括与该请求相关的信息以及位于指定URL（如果有的话）的数据。直到浏览器解析该响应并显示出网页（或其他资源）为止。
　　HTTP请求
　　HTTP请求的格式如下所示：
＜request-line＞
＜headers＞
＜blank line＞
[＜request-body＞]
　　在HTTP请求中，第一行必须是一个请求行（request line），用来说明请求类型、要访问的资源以及使用的HTTP版本。紧接着是一个首部（header）小节，用来说明服务器要使用的附加信息。在首部之后是一个空行，再此之后可以添加任意的其他数据[称之为主体（body）]。
　　在HTTP中，定义了大量的请求类型，不过Ajax开发人员关心的只有GET请求和POST请求。只要在Web浏览器上输入一个URL，浏览器就将基于该URL向服务器发送一个GET请求，以告诉服务器获取并返回什么资源。对于www.wrox.com的GET请求如下所示：
GET / HTTP/1.1
Host: www.wrox.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive  
　　请求行的第一部分说明了该请求是GET请求。该行的第二部分是一个斜杠（/），用来说明请求的是该域名的根目录。该行的最后一部分说明使用的是HTTP 1.1版本（另一个可选项是1.0）。那么请求发到哪里去呢？这就是第二行的内容。
　　第2行是请求的第一个首部，HOST。首部HOST将指出请求的目的地。结合HOST和上一行中的斜杠（/），可以通知服务器请求的是www.wrox.com/（HTTP 1.1才需要使用首部HOST，而原来的1.0版本则不需要使用）。第三行中包含的是首部User-Agent，服务器端和客户端脚本都能够访问它，它是浏览器类型检测逻辑的重要基础。该信息由你使用的浏览器来定义（在本例中是Firefox 1.0.1），并且在每个请求中将自动发送。最后一行是首部Connection，通常将浏览器操作设置为Keep-Alive（当然也可以设置为其他值，但这已经超出了本书讨论的范围）。注意，在最后一个首部之后有一个空行。即使不存在请求主体，这个空行也是必需的。
　　如果要获取一个诸如http://www.wrox.com/books[/url]的[url]www.wrox.com域内的页面，那么该请求可能类似于：
GET /books/ HTTP/1.1
Host: www.wrox.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive
　　注意只有第一行的内容发生了变化，它只包含URL中www.wrox.com后面的部分。
　　要发送GET请求的参数，则必须将这些额外的信息附在URL本身的后面。其格式类似于：
URL ? name1=value1&name2=value2&..&nameN=valueN
　　该信息称之为查询字符串（query string），它将会复制在HTTP请求的请求行中，如下所示：
GET /books/?name=Professional%20Ajax HTTP/1.1
Host: www.wrox.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive
　　注意，为了将文本“Professional Ajax”作为URL的参数，需要编码处理其内容，将空格替换成%20，这称为URL编码（URL encoding），常用于HTTP的许多地方（Javascrīpt提供了内建的函数来处理URL编码和解码，这些将在本章中的后续部分中说明）。“名称―值”（name―value）对用 & 隔开。绝大部分的服务器端技术能够自动对请求主体进行解码，并为这些值的访问提供一些逻辑方式。当然，如何使用这些数据还是由服务器决定的。

　　浏览器发送的首部，通常比本文中所讨论的要多得多。为了简单起见，这里的例子尽可能简短。

　　另一方面，POST请求在请求主体中为服务器提供了一些附加的信息。通常，当填写一个在线表单并提交它时，这些填入的数据将以POST请求的方式发送给服务器。
　　以下就是一个典型的POST请求：
POST / HTTP/1.1
Host: www.wrox.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive
name=Professional%20Ajax&publisher=Wiley
　　从上面可以发现， POST请求和GET请求之间有一些区别。首先，请求行开始处的GET改为了POST，以表示不同的请求类型。你会发现首部Host和User-Agent仍然存在，在后面有两个新行。其中首部Content-Type说明了请求主体的内容是如何编码的。浏览器始终以application/ x-www-form- urlencoded的格式编码来传送数据，这是针对简单URL编码的MIME类型。首部Content-Length说明了请求主体的字节数。在首部Connection后是一个空行，再后面就是请求主体。与大多数浏览器的POST请求一样，这是以简单的“名称―值”对的形式给出的，其中name是Professional Ajax，publisher是Wiley。你可以以同样的格式来组织URL的查询字符串参数。
　　正如前面所提到的，还有其他的HTTP请求类型，它们遵从的基本格式与GET请求和POST请求相同。下一步我们来看看服务器将对HTTP请求发送什么响应。
　　HTTP响应
　　如下所示，HTTP响应的格式与请求的格式十分类似：
＜status-line＞
＜headers＞
＜blank line＞
[＜response-body＞]
　　正如你所见，在响应中唯一真正的区别在于第一行中用状态信息代替了请求信息。状态行（status line）通过提供一个状态码来说明所请求的资源情况。以下就是一个HTTP响应的例子：
HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122
＜html＞
＜head＞
＜title＞Wrox Homepage＜/title＞
＜/head＞
＜body＞
＜!-- body goes here --＞
＜/body＞
＜/html＞
　　在本例中，状态行给出的HTTP状态代码是200，以及消息OK。状态行始终包含的是状态码和相应的简短消息，以避免混乱。最常用的状态码有：
　　◆200 (OK): 找到了该资源，并且一切正常。
　　◆304 (NOT MODIFIED): 该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。
　　◆ 401 (UNAUTHORIZED): 客户端无权访问该资源。这通常会使得浏览器要求用户输入用户名和密码，以登录到服务器。
　　◆403 (FORBIDDEN): 客户端未能获得授权。这通常是在401之后输入了不正确的用户名或密码。
　　◆404 (NOT FOUND): 在指定的位置不存在所申请的资源。
　　在状态行之后是一些首部。通常，服务器会返回一个名为Data的首部，用来说明响应生成的日期和时间（服务器通常还会返回一些关于其自身的信息，尽管并非是必需的）。接下来的两个首部大家应该熟悉，就是与POST请求中一样的Content-Type和Content-Length。在本例中，首部Content-Type指定了MIME类型HTML（text/html），其编码类型是ISO-8859-1（这是针对美国英语资源的编码标准）。响应主体所包含的就是所请求资源的HTML源文件（尽管还可能包含纯文本或其他资源类型的二进制数据）。浏览器将把这些数据显示给用户。
　　注意，这里并没有指明针对该响应的请求类型，不过这对于服务器并不重要。客户端知道每种类型的请求将返回什么类型的数据，并决定如何使用这些数据。


AJAX入门之XMLHttpRequest慨述
作者：出处：CSDN责任编辑： 方舟 [ 2006-06-15 15:42 ]在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用Javascrīpt创建一个XMLHttpRequest对象。
--------------------------------------------------------------------------------
　　在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用Javascrīpt创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准，所以可以采用多种方法使用Javascrīpt来创建XMLHttpRequest的实例。Internet Explorer把XMLHttpRequest实现为一个ActiveX对象，其他浏览器（如Firefox、Safari和Opera）把它实现为一个本地Javascrīpt对象。由于存在这些差别，Javascrīpt代码中必须包含有关的逻辑，从而使用ActiveX技术或者使用本地Javascrīpt对象技术来创建XMLHttpRequest的一个实例。
　　很多人可能还记得从前的那段日子，那时不同浏览器上的Javascrīpt和DOM实现简直千差万别，听了上面这段话之后，这些人可能又会不寒而栗。幸运的是，在这里为了明确该如何创建XMLHttpRequest对象的实例，并不需要那么详细地编写代码来区别浏览器类型。你要做的只是检查浏览器是否提供对ActiveX对象的支持。如果浏览器支持ActiveX对象，就可以使用ActiveX来创建XMLHttpRequest对象。否则，就要使用本地Javascrīpt对象技术来创建。代码清单2-1展示了编写跨浏览器的Javascrīpt代码来创建XMLHttpRequest对象实例是多么简单。
　　代码清单2-1　创建XMLHttpRequest对象的一个实例
var xmlHttp;
function createXMLHttpRequest() {
　 if (window.ActiveXObject) {
　　 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　else if (window.XMLHttpRequest) {
　　　xmlHttp = new XMLHttpRequest();
　　}
}
　　可以看到，创建XMLHttpRequest对象相当容易。首先，要创建一个全局作用域变量xmlHttp来保存这个对象的引用。createXMLHttpRequest方法完成创建XMLHttpRequest实例的具体工作。这个方法中只有简单的分支逻辑（选择逻辑）来确定如何创建对象。对window.ActiveXObject的调用会返回一个对象，也可能返回null，if语句会把调用返回的结果看作是true或false（如果返回对象则为true，返回null则为false），以此指示浏览器是否支持ActiveX控件，相应地得知浏览器是不是Internet Explorer。如果确实是，则通过实例化ActiveXObject的一个新实例来创建XMLHttpRequest对象，并传入一个串指示要创建何种类型的ActiveX对象。在这个例子中，为构造函数提供的字符串是Microsoft.XMLHTTP，这说明你想创建XMLHttpRequest的一个实例。
　　如果window.ActiveXObject调用失败（返回null），Javascrīpt就会转到else语句分支，确定浏览器是否把XMLHttpRequest实现为一个本地Javascrīpt对象。如果存在window.
　　XMLHttpRequest，就会创建XMLHttpRequest的一个实例。
　　由于Javascrīpt具有动态类型特性，而且XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。这就大大简化了开发过程，而且在Javascrīpt中也不必编写特定于浏览器的逻辑

　　什么是 AJAX?
　　AJAX (异步 Javascrīpt 和 XML) 是个新产生的术语,专为描述Javascrīpt的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google suggest和google Maps的横空出世才使人们开始意识到其重要性.
　　这两项被忽视的性能是:
　　无需重新装载整个页面便能向服务器发送请求.
　　对XML文档的解析和处理．
     步骤 1 ? "请!" --- 如何发送一个HTTP请求
　　为了用Javascrīpt向服务器发送一个HTTP请求, 需要一个具备这种功能的类实例. 这样的类首先由Internet Explorer以ActiveX对象引入, 被称为XMLHTTP. 后来Mozilla, Safari 和其他浏览器纷纷仿效, 提供了XMLHttpRequest类,它支持微软的ActiveX对象所提供的方法和属性.
　　因此, 为了创建一个跨浏览器的这样的类实例(对象), 可以应用如下代码:
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
　　(上例对代码做了一定简化,这是为了解释如何创建XMLHTTP类实例. 实际的代码实例可参阅本篇步骤3.)
　　如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作. 为了解决这个问题, 如果服务器响应的header不是text/xml,可以调用其它方法修改该header.
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
　　接下来要决定当收到服务器的响应后,需要做什么.这需要告诉HTTP请求对象用哪一个Javascrīpt函数处理这个响应.可以将对象的onreadystatechange属性设置为要使用的Javascrīpt的函数名,如下所示:
http_request.onreadystatechange = nameOfTheFunction;
　　注意:在函数名后没有括号,也无需传递参数.另外还有一种方法,可以在扉页(fly)中定义函数及其对响应要采取的行为,如下所示:
http_request.onreadystatechange = function(){
    // do the thing
};
　　在定义了如何处理响应后,就要发送请求了.可以调用HTTP请求类的open()和send()方法, 如下所示:
      http_request.open('GET', 'http://www.example.org/some.file', true);
      http_request.send(null);
　　open()的第一个参数是HTTP请求方式 ? GET, POST, HEAD 或任何服务器所支持的您想调用的方式. 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求.有关HTTP请求方法的详细信息可参考http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html W3C specs
　　第二个参数是请求页面的URL.由于自身安全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用open()会得到"permission denied"的错误提示.一个常见的错误是访问站点时使用domain.tld,而当请求页面时,却使用www.domain.tld.
　　第三个参数设置请求是否为异步模式.如果是TRUE, Javascrīpt函数将继续执行,而不等待服务器响应.这就是"AJAX"中的"A".
　　如果第一个参数是"POST",send()方法的参数可以是任何想送给服务器的数据. 这时数据要以字符串的形式送给服务器,如下所示:
name=value&anothername=othervalue&so=on 

      步骤 2 ? "收到!" --- 处理服务器的响应
　　当发送请求时,要提供指定处理响应的Javascrīpt函数名. 
      http_request.onreadystatechange = nameOfTheFunction;
　　我们来看看这个函数的功能是什么.首先函数会检查请求的状态.如果状态值是4,就意味着一个完整的服务器响应已经收到了,您将可以处理该响应.
if (http_request.readyState == 4) {
    // everything is good, the response is received
} else {
    // still not ready
}
　　readyState的取值如下:
　　0 (未初始化)
　　1 (正在装载)
　　2 (装载完毕)
　　3 (交互中)
　　4 (完成)
　　接着,函数会检查HTTP服务器响应的状态值. 完整的状态取值可参见 W3C site. 我们着重看值为200 OK的响应.
if (http_request.status == 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
}
　　在检查完请求的状态值和响应的HTTP状态值后, 您就可以处理从服务器得到的数据了.有两种方式可以得到这些数据:
http_request.responseText ? 以文本字符串的方式返回服务器的响应
http_request.responseXML ? 以XMLDocument对象方式返回响应.处理XMLDocument对象可以用Javascrīpt DOM函数

     步骤 3 ? "万事俱备!" - 简单实例
　　我们现在将整个过程完整地做一次,发送一个简单的HTTP请求. 我们用Javascrīpt请求一个HTML文件, test.html, 文件的文本内容为"I'm a test.".然后我们"alert()"test.html文件的内容.
<scrīpt type="text/javascrīpt" language="javascrīpt">
    var http_request = false;
    function makeRequest(url) {
        http_request = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = alertContents;
        http_request.open('GET', url, true);
        http_request.send(null);
    }
    function alertContents() {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
</scrīpt>
<span
    style="cursor: pointer; text-decoration: underline"
    ōnclick="makeRequest('test.html')">
        Make a request
</span>

　　本例中:
　　用户点击浏览器上的"请求"链接;
　　接着函数makeRequest()将被调用.其参数 ? HTML文件test.html在同一目录下;
　　这样就发起了一个请求.onreadystatechange的执行结果会被传送给alertContents();
　　alertContents()将检查服务器的响应是否成功地收到,如果是,就会"alert()"test.html文件的内容.
步骤 4 ? "X-文档" --- 处理XML响应
　　在前面的例子中,当服务器对HTTP请求的响应被收到后,我们会调用请求对象的reponseText属性.该属性包含了test.html文件的内容.现在我们来试试responseXML属性.
　　首先,我们新建一个有效的XML文件,后面我们将使用这个文件.该文件(test.xml)源代码如下所示:
<?xml version="1.0" ?>
<root>
    I'm a test.
</root>
　　在该脚本中,我们只需修改请求部分:
...
onclick="makeRequest('test.xml')">
...
　　接着,在alertContents()中,我们将alert()的代码alert(http_request.responseText);换成:
　　var xmldoc = http_request.responseXML;
　　var root_node = xmldoc.getElementsByTagName('root').item(0);
　　alert(root_node.firstChild.data);

　　这里,我们使用了responseXML提供的XMLDocument对象并用DOM方法获取存于XML文件中的内容.
Friday, October 21, 2005 评论:32 | 引用:3

老大授课例子
ajax.js的代码
-------------------------------------------------->
function ajax(){
  this.reObj = null
  this.request = false;
  this.sendStr = " "
  this.url = ""
  this.actFunc = false
  this.regFuncs = new Array;
  this.noAct = true;
  this.pollSto = false
}
ajax =new ajax;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
     ajax.request = new XMLHttpRequest();
     if (ajax.request.overrideMimeType) {
          ajax.request.overrideMimeType('text/plain');
      }
} else if (window.ActiveXObject) { // IE
      try {
   ajax.request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
          try { ajax.request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
      }
}else{
  alert("XMLHTTP初始化失败");
}

   function ajaxRequest() {
        ajax.request.open('POST', ajax.url, true);
  ajax.request.onreadystatechange = getRequest;
        ajax.request.send(ajax.sendStr);
   }

function getRequest(){
  if (ajax.request.readyState == 4) {
   if (ajax.request.status == 200) {
//下面一行要注意
alert(ajax.request.responseText)
    if(ajax.request.responseText)
     ajax.reObj = eval("("+ajax.request.responseText+")");
    try{ if(ajax.regFuncs.length>0) ajax.regFuncs.shift() }catch(e){}
    if( ajax.actFunc ) ajax.actFunc.call()
    ajax.noAct = true;
   }
  }
    }

    function regFunc(func){
  ajax.regFuncs.push(func)
  if( !ajax.pollSto ) pollFunc()
}
function pollFunc(){
  len = ajax.regFuncs.length
  if(len<1){
   clearTimeout(ajax.pollSto)
   ajax.pollSto = false
   return false
  }else if(len>0 && ajax.noAct){
   ajax.noAct = false;
   ajax.regFuncs[0].call()
  }
  ajax.pollSto = setTimeout("pollFunc()",500)
}

-------------------------------------------------->
1.htm里面的代码
-------------------------------------------------->
<scrīpt src="ajax.js"></scrīpt>
<scrīpt>
  ajax.url = "1.php"
  ajax.sendStr = '{"test":"我的第一个AJAX程序"}'
  ajaxRequest()
</scrīpt>
-------------------------------------------------->
1.php里的代码
-------------------------------------------------->
<?php
  $str = iconv("gbk","utf-8","RJS技术");
  echo "{'phpCode':'$str'}";//输出RJS技术
?>
或者
<?php
  echo $HTTP_RAW_POST_DATA;//输出从1.htm里传来的{"test":"我的第一个AJAX程序"}
?>
-------------------------------------------------->
这是基本的例子!