用户投稿AJAX
AJAX = Asynchronous JavaScript and XML(非同步的JavaScript and XML)
他并不是新的程式语言，而是一种使用现有标準的新方法，其最大的优点是可以不重新加载整个网页的情况下雨伺服器交换数据并更新部分网页内容。
AJAX简介
AJAX = 非同步JavaSript与XML，用于快速建立动态网页的技，通过与伺服器进行少量数据交换，可以使网页实现非同步更新，这意味着可以不重新加载整个网页的情况下对网页的某个部分进行更新，而传统网页(不使用AJAX)若需要更新内容则比需重新加载整个网页。
AJAX工作原理
图片来源 : AJAX|菜鸟教程
当浏览器发生某个事件(readyState状态改变...)便会创建一个XMLHttpRequest藉由网路来发送HttpRequest给伺服器，当伺服器收到HttpRequest后便会进行处理，由于伺服器与浏览器是分开的工作环境，所以就算伺服器正在处理Request但浏览器却可以继续往下一个目标执行(非同步动作)，而当Request在伺服器中处理完成后便一样藉由网路将数据回传给浏览器，而当浏览器stack为空(未处理其他状况)，就将伺服器处理后的数据渲染在浏览器中，完成非同步的网页更新。
AJAX 创建XMLHttpRequest
现在浏览器均支持XMLHttpRequest，但旧版IE(IE5,IE6)则不支援，可以使用"ActiveXObject"
var xmlhttp;if(window . XMLHttpRequest) //使用if检测使用者使用的浏览器是否支援{ xmlhttp = new XMLHttpRequest ( ) ; //创建新的XMLHttpRequest}else{ xmlhttp = new ActiveXObject ( " Microsoft.XMLHTTP " ) ;}AJAX 向伺服器发出Request
XHLHttpRequest用于和伺服器交换数据，我们使用SMLHttpRequest中的open()与send()
xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();
图片来源 : AJAX|菜鸟教程
GET还是POST?
与POST相比GET更简单与更好快，大部分情况都能使用，但若以下情况请使用POST :
无法使用缓存文件(更新伺服器上的文件或数据库)向伺服器发送大量数据 (POST没有数据量限制)发送包含未知字符的使用者输入(POST比GET更稳定与可靠)GET Request
一个简单的GET Request
//xmlhttp.open("请求类型","url","非同步");xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send();POST Request
//xmlhttp.open("请求类型","url","非同步");xmlhttp.open("POST","/try/ajax/demo_post.php",true);xmlhttp.send();AJAX 伺服器响应
若需要获取伺服器的响应，使用XMLHttpRequest 中的 responseText 或 responseXML。
responseText
若伺服器的响应并非XML，请使用responseText
var xmlhttp;if(window . XMLHttpRequest) //使用if检测使用者使用的浏览器是否支援{ xmlhttp = new XMLHttpRequest ( ) ; //创建新的XMLHttpRequest}else{ xmlhttp = new ActiveXObject ( " Microsoft.XMLHTTP " ) ;}document.getElementById("myDiv").innerHTML=xmlhttp.responseText;responseXML
若伺服器的响应为XML，并且需要对XML进行解析，请使用responseXML
xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++){ txt=txt + x[i].childNodes[0].nodeValue + "<br>";}document.getElementById("myDiv").innerHTML=txt;AJAX onreadystatechange事件
每当readyState发生改变时，就会触发onreadystatechange事件。
图片来源 : AJAX|菜鸟教程
在onreadystatechange事件中，我们规定当伺服器响应已经做好被处理的準备时所执行的任务，当readyState = 4(请求已完成且响应已就绪)且status = 200(状态準备完成)。
var xmlhttp;if(window . XMLHttpRequest) //使用if检测使用者使用的浏览器是否支援{ xmlhttp = new XMLHttpRequest ( ) ; //创建新的XMLHttpRequest}else{ xmlhttp = new ActiveXObject ( " Microsoft.XMLHTTP " ) ;}xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }}注意!! onreadystatechange事件被触发4次， 0->1, 1->2, 2->3, 3->4
使用callback function
若网站上存在多个AJAX那们应该创建一个callback function而不适重複写同样的function(Don't Repeat Youself)
AJAX 实例
<!DOCTYPE html><html><head><script>var xmlhttp;function loadXMLDoc(url,cfunc){ if (window.XMLHttpRequest) //使用if检测使用者使用的浏览器是否支援 { xmlhttp=new XMLHttpRequest(); //创建新的XMLHttpRequest } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; //状态改变时触发指定function xmlhttp.open("GET",url,true); //向伺服器发送Request xmlhttp.send();}function myFunction(){loadXMLDoc("/try/ajax/ajax_info.txt",function(){if (xmlhttp.readyState==4 && xmlhttp.status==200) //当伺服器响应做好被处理的準备{document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //获取响应内容并渲染到htmp中}});}</script></head><body><div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div><button type="button" onclick="myFunction()">修改内容</button> //点击按钮触发myfunction()</body></html>参考资料 :
AJAX|菜鸟教程
微信扫一扫打赏
支付宝扫一扫打赏
