织梦Ajax技术入门教程

织梦Ajax技术入门教程Ajax这个名称怎么来的，本人也不得而之了，大概是（ActiveJavascriptActionXml）吧，说白一点就是运用了javascript、xmlhttp和xmldom技术及网站后台来处理用户的一些操作的方法吧。那么本人就分三步来说明如何使用Ajax技术来做开发。一、用javascript操作xmlhttp对象二、服务器部对xmlhttp请求的响应（PHP范例）三、xmldom的使用方法那费话少讲，先说第一部份：一、用javascript操作xmlhttp对象IE7,Mozilla,Firefox等浏览器中，javascript是内置有XMLHttpRequest这个对象的，但IE5+则没有，需要用如下方法来启动：//IE6try{xhttp=newActiveXObject(Msxml2.XMLHTTP);}catch(e){;}//IE5+if(xhttp==null)try{xhttp=newActiveXObject(Microsoft.XMLHTTP);}catch(e){;}那考虑不同浏览器的兼容，启动一个xmlhttp一般都要按如下方式：复制代码1.2.varxhttp=null;3.4.if(window.XMLHttpRequest){//IE7,Mozilla,Firefox等浏览器内置该对象5.6.xhttp=newXMLHttpRequest();7.8.}elseif(window.ActiveXObject){//IE6、IE59.10.try{xhttp=newActiveXObject(Msxml2.XMLHTTP);}catch(e){;}11.12.if(xhttp==null)try{xhttp=newActiveXObject(Microsoft.XMLHTTP);}catch(e){;}13.14.}15.对于xmlhttp的使用，一般遵守如下的顺序：1、初始化xmlhttp对象（上文）；2、打开链接方法xhttp.open(GET,purl,true);参数一：用GET或POST方式发送数据参数二、请求网址（只能请求你服务器上的资源，一般浏览器安全限制不能读取跨域的数据）参数三、true表示异步传输（服务器返回信息完成前，你可以进行其它操作），false表示阻断方式的传输。3、设定要发送的http请求头方法：xhttp.setRequestHeader(key,value);一般来说，默认要发送的头是：xhttp.setRequestHeader(Content-Type,application/x-);这种表示发送的内容类型的请求头用于发送文本数据，而且javascript默认是以unicode发送的还有另外一种形式是：xhttp.setRequestHeader(Content-Type,multipart/form-data);是表示发送二制形式的数据，由于安全性原因，javascript一般不能用这种方式来发送数据，所以这个头一般没什么用。如果你的网站开启了使用refer参数来防盗链，那么你必须用这个方法指定Refer参数，或者如果用户需要登录才能进行某操作，那么要指定Cookie的请求头。4、send数据方法：xhttp.send(postdata);对于用get攻手请求，不需要指定postdata，直接用test.php?a=a&b=b这样形式的网址来请求即可。如果是post方式，需要用key1=value2&key2=value2这样的形式来对数据进行处理，把它合并在postdata字串中，然后发送。注意事项：javascript默认发送数据的方式是unicode，处理返回的数据必须是utf-8格式，因此，在发送的时候，需要用escape()函数来处理postdata和网址的value，在服务器上必须还原这些value，并把unicode转为页面编码值，因此如果用jsp或asp.net都会比较简单，但如果用php处理起来是什么费劲的，等下会教你如何做。5、确认服务器返回资料完成下载[1]如果用阻断的方式来发送请求，那么直接用if(xhttp.readyState==4)就能判断是否完成。readyState的具体属性值为：0没open1没send2状态未知3正在传送4传送完成当然为了保障起见，还需要加多一重判断就是if(xhttp.status==200)status就是http协议里的返回头代码1xx表示（唉呀，忘记了）2xx表示成功的信息3xx表示页面转移4xx页面不存在5xx表示服务器的各种错误如果你的页面没特殊处理，一般用if(xhttp.status==200)来确信内容返回是正确的[2]如果用异步传输，需要用onreadystatechange的事件来监听xhttp.onreadystatechange=function(){//这里来进行上面阻断方式的判断if(myajax.xhttp.readyState==4){if(myajax.xhttp.status==200){//要进行的后续操作}}}6、获取返回结果属性：[1]xhttp.responseBody;[2]xhttp.responseStream;[3]xhttp.responseXml;[4]xhttp.responseText;其中1、2都是二进制的方式，一般很少会用到，4不用看都知道了如果服务端无意外的话[3]返回的是一个xmldom的对象二、服务器部对xmlhttp请求的响应（PHP范例）为了简化操作，在这里把xmlhttp的各作操作封装为一个类复制代码1.functionDedeAjax(WiteOKFunc){//WiteOKFunc为异步状态事件处理函数2.3.//xmlhttp和xmldom对象4.this.xhttp=null;5.this.xdom=null;6.7.//post或get发送数据的键值对8.this.keys=Array();9.this.values=Array();10.this.keyCount=-1;11.12.//http请求头13.this.rkeys=Array();14.this.rvalues=Array();15.this.rkeyCount=-1;16.//请求头类型17.this.rtype='text';18.19.//初始化xmlhttp20.if(window.XMLHttpRequest){//IE7,Mozilla,Firefox等浏览器内置该对象21.this.xhttp=newXMLHttpRequest();22.}elseif(window.ActiveXObject){//IE6、IE523.try{this.xhttp=newActiveXObject(Msxml2.XMLHTTP);}catch(e){}24.if(this.xhttp==null)try{this.xhttp=newActiveXObject(Microsoft.XMLHTTP);}catch(e){}25.}26.this.xhttp.onreadystatechange=WiteOKFunc;27.//rs:responseBody、responseStream、responseXml、responseText28.29.//以下为成员函数30.//--------------------------------31.32.//初始化xmldom33.this.InitXDom=function(){34.varobj=null;35.if(typeof(DOMParser)!=undefined){//Gecko、Mozilla、Firefox36.varparser=newDOMParser();37.obj=parser.parseFromString(xmlText,text/xml);38.}else{//IE39.try{obj=newActiveXObject(MSXML2.DOMDocument);}catch(e){}40.if(obj==null)try{obj=newActiveXObject(Microsoft.XMLDOM);}catch(e){}41.}42.this.xdom=obj;43.};44.45.//增加一个POST或GET键值对46.this.AddKey=function(skey,svalue){47.this.keyCount++;48.this.keys[this.keyCount]=skey;49.this.values[this.keyCount]=escape(svalue);50.};51.52.//增加一个Http请求头键值对53.this.AddHead=function(skey,svalue){54.this.rkeyCount++;55.this.rkeys[this.rkeyCount]=skey;56.this.rvalues[this.rkeyCount]=svalue;57.};58.59.//清除当前对象的哈希表参数60.this.ClearSet=function(){61.this.keyCount=-1;62.this.keys=Array();63.this.values=Array();64.this.rkeyCount=-1;65.this.rkeys=Array();66.this.rvalues=Array();67.};68.69.//发送http请求头70.this.SendHead=function(){71.if(this.rkeyCount!=-1){//发送用户自行设定的请求头72.for(;i=this.rkeyCount;i++){73.this.xhttp.setRequestHeader(this.rkeys[i],this.rvalues[i]);74.}75.}76.if(this.rtype=='binary'){77.this.xhttp.setRequestHeader(Content-Type,multipart/form-data);78.}else{79.this.xhttp.setRequestHeader(Content-Type,application/x-);80.}81.};82.83.//用Post方式发送数据84.this.SendPost=function(purl){85.varpdata=;86.vari=0;87.this.state=0;88.this.xhttp.open(POST,purl,true);89.this.SendHead();90.if(this.keyCount!=-1){//post数据91.for(;i=this.keyCount;i++){92.if(pdata==)pdata=this.keys[i]+'='+this.values[i];93.elsepdata+=&+this.keys[i]+'='+this.values[i];94.}95.}96.this.xhttp.send(pdata);97.};98.99.//用GET方式发送数据100.this.SendGet=function(purl){101.vargkey=;102.vari=0;103.this.state=0;104.if(this.keyCount!=-1){//get参数105.for(;i=this.keyCount;i++){106.if(gkey==)gkey=this.keys[i]+'='+this.values[i];107.elsegkey+=&+this.keys[i]+'='+this.values[i];108.}109.if(