前往顾页
以后地位: 主页 > 收集编程 > Ajax实例教程 >

AJAX介绍及学习条记

时候:2012-11-02 14:54来源:知行网www.zhixing123.cn 编辑:麦田守望者

本文章为 Mozilla Developer Center 的 AJAX:Getting Started 的翻译。这篇文章申明 AJAX 相关技术的根本,并供应实例供您上手。

AJAX 是啥?

AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词,但内涵是两个存在已有一段时候的 JavaScript 服从。这两种服从以往一向被忽视,在 Gmail、Google suggest 及 Google Maps 呈现后才一鸣惊人天下知。

这两个 JavaScript 服从 是:

* 在不从头读取页面的环境下对伺服器送出请求(request)
* 剖析、利用 XML 文件

第一步 – 怎样发出 XMLHttpRequest

为了用 JavaScript 对伺服器发送 HTTP 请求,你必须先以相关的类别(class)制出实体(instance)。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");
}

(因为这段程式仅供申明,所所以采最简体例写出。本文第三步中有另外一种我们比较常常利用的写法。)

有些版本的 Mozilla 浏览器在伺服器送回的质料未含 XML mime-type 档头(header)时会出错。为了不这个问题,你可以用以下体例覆写伺服器传回的档头,以避免传回的不是 text/xml。

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

接上去是要决定伺服器传回质料后的措置体例,此时你只需以 onreadystatechange 这个属性指明要措置传回值的 JavaScript 函式称呼便可,比方:

http_request.onreadystatechange = nameOfTheFunction;

重视,指定的函式称呼后不加括号也没有参数。除指定函式称呼外,你也能用 Javascript 立即定义函式的体例来定一个新的措置函式,以下:

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

决定措置体例以后你得确切发出 request,此时需叫用 HTTP request 类别的 open() 及 send() 体例,以下:

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

* open() 的第一个参数是 HTTP request 的体例,也就是从 GET、POST、HEAD 中择一利用,亦可用你主机上援助的体例。为遵守 HTTP 标准,请记得这些体例都是年夜写,不然有的浏览器(如 Firefox)或许不会理你。别的 HTTP request 可以援助的体例列表请参考 W3C 规格书 。
* 第二个参数是目标 URL。基于宁静考量,你不克不及叫用同网域以外的网页。如果网域不合,则叫用 open() 时会呈现「权限不足,回绝存取」那类的错误。凡是年夜伙会犯的错误多为在 domain.tld 网的网站下呼唤 www.domain.tld 中的网页,仅是一点点不同都不可。
* 第三个参数决定此 request 是不是不合步进行,如果设定为 TRUE 则即便伺服器还没有传回质料也会继续履行其他的程式,这也就是 AJAX 中第一个 A 代表的意义。

send() 的参数在以 POST 发出 request 时可所以任何想传给伺服器的东西,而质料则以查询字串的体例列出,比方:

name=value&anothername=othervalue&so=on

不过如果你想要以 POST 体例传送质料,则必须先将 MIME 型态改好,以下:

 
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

不然伺服器就不会理你传过去的质料了。

第二步 – 措置伺服器传回的质料

传出 request 时必须供应措置传回值的函式称呼。

http_request.onreadystatechange = nameOfTheFunction;

那么来看看这个函式该做些甚么。起首,它必须查抄 request 目前的状况:如果状况值为 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 网站上查到,但我们要管的是 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 工具,而后可用 JavaScript DOM 相关函式措置

第三步 – 万事俱备 – 简朴典范

好,接着就做一次简朴的 HTTP 典范,演示方才的各项技能。这段 JavaScript 会向伺服器要一份外头有「I’m a test.」字样的 HTML 文件(test.html),而后以 alert() 将文件内容列出。

 
<script type="text/javascript" language="javascript">
    function makeRequest(url) {
 
        var http_request = false;
 
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
                // See note below about this line
            }
        } 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 = function() { alertContents(http_request); };
        http_request.open('GET', url, true);
        http_request.send(null);
 
    }
 
    function alertContents(http_request) {
 
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
 
    }
</script>
<span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')">
        Make a request
</span>

在此典范中:

* 起首利用者按下「Make a request」
* 这么一来就会呼唤 makeRequest() 函式,亦传入参数值 test.html (也就是那份 HTML 档的称呼,放在同目次下)
* 接着发出 request,而后会将主导权交给 onreadystatechange 指定的 alertContents() 函式
* alertContents() 查抄回应是不是一般,而后以 alert() 将 test.html 的内容列出

你可以由此测试本例 ,也能够参考测试档案 。

第四步 – 措置 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(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 文件内容。你可以参考 test.xml 的原始码 和修改过后的测试程式。

顶一下
(0)
0%
踩一下
(0)
0%
------分开线----------------------------
标签(Tag):ajax Ajax实例教程 Ajax根本教程 Ajax源代码 Ajax技能
------分开线----------------------------
颁发评论
请自发遵循互联网相关的政策法规,严禁公布色情、暴力、革命的谈吐。
评价:
神色:
考证码:点击我更换图片
猜你感兴趣