com from w3c
1. AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),用于创建快速动态网页的技术
AJAX :与服务器交换数据 更新部分网页的 艺术,不重新加载整个网页的情况下。
例子:
<html>
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc() {
//获得 xmlhttp对象
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for 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" οnclick="loadXMLDoc()">修改内容</button>
</body>
</html>
2. 发送请求方式有 get 和post
get 能利用缓存,使用url+?t=Math.random()
post 向服务器发送大量数据
发送包含未知字符的用户输入时,更稳定也更可靠
async 参数XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的必须设置为 true:
通过 AJAX,JavaScript 无需等待服务器的响应
等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
url 服务器文件可以是任何类型的文件3. setRequesHeader xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
4.Async = false
JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
使用 async=false 时,不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可
xmlhttp.open("GET","test1.txt",false);xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
5. 服务器返回响应属性responseText,responseXML
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp;
var txt, x, i;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera,Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("title");
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML = txt;
}
}
xmlhttp.open("GET", "/example/xmle/books.xml", true);
xmlhttp.send();
}
</script>
6.onreadystatechange 事件(XMLHttpRequest 三个重要属性之一,onreadystatechange,readyState,status)
请求发送的服务器时,我们要执行一些基于响应的任务
当readyState 改变时,触发 onreadystatechange事件,readyState 属性存有XMLHttpRequest 的状态信息
readyState 状态值: 0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status 200: "OK"
404
http://www.w3school.com.cn/ajax/ajax_database.asp