当前位置:首页 > 科技 >

AJAX基础教程及初步应用

发布时间:2017-09-09 11:04:37

AJAX基础教程及初步应用

AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描写JavaScript的两项强盛性能.这两项性能在多年来一直被网络开发者所疏忽,直到最近Gmail,Google suggest和google Maps的横空降生才使人们开端意识到其重要性。

这两项被疏忽的性能是:

无需重新装载全部页面便能向服务器发送恳求。

对XML文档的解析和处理。

步骤 1 – "请!" --- 如何发送一个HTTP恳求

为了用JavaScript向服务器发送一个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恳求对象用哪一个JavaScript函数处理这个响应.可以将对象的onreadystatechange属性设置为要应用的JavaScript的函数名,如下所示:

http_request.onreadystatechange = nameOfTheFunction;

留心:在函数名后没有括号,也无需传递参数.另外还有一种方法,可以在扉页(fly)中定义函数及其对响应要采用的行动,如下所示:

以下为引用的内容:
http_request.onreadystatechange = function(){
// do the thing
};

在定义了如何处理响应后,就要发送恳求了.可以调用HTTP恳求类的open()和send()方法,如下所示:

http_request.open('GET','',true);

http_request.send(null);

open()的第一个参数是HTTP恳求方法 – GET,POST,HEAD 或任何服务器所支撑的您想调用的方法. 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理恳求.有关HTTP恳求方法的具体信息可参考 W3C specs。

第二个参数是恳求页面的URL.由于自身安全特征的限制,该页面不能为第三方域名的页面.同时必定要保证在所有的页面中都应用准确的域名,否则调用open()会得到"permission denied"的错误提示.一个常见的错误是拜访站点时应用domain.tld,而当恳求页面时,却应用

第三个参数设置恳求是否为异步模式.假如是TRUE,JavaScript函数将持续履行,而不等候服务器响应.这就是"AJAX"中的"A".

假如第一个参数是"POST",send()方法的参数可以是任何想送给服务器的数据. 这时数据要以字符串的情势送给服务器,如下所示:

name=value&anothername=othervalue&so=on

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

当发送恳求时,要供给指定处理响应的JavaScript函数名。

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对象可以用JavaScript DOM函数

步骤 3 – "万事俱备!" - 简略实例

我们现在将全部过程完整地做一次,发送一个简略的HTTP恳求. 我们用JavaScript恳求一个HTML文件,test.html,文件的文本内容为"I'm a test.".然后我们"alert()"test.html文件的内容。

<script language="javascript" type="text/javascript">
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;</script>

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网页设计 https://www.feimao666.com