网页运用Ajax与做事器交互的抽象过程如下图:

过程详解:

1: 要利用Ajax技能,根本中的根本,便是要创建一个xmlhttpRequest工具,无它就没有异步传输的可能:

PHPajax原理ajax的工作道理是什么 CSS

var xmlhttp;

if (window.XMLHttpRequest) { //检讨浏览器的XMLHttpRequest属性,如果为真则支持XMLHttpRequest

// IE7+, Firefox, Chrome, Opera, Safari 浏览器实行代码

xmlhttp=new XMLHttpRequest();

} else {

// IE6, IE5 浏览器实行代码

xmlhttp=new ActiveXObject(\"大众Microsoft.XMLHTTP\公众);

}

2:在网页中为某些事宜的相应绑定异步操作:通过上面创建的xmlhttp工具传输要求、携带数据。
在发出要求前要先定义要求工具的method、要提交给做事器中哪个文件进行要求的处理、要携带哪些数据、是否异步。

个中,与普通的request提交数据一样,这里也分两种方法:GET/POST

xmlhttp.open(\"大众GET\公众,\公众/try/ajax/demo_get2.php?fname=Henry&lname=Ford\"大众,);

xmlhttp.send();

xmlhttp.open(\公众POST\"大众,\"大众/try/ajax/demo_post2.php\公众,\公众Content-type\"大众,\公众application/x-www-form-urlencoded\"大众);

xmlhttp.send(\"大众fname=Henry&lname=Ford\公众);

3:做事器收到要求后,把附带的数据作为输入传给处理要求的文件,例如这里:把fname=Henry&lname=Ford作为输入,传给 /try/ajax/demo_get2.php 这个文件。
然后文件根据传入的数据做出处理,终极返回结果,通过response工具发回去。
客户端根据xmlhttp工具来获取response内容,然后调用DOM工具根据response内容来局部修正网页内容。

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)//要求处理完毕且状态为成功

{

document.getElementById(\公众myDiv\"大众).innerHTML=xmlhttp.responseText;//用response内容来修正DOM中的元素的内容

}

个中,response的类型有两种:字符串类型和XML文本。
两种回应的不同提取如下:

responseText 属性返回字符串形式的相应:

document.getElementById(\公众myp\公众).innerHTML=xmlhttp.responseText;

如果来自做事器的相应是 XML,须要作为 XML 工具进行解析,利用 responseXML :

xmlDoc=xmlhttp.responseXML; //获取做事器相应的XML文本并转换得到XMLDOM工具

txt=\公众\"大众;

x=xmlDoc.getElementsByTagName(\"大众ARTIST\"大众);//通过XMLDOM工具调用方法来获取XML工具中的内容

for (i=0;i<x.length;i++) {

txt=txt + x[i].childNodes[0].nodeValue + \"大众<br>\"大众; }

document.getElementById(\"大众myDiv\"大众).innerHTML=txt;//把获取到的内容通过document工具更新到网页内容去容去