AJax技术

CodeBit.cn(2)

字号+ 作者:H5之家 来源:H5之家 2015-10-11 10:27 我要评论( )

接下来要检查伺服器传回的 HTTP 状态码。所有状态码列表可于 W3C 网站上查到,但我们要管的是 200 OK 这种状态。 if (http_request.status == 200) {// perfect!} else {// there was a problem with the request,/

接下来要检查伺服器传回的 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 的原始码 以及修改过后的测试程式。

其他与 DOM 相关的方法,请参考 Mozilla’s DOM implementation 文件。

标签 Ajax、Gmail、、XML、无刷新加载数据

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评