AJAX是什么
AJAX,异步的JavaScript和XML,一种使用现有标准的新方法。当我们只刷新页面部分数据而不重新加载整个页面时会用到。例如拉钩招聘网站上,分页按钮上实现的功能。岗位列表界面,点击页数就可以更新岗位列表的数据,这里就用到AJAX。
我是这样理解的,考虑到用户页面交互,或者重载页面数据量过大时,可以通过这种方式刷新数据。AJAX就好比我们去金拱门买汉堡,我到了金拱门点了一个汉堡在店里吃,汉堡吃完了。如果不够,我可以直接去点订餐台再点一个汉堡或者薯条,而不是走出去大门,重新进入金拱门到订餐台点一个汉堡。如果我已经点了第二个汉堡,突然在店里发现老同学,我去跟他聊聊天,然后等汉堡做好,再去取回我的汉堡。不用等取到汉堡才去找我的同学聊天。页面部分数据更新,异步通信是我所理解AJAX的作用。
AJAX的简单使用
在DEMO级的练习中,AJAX的使用并不难。以下是摘自菜鸟教程的AJAX教程的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
从上面的代码可以看出来整个过程中,代码就做了以下两件事:
1.编写两个组件,一个用来显示,一个按钮用来触发事件;
2.用JavaScript声明事件函数,函数内部完成AJAX操作。
所有浏览器都可以使用AJAX的XMLHttpRequest对象?
XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象,但IE5 和 IE6 使用 ActiveXObject。
创建一个XMLHttpRequest对象:
xmlhttp=new XMLHttpRequest();
判断浏览器是否支持XMLHttpRequest对象:
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
之后用open()和send()方法完成数据操作。
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
XMLHttpRequest请求
XMLHttpRequest的请求涉及到两个方法open()和send()。
方法 | 参数 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。method :请求的类型;GET 或 POST。url :文件在服务器上的位置。async :true(异步)或 false(同步) |
send(string) | 将请求发送到服务器。string :仅用于 POST 请求 |
XMLHttpRequest响应
获得来自服务器的响应后,XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 | 说明 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
XMLHttpRequest的readyState
每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
属性 | 说明 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0 : 请求未初始化。1 : 服务器连接已建立。2 : 请求已接收。3 : 请求处理中。4 : 请求已完成,且响应已就绪。 |
status | 200 : “OK”。404 : 未找到页面 |
AJAX的使用理解
使用AJAX,可以用个一个事件源触发事件函数,事件函数就是我们要发起AJAX的函数,以为使用AJAX大部分是异步,所以在事件函数中,使用了open()和send()方法后,我们通过判断readyState的状态,进行数据更新操作。
所以在异步
中,函数一般是这样的:
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// onreadystatechange在open() send()之前
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
在同步
中,函数一般是这样的:
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
// 数据更新在open() send()之后
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>