ajax是通过XMLHttpRequest对象在客户端和服务器端进行数据交换，整理了下简单的ajax基本操作步骤：
1，创建XMLHttpRequest对象
2，向服务器发请求，要用到两个方法open(method,url,async)和send()
3，服务器响应，通过responseText方法可以拿到服务器返回的文本数据
4，异步处理，在xmlHttp对象的一个事件上注册监听器：onreadystatechange，onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数，readyState属性，XMLHttpRequest对象的状态，改变从0到4，0代表请求未被初始化，1代表服务器连接成功，2请求被服务器接收，3处理请求，4请求完成并且响应准备。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax技术</title>
<script>
function loadXMLDoc() {
var xmlhttp;
//第一步 根据浏览器的不同创建XMLHttpRequset对象
if(window.XMLHttpRequest){ //非IE浏览器
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject) {//IE浏览器
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步 向服务器发送请求
xmlhttp.open("GET","text.txt",true) //目标为text.html 方法为GET true异步
xmlhttp.setRequestHeader("Conent-Type","text/html"); //设置请求头
xmlhttp.send();
//第三、四步 服务器响应，通过responseText方法可以拿到服务器返回的文本数据
// 在xmlHttp对象的一个事件上注册监听器:onreadystatechange
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //请求状态为完成(readystate=4)且成功（status=200）时
// getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用
// innerHTML属性 返回表格行的开始和结束标签之间的 HTML
console.log(xmlhttp.responseText);
document.getElementById("mydiv").innerHTML = xmlhttp.responseText;
//XMLhttpRequest对象提供了很多方法
//停止或者放弃 异步请求 xmlhttp.abort();
//设置请求头 setRequestHeader("Conent-Type","application/x-www-form-urlencoded");
console.log("以字符串形式返回指定的HTTP头信息："+xmlhttp.getResponseHeader("server"));
console.log("以字符串形式返回完整的HTTP头信息："+xmlhttp.getAllResponseHeaders());
}
}
}
</script>
</head>
<body>
<div id="mydiv">use Ajax modify me！</div>
<button onclick="loadXMLDoc()"> Ajax it！</button>
</body>
</html>
我text里面的内容就是
调用Ajax前
调用后的效果
1431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
