1.什么是ajax
全称：Asynchronous JavaScript and XML（用异步的形式的JavaScript去操作XML) 用来传输进行数据交互==其实就是拿数据发数据。
2.应用
Ajax就是做到当页面内容发生改变的时候能不刷新页面，就能把改变告知我们。比如，我们注册的时候信息填写错误，是不是没刷新页面就能直接看到信息提示，比如我们玩QQ的时候，有什么消息都会提醒你，丝毫没有刷新页面，丝毫没有影响你干别的事情，这就是Ajax做的事情。
3.具体步骤
（1）创建ajax对象
var xhr = new XMLHttpRequest();
（2）设置请求信息
xhr.open(method,url,async);method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）
（3）提交请求
xhr.send();
（4）等待服务器返回内容
xhr.onreadystatechange = function() {
//弹出内容
}
4.具体例子
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>TestAjax</title>
6 <script type="text/javascript">
7 function loadXMLDoc()
8 {
9 var xhr;
10 if (window.XMLHttpRequest)
11 {// code for IE7+, Firefox, Chrome, Opera, Safari
12 xhr=new XMLHttpRequest();
13 }
14 else
15 {// code for IE6, IE5
16 xhr=new ActiveXObject("Microsoft.XMLHTTP");
17 }
18 xhr.open("GET","hello.txt",true);
19 xhr.send();
20 xhr.onreadystatechange=function()
21 {
22 if (xhr.readyState==4 && xhr.status==200)
23 {
24 document.getElementById("myDiv").innerHTML=xhr.responseText;
25 }
26 }
27 }
28 </script>
29 </head>
30 <body>
31 <h2>AJAX</h2>
32 <button type="button" onclick="loadXMLDoc()">请求数据</button>
33 <div id="myDiv"></div>
34 </body>
35 </html> 点击按钮"请求数据" 会在id="myDiv"的div下显示出hello.txt的内容(不会刷新整个页面)
说明：1.html和txt文件在同一个目录下2.创建的ajax对象实际是存在兼容问题的，IE6以下没有这个对象的，所以是获取不到数据的，IE6以下用的实际是一个插件的方式： ActiveXObject(‘Microsoft.XMLHTTP‘) //ActiveXObject: IE6下插件的总称，包含很多插件
//Microsoft.XMLHTTP：具体某个插件的名字
所以我们需要对上面做一个兼容性的处理：
var xhr = null;
if(window.XMLHttpRequest){ //加window是因为如果直接判断IE下不存在的东西会报错，加了window，就是在判断一个属性是否存在，这样就不会报错了（当然我们都知道所有的东西都在window对象下，所以这样判断是有效的）
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
3.在上面的代码中xhr.send()提交请求是需要时间的，所以必须要等到一定时间提交成功后，我们后面的才能正确获取到内容，所以这就是后面的代码正确执行，依赖于前面，但是如果用同步的话，我们后面那些不依赖这些前面代码的代码也没办法执行，体验就不好了，所以我们选择用异步，而对于这些依赖前面代码执行的代码，我们就进行判断
if (xhr.readyState==4 && xhr.status==200)
就是判断如果数据响应到了，收到了，再弹出内容。（如果我们不判断，按照异步的原理，就会立马弹出来，获取数据需要时间，因为实际还没获取到数据，所以会弹出空，怕误解，所以这里我 再强调下）.
时间： 2024-12-29 09:54:36