这些天一直在看AJAX视频,看了视频之后,发现AJAX并不是那么简单,有些知识点理解起来有点困难,而且好多都是陌生的概念,因此想写篇博客来简单的了解一下,对AJAX有一个进一步的认识,然后再接着看视频,完成其中的例子就会好很多了。好了,废话不多说,看内容。
AJAX指“异步JavaScript及XML”(Asynchronous JavaScript And XML)。AJAX是一种在2005年由Google推广开来的编程模式,是一种创建交互式网页应用的网页开发技术。Web应用的交互如Flickr,Backpack和Google在这方面已经有质的飞跃。该术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中,用户需求的数据如联系人列表,可以从独立于实际网页的服务端取得,并且可以被动态地写入网页中,给缓慢的Web应用体验着色使之像桌面应用一样。AJAX不是一种新的编程语言,而是一种使用现有标准的新方法。通过AJAX,你可以创建更好、更快以及更友好的Web应用程序。AJAX基于JavaScript和HTTP请求(HTTP requests)。
AJAX的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer5中首次引入,它是一种支持异步请求的技术。简言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。
XMLHttpRequest对象
XMLHttpRequest是AJAX的基础。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页。
创建XMLHttpRequest对象
语法:
Variable = new XMLHttpRequest();
老版本的Internet Explorer(IE5和IE6)使用ActiveX对象:Variable = new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括IE5和IE6,需要检查浏览器是否支持XMLHttpRequest对象,如果支持,则创建XMLHttpRequest对象,如果不支持,则创建ActiveXObject:Var xmlhttp;
// 判断浏览器是否支持XMLHttpRequest对象,并创建对象
if (window.XMLHttpRequest)
{
// 支持IE7+,FireFox,Chorme,Opera,Safari等浏览器
xmlhttp = new XMLHttpRequest();
}
else
{
// 支持IE5,IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求
如需将请求发送到服务器,我们使用XMLHttpRequest对象的open()和send()方法:
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL以及是否异步处理请求。
|
send(string) | 将请求发送到服务器
|
GET还是POST?
与POST相比,GET更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用POST请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST没有数据流限制)
- 发送包含未知字符的用户输入时,POST比GET更稳固也更可靠
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得XML形式的响应数据。 |
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当readyState属性改变时,就会调用该函数。 |
readyState | 存有XMLHttpRequest的状态,从0到4发生变化。
|
status | 200:“OK” 404:未找到页面 |
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
});
}