Ajax并不是一种技术(Ajax入门好文章)

Ajax 并不是一种技术。它实际上是几种已经在各自领域大行其道技术的强强结合。Ajax混合了：

　　XMLHttpRequest 是 Ajax 的关键技术，然而XMLHttpRequest 并非W3C标准。它目前所完成的大量功能将被过渡到W3C的新项目“DOM Level 3 Load and Save”标准里面。通过　　XMLHttpReques,web页可以从web 服务器得到反馈和需求而不用重新加载页面。用户将停留在相同的页面，而不会注意到脚本可能在后台需求某页面或是在给服务器发送数据。Google Suggest 就是用XMLHttpRequest对象来建立的一个动态web 接口：当你开始在Google 的搜索框中打字时，一个JS脚本发送字母到一服务器并从服务器返回一列建议。W3C “DOM Level 3 Load and Save”标准包含一些相似的功能，但是这些还不能在任何一浏览器中得到实现。所以就目前，如你需要从浏览器发送HTTP请求，你还是得用到 XMLHttpRequest 对象。Javascript 也是靠XMLHttpRequest 来获取XML的。对于不同的浏览器，创建 XMLHttpRequest 对象的方式有些不一样，经过综合多方的脚本，采用以下脚本基本上能够满足在各种浏览器中创建XMLHttpRequest 的需求。

代码片段

   

  < script type = ”text / javascript” >  
     var  xmlHttp; 
     function  creatXMLHttpRequest()  { 
    if (window.ActiveXObject) { 
    xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”); 
    } //51aspx.com
    else if (window.XMLHttpRequest) { 
    xmlHttp = new XMLHttpRequest(); 
    } 
    else { 
    return; 
    } 
    }
</ script >

其中XMLHttpRequest对象包含了一些方法以及属性，先不管它们，等用到了再看。

Methods（方法）

代码片段

    abort() 
    Cancels the current request

取消当前的请求

代码片段

    getAllResponseHeaders() 
    Returns the complete set of http headers as a string

以字符串的形式返回完整的HTTP头信息

代码片段

    getResponseHeader(”headername”) 
    Returns the value of the specified http header

返回指定的HTTP头信息值

代码片段

open(”method”,”URL”,async,”uname”,”pswd”)

    Specifies the method, URL, and other optional attributes of a request

为一请求指定发放，URL，和其他的任意属性。

    The method parameter can have a value of “GET”, “POST”, or “PUT” (use “GET” when requesting data and use “POST” when sending data (especially if the length of the data is greater than 512 bytes 51aspx.com.

方法参数可以是 “GET”, “POST”, 或 “PUT” 中的一个（请求数据使用GET比较多而POST发送数据[特别是长度大于512字节的数据]）

    The URL parameter may be either a relative or complete URL(http://www.51aspx.com).

URL可以是绝对路径或是相对的路径。

    The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response(51aspx.com). false means that the script waits for a response before continuing script processing

异步参数指明是否应该处理请求。设置成“True”的意思是在send()方法结束后脚本继续执行，而不需要等待服务器的回应。“False”则是脚本必须等待服务器的回应后才能继续执行。

代码片段

    send(content) 
    Sends the request

发送请求   

代码片段

setRequestHeader(”label”,”value”)

    Adds a label/value pair to the http header to be sent

Properties属性

onreadystatechange* ：
An event handler for an event that fires at every state change, typically a call to a JavaScript function.
这个是个最重要的属性，为每次状态的变化而准备的事件处理，往往用于触发一个JavaScript运行。

readyState ：
Returns the state of the object:
返回的状态对象：

responseText ：
Returns the response as a string
以字符串形式返回

responseXML ：
Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties(51aspx.com)
以XML的形式返回，这个属性返回一XML文档对象，可用W3C的DOM点树方法和属性来进行解析和检验。

status ：
Returns the status as a number (e.g. 404 for “Not Found” or 200 for “OK”)
以数字的形式返回状态（比如404是”没有找到“或200是”好的“）

statusText：
Returns the status as a string (e.g. “Not Found” or “OK”)
以字符串形式返回状态（比如”没有找到“或”好的“）

步骤一：”请!” — 如何发送一个HTTP请求？

发送HTTP请求是关键，我们先总结一下步骤，一共是4步：

1. 获得一个XMLHttpRequest实例，可以通过创建，或者访问已存在的XMLHttpRequest对象实例。

代码片段

<script type=”text/javascript”> 
var xmlHttp; 
   function creatXMLHttpRequest() { 
        if (window.ActiveXObject) { 
        xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”); 
        } 
        else if (window.XMLHttpRequest) { 
        xmlHttp = new XMLHttpRequest(); 
        } 
//51aspx.com
        else { 
        return; 
        } 
    } 
</script>

2. 接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名。

代码片段

xmlHttp.onreadystatechange = handleStateChange;

代码片段

xmlHttp.open(”GET”, “simpleResponse.xml”, true); 
xmlHttp.send(null);

代码片段

if (XMLHttp.readyState == 4) { 
// everything is good, the response is received 
} else { 
// still not ready 
}

代码片段

    if (XMLHttp.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 
    }

代码片段

    function handleStateChange() { 
    if(xmlHttp.readyState == 4) { 
    if(xmlHttp.status == 200) { 
    alert(”The server repilied with: ” + xmlHttp.responseText); 
    } 
    } 
    }

代码片段

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” 
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”> 
<head> 
 <title>Simple XMLHttpRequest</title> 
<script type=”text/javascript”> 
    var xmlHttp; 
    function createXMLHttpRequest() { 
        if (window.ActiveXObject) { 
        xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”); 
        } 
        else if (window.XMLHttpRequest) { 
        xmlHttp = new XMLHttpRequest(); 
        } 
        } 

    function startRequest() { 
        createXMLHttpRequest(); 
        xmlHttp.onreadystatechange = handleStateChange; 
        xmlHttp.open(”GET”, “simpleResponse.xml”, true); 
        xmlHttp.send(null); 
        } 

    function handleStateChange() { 
        if(xmlHttp.readyState == 4) { 
        if(xmlHttp.status == 200) { 
        alert(”The server replied with: ” + xmlHttp.responseText); 
        } 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <form action=”#”> 
    <input type=”button” value=”Start Basic Asynchronous Request” onclick=”startRequest();”/> 
    </form> 
    </body> 
    </html>

本文转自 liudao 博客园博客，原文链接：http://www.cnblogs.com/liudao/archive/2007/10/24/935876.html，如需转载请自行联系原作者