本文来源�?有能够提供最初翻译者的朋友吗？)�Q?BR>http://developer.mozilla.org/en/docs/AJAX:Getting_Started

　　�q�篇文章��带您浏览整个AJAX的基本概�?�q�展�C�Z��个简单的例子让您��L��上�\.

　　什么是 AJAX?
　　AJAX (异步 JavaScript �?XML) 是个��C�生的术语,专�ؓ描述JavaScript的两��强大性能.�q�两��Ҏ��能在多�q�来一直被�|�络开发者所忽略,直到最�q�Gmail, Google suggest和google Maps的横�I�出世才使�h们开始意识到光��要�?

　　�q�两��被忽视的性能�?
　　无需重新装蝲整个��面便能向服务器发送请�?
　　对XML文档的解析和处理�Q?BR>
步骤 1 – "�?" --- 如何发送一个HTTP��h��

　　��Z��用JavaScript向服务器发送一个HTTP��h��, 需要一个具备这�U�功能的�c�d��? �q�样的类首先由Internet Explorer以ActiveX对象引入, 被称为XMLHTTP. 后来Mozilla, Safari 和其他浏览器�U�L��仿效, 提供了XMLHttpRequest�c?它支持微软的ActiveX对象所提供的方法和属�?

　　因此, ��Z��创徏一个跨��览器的�q�样的类实例(对象), 可以应用如下代码:

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

　　(上例对代码做了一定简�?�q�是��Z��解释如何创徏XMLHTTP�c�d��? 实际的代码实例可参阅本篇步骤3.)

　　如果服务器的响应没有XML mime-type header,某些Mozilla��览器可能无法正常工�? ��Z��解决�q�个问题, 如果服务器响应的header不是text/xml,可以调用其它�Ҏ��修改该header.

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

　　接下来要军_��当收到服务器的响应后,需要做什�?�q�需要告诉HTTP��h��对象用哪一个JavaScript函数处理�q�个响应.可以��对象的onreadystatechange属性设�|��ؓ要��用的JavaScript的函数名,如下所�C?

http_request.onreadystatechange = nameOfTheFunction;

　　注意:在函数名后没有括�?也无需传递参�?另外�q�有一�U�方�?可以在扉��?fly)中定义函数及其对响应要采取的行�ؓ,如下所�C?

http_request.onreadystatechange = function(){
// do the thing
};

　　在定义了如何处理响应�?��p��发送请求了.可以调用HTTP��h��cȝ��open()和send()�Ҏ��, 如下所�C?

http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

　　open()的第一个参数是HTTP��h��方式 – GET, POST, HEAD 或�Q何服务器所支持的您惌��用的方式. 按照HTTP规范,该参数要大写;否则,某些��览�?如Firefox)可能无法处理��h��.有关HTTP��h��Ҏ��的详�l�信息可参考http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html W3C specs
　　�W�二个参数是��h��面的URL.�׃��自��n安全�Ҏ��的限制,该页面不能�ؓ�W�三方域名的��面.同时一定要保证在所有的��面中都使用准确的域�?否则调用open()会得�?permission denied"的错误提�C?一个常见的错误是访问站�Ҏ��使用domain.tld,而当��h��面�?却��用www.domain.tld.
　　�W�三个参数设�|�请求是否�ؓ异步模式.如果是TRUE, JavaScript函数��l�执�?而不�{�待服务器响�?�q�就�?AJAX"中的"A".
　　如果�W�一个参数是"POST",send()�Ҏ��的参数可以是��M��想送给服务器的数据. �q�时数据要以字符串的形式送给服务�?如下所�C?

name=value&anothername=othervalue&so=on

步骤 2 – "收到!" --- 处理服务器的响应

　　当发送请求时,要提供指定处理响应的JavaScript函数�?

http_request.onreadystatechange = nameOfTheFunction;

　　我们来看看这个函数的功能是什�?首先函数会检查请求的状�?如果状态值是4,��意味着一个完整的服务器响应已�l�收��C��,您将可以处理该响�?

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. 我们着重看��gؓ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
}

　　在检查完��h��的状态值和响应的HTTP状态值后, 您就可以处理从服务器得到的数据了.有两�U�方式可以得到这些数�?

http_request.responseText – 以文本字�W�串的方式返回服务器的响�?nbsp;
http_request.responseXML – 以XMLDocument对象方式�q�回响应.处理XMLDocument对象可以用JavaScript DOM函数

步骤 3 – "万事俱备!" - ��单实�?/B>

　　我们现在��整个过�E�完整地做一��?发送一个简单的HTTP��h��. 我们用JavaScript��h��一个HTML文�g, test.html, 文�g的文本内容�ؓ"I'm a test.".然后我们"alert()"test.html文�g的内�?

    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.');
            }
        }

    }

    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')">
        Make a request

　　本例�?
　　用户点击��览器上�?��h��"链接;
　　接着函数makeRequest()��被调用.其参�?– HTML文�gtest.html在同一目录�?
　　�q�样��发起了一个请�?onreadystatechange的执行结果会被传送给alertContents();
　　alertContents()��检查服务器的响应是否成功地收到,如果�?��׃��"alert()"test.html文�g的内�?

步骤 4 – "X-文档" --- 处理XML响应

　　在前面的例子�?当服务器对HTTP��h��的响应被收到�?我们会调用请求对象的reponseText属�?该属性包含了test.html文�g的内�?现在我们来试试responseXML属�?

　　首先,我们新徏一个有效的XML文�g,后面我们��用这个文�?该文�?test.xml)源代码如下所�C?

    I'm a test.
　　在该脚本�?我们只需修改��h��部分:

...
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);

　　�q�里,我们使用了responseXML提供的XMLDocument对象�q�用DOM�Ҏ��获取存于XML文�g中的内容.

中文精品一区二区三区,精品免费国产一区二区三区四区,亚洲精品国精品久久99热一

[导入]AJAX基础教程

AJAX基础教程