什么是AJAX
AJAX是一种用于创建快速动态网页的技术，可以在不重新加载整个网页的情况下，对网页的某部分进行更新
传统的网页（不使用AJAX）需要更新内容时，必须重载整个网页
生活中使用AJAX的应用案例：新浪微博，谷歌地图，开心网
创建XMLHttpRequest对象
XMLHttpRequest用于在后台与服务器交换数据。意思是可以在不重新加载整个网页的情况下，对网页的某部分进行更新
<script> function loadXMLDoc() { //创建XMLHttpRequest对象 var xmlhttp; if(window.XMLHttpRequest){ //IE+，firefox，chrome，Opera，Safari 浏览器执行代码 xmlhttp = new XMLHttpRequest(); }else{ //IE6，IE5 浏览器执行代码 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") } } </script>
向服务器发送请求
发送需求时，通常使用XMLHttpRequest对象的open()和send()方法：
xmlhttp.open(“Get”,“ajax_info.txt”,true);
xmlhttp.open(“POST”,“/try/ajax/demo_post.php”,true);
xmlhttp.send();
open()第一个参数：其中Get和POST比较，get更简单也更快，在多数情况都能使用
第二个参数：url服务器上的文件，url参数是服务器上文件的地址，文件可以是任意类型的文件
第三个参数：true或false 异步 ajax指是异步js和XML
XMLHttoRequest对象如果要用AJAX的话，其open()方法中必须为true
xmlhttp.onreadystatechange=function () { if(xmlhttp.readyState == 4 && xmlhttp.status ==200){ document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send();
AJAX-服务器 响应
服务器响应：如果获取服务器响应，使用XMLHttprequest对象和responseText或responseXML
如果来自服务器响应并非XML，使用responseText属性，返回字符串形式的响应
<script> function loadXMLDoc() { //创建XMLHttpRequest对象 var xmlhttp; var txt,x,i; if(window.XMLHttpRequest){ //IE+，firefox，chrome，Opera，Safari 浏览器执行代码 xmlhttp = new XMLHttpRequest(); }else{ //IE6，IE5 浏览器执行代码 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") } xmlhttp.onreadystatechange=function () { if(xmlhttp.readyState == 4 && xmlhttp.status ==200){ document.getElementById("myDiv").innerHTML = xmlhttp.responseText; xmlDoc = xmlhttp.responseXML; txt="cd_catalog.xml "; x = xmlDoc.getElementsByTagName("ARTIST"); for(i = 0;i<x.length;i++){ txt = txt+x[i].childNodes[0].nodeValue +"<br>"; } document.getElementById("myDiv").innerHTML = txt; } } xmlhttp.open("GET","cd_catalog.xml" ,true); xmlhttp.send(); } </script>
AJAX-onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务，readyState改变时，就会触发onreadystatechange事件
readyState属性存有XMLHttpRequest状态信息
onreadystatechange 存储函数，每当readyState属性改变时，就会调用该函数
readyState 存有XMLHttpRequest的状态，从0-4发生变化
0：请求未初始化 1 ：服务器链接已建立
2：请求已接受 3：请求处理中
4：请求已完成，且响应已就绪
status 200：”OK“ 404：未找到页面
xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.statues == 200){ document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } }
使用回调函数：如果网站上存在多个AJAX任务，应该为创建XMLHttpRequret对象编写一个标准的函数，并为每个AJAX任务调用该函数
function loadXMLDoc(url,cfunc){ if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction(){ loadXMLDoc("/try/ajax/ajax_info.txt",function () { if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } }); }
