一:如何实现IE浏览器兼容
兼容代码可直接复制粘贴
HTML代码 b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 括号里的ev,ev1,是event事件对象,所有的鼠标移动,键盘点击的详细状况都保存在这个形参里面-->
<script>
window.onload=function(ev){
var oBtn=document.querySelector("button")
oBtn.onclick=function(ev1){
//兼容IE
var xhr;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置请求方式和请求地址(给创建的异步对象设置)
/*
method:请求的类型:GET或POST
url:文件在服务器上的位置
async:true(异步)或false(同步) AJAX是异步请求,所以括号里永远填true
*/
xhr.open("GET","a.php",true)
//3.发送请求 异步对0象发送请求
xhr.send();
//4.监听状态的变化 监听的是异步对象的变化 只要异步请求发生了变化,就调用这个回调函数,代表请求已经完成
xhr.onreadystatechange=function(ev2){
if(xhr.readyState===4){
/*
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
*/
//判断是否请求成功 http状态码
if(xhr.status>=200&&xhr.status<300||
xhr.status===304){
//5.处理返回的结果
/*
服务器响应
responseText获得字符串形式的响应数据
responseXML 获得XML形式的响应数据
*/
alert(xhr.responseText);
}else{
alert("请求失败");
}
}
}
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
php代码 a.php
<?php
echo "ajax get page";
二:如果用AJAX请求文本文件呢
在IE浏览器中,如果通过Ajax发送GET请求,那么IE浏览器认为同一个URL只有一个结果,也就是说更改文本里的内容,在别的浏览器打开发送请求会更新文本内容,而在IE里不会,地址不发生变化,就拿不到实时更新数据
解决方法:利用随机数或者时间,更新地址url,Math.random()或者new Date().getTime()
关键代码:xhr.open("GET","c.txt?t="+(new Date().getTime()),true)
HTML代码 :b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 括号里的ev,ev1,是event事件对象,所有的鼠标移动,键盘点击的详细状况都保存在这个形参里面-->
<script>
window.onload=function(ev){
var oBtn=document.querySelector("button")
oBtn.onclick=function(ev1){
//兼容IE
var xhr;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置请求方式和请求地址(给创建的异步对象设置)
/*
method:请求的类型:GET或POST
url:文件在服务器上的位置
async:true(异步)或false(同步) AJAX是异步请求,所以括号里永远填true
*/
xhr.open("GET","c.txt?t="+(new Date().getTime()),true);
//3.发送请求 异步对0象发送请求
xhr.send();
//4.监听状态的变化 监听的是异步对象的变化 只要异步请求发生了变化,就调用这个回调函数,代表请求已经完成
xhr.onreadystatechange=function(ev2){
if(xhr.readyState===4){
/*
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
*/
//判断是否请求成功 http状态码
if(xhr.status>=200&&xhr.status<300||
xhr.status===304){
//5.处理返回的结果
/*
服务器响应
responseText获得字符串形式的响应数据
responseXML 获得XML形式的响应数据
*/
alert(xhr.responseText);
}else{
alert("请求失败");
}
}
}
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
txt c.txt
随便写什么内容