我觉得学每样东西,知道他的原理与如何使用就好了。所以在此我就不废话。
1.原理:
简单的来说(Ajax使用过程像你在与某人聊天,肚子饿了让舍友帮你去吃的,而自己可以继续聊天的过程一样。你的舍友此时就充当Ajax引擎的角色,而你是页面,某人是浏览页面用户)是实现页面无刷新的交互。
1.1说再多不如看图,Ajax工作原理图
2.如何使用
2.1创建Ajax引擎代码
//创建ajax引擎,ajax根据用户使用的浏览器不同,会创建不同的ajax引擎 function createXMLHttpRequest() { var request = false; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); if(request.overrideMimeType) { request.overrideMimeType('text/xml'); } } else if(window.ActiveXObject) { var versions = ['Microsoft.XMLHTTP','MSXML.XMLHTTP','Microsoft.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP']; for(var i=0; i<versions.length; i++) { try { request = new ActiveXObject(versions[i]); if(request) { return request; } } catch(e) {} } } return request; }
2.2Ajax用get发送请求代码
var AjaxEngine=null; function Ajax(myurl,myobj) { var url=myurl; //如url.jsp?username=xiaoming&password=0000 var obj=myobj; //回调函数,只能写函数名 AjaxEngine=createXMLHttpRequest(); // if(AjaxEngine){ AjaxEngine.open("get",url,true); AjaxEngine.onreadystatechange=obj; AjaxEngine.send(null); } }
2.3回调函数eg
function usernamecl(){ if(AjaxEngine.readyState==4){ window.alert("服务器返回"+AjaxEngine.responseText);//以文本形式接收 var msg=AjaxEngine.responseXML.getElementsByTagName("msg");//以xml形式接收 var msgValue=msg[0].childNodes[0].nodeValue; window.alert("msgValue"+msgValue); } }