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前
调用后的效果