AJAX是什么
AJAX，Asynchronous JavaScrpt and XML，异步的JS和XML。
不是新的编程语言，而是一种基于现有标准的新方法。
这种方法可以在不重新加载整个页面的条件下，完成与服务器交换数据并更新部分网页内容。
简单的来说，这个方法可以用来创建快速动态网页。
AJAX应用程序与浏览器及平台无关。
先导知识：HTML和XML、JS基础、DOM。
（小声咕叽叽，AJAX原来不念阿贾克斯，念欸贾科斯。）
工作原理
- 创建一个XMLHttpRequest对象；
- 浏览器发送Http请求至服务器；
- 服务器返回响应数据；
- 浏览器使用JS接收数据并更新页面内容。
创建XMLHttpRequest对象
它用于在后台与服务器交换数据。
IE5和IE6使用ActiveX对象。
语法:
variable = new XMLHttpRequest();
variable = new ActiveXObject("Microsoft.XMLHTTP");
向服务器发送请求
语法：
xmlhttp.open(method,url,async);
xmlhttp.send(string);
method请求的类型，GET or POST；
url：文件在服务器上的位置；
async：异步（true）或同步（false）；
string：仅在POST请求时填写该参数；
如果使用AJAX的话，async参数必须设置为true。
服务器响应
获取服务器响应，语法：
variable = xmlhttp.responseText;获得字符串形式的相应数据。
variable = xmlhttp.responseXML;获得XML形式的相应数据。
XMLHttpRequest对象属性
onreadystatechange
存储函数/函数名，当readyState属性改变时，就会调用该函数。
readyState
存储XMLHttpRequest的状态。
- 0：请求未初始化
- 1：服务器连接已建立
- 3：请求已接收
- 4：请求处理中
- 5：请求完成，且响应已就绪
status
返回页面状态。
按需寻求度娘即可。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript">
function demo(){
var xmlhttp;
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText
}
}
xmlhttp.open("GET","demo1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><p>使用 AJAX 修改文本内容</p></div>
<button type="button" onclick="demo()">修改</button>
</body>
</html>
运行结果：
AJAX在实际应用时，与数据库等相结合都是可以的，基本结构变化不大。
网友评论