XMLHttpRequest 对象
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest的方法：
image.png
XMLHttpRequest的属性：
image.png
image.png
HTTP请求的方法：
post和get
image.png
post和get的区别：
image.png
同步和异步的区别：
image.png
创建Ajax的步骤：
分为四步
image.png
1、创建Ajax对象：
只兼容非IE6
var oAjax = new XMLHttpRequest();
如何兼容IE6
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
完整兼容做法：
if (window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}
else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
2、连接服务器：
open(方法,连接的文件名,异步传输)
oAjax.open('get','a.txt',true);
oAjax.open('get','a.txt?t='+new Data().getTime(),true);//阻止缓存
3、发送请求：
oAjax.send();
4、接收返回的信息：
oAjax.onreadystatechange = function(){
//oAjax.readyState //告诉浏览器和服务器，进行到哪一步了
if (oAjax.readyState == 4){ //读取完成，未代表成功
//判断读取成功还是失败
if (oAjax.status == 200){ //200代表成功
alert("成功:" + oAjax.responseText);
}
else {
alert("失败:" + oAjax.status);
}
}
完整代码
html
<input type="button" value="读取" id="btn1"/>
js
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
//1、创建Ajax对象
//只兼容非IE6浏览器
//var oAjax = new XMLHttpRequest();
//IE6
//var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//alert(oAjax);
//要做兼容
//第一步创建Ajax对象
if (window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}
else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//alert(oAjax);
//第二步：连接服务器
//open(方法,连接的文件名,异步传输)
//oAjax.open('get','a.txt',true);
oAjax.open('get','a.txt?t='+new Data().getTime(),true);//阻止缓存
//第三步：发送请求
oAjax.send();
//第四步：接收返回的信息
oAjax.onreadystatechange = function(){
//oAjax.readyState //告诉浏览器和服务器，进行到哪一步了
if (oAjax.readyState == 4){ //读取完成，未代表成功
//判断读取成功还是失败
if (oAjax.status == 200){ //200代表成功
alert("成功:" + oAjax.responseText);
}
else {
alert("失败:" + oAjax.status);
}
}
};
};
};
</script>
把Ajax封装成函数
<script>
function ajax(url,fnSucc,fnFaild){
//1、创建Ajax对象
if (window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}
else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、连接服务器
//open(方法,连接的文件名,异步传输)
oAjax.open('get',url,true);
//3、发送请求
oAjax.send();
//4、接收返回的信息
oAjax.onreadystatechange = function(){
//oAjax.readyState //告诉浏览器和服务器，进行到哪一步了
if (oAjax.readyState == 4){ //读取完成
//判断读取成功还是失败
if (oAjax.status == 200){ //200代表成功
fnSucc(oAjax.responseText);
}
else {
if (fnFaild){
fnFaild(oAjax.status);
}
}
}
};
}
</script>
引用调用封装的Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="Ajax.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
ajax("a.txt",function(str){
alert(str);
});
};
};
</script>
</head>
<body>
<input type="button" value="读取" id="btn1"/>
</body>
</html>
