Ajax使用基础示例

Get请求



functionloadXMLDoc()

{

var xmlhttp;

if(window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera,Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()//会被触发4次

{

if (xmlhttp.readyState==4&& xmlhttp.status==200)//响应已就绪

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","/ajax/demo_get.asp",true);

xmlhttp.send();

}

Post请求



functionloadXMLDoc()

{

var xmlhttp;

if(window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera,Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 &&xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("POST","/ajax/demo_post2.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//区别之处

xmlhttp.send("fname=Bill&lname=Gates");//区别之处

}

非异步请求

functionloadXMLDoc()

{

var xmlhttp;

if(window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera,Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("GET","/ajax/test1.txt",false);

xmlhttp.send();

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

</script>

responseXML响应方式



functionloadXMLDoc()

{

var xmlhttp;

var txt,x,i;

if(window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera,Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 &&xmlhttp.status==200)

{

xmlDoc=xmlhttp.responseXML;

txt="";

x=xmlDoc.getElementsByTagName("title");

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

{

txt=txt + x[i].childNodes[0].nodeValue +"<br />";

}

document.getElementById("myDiv").innerHTML=txt;

}

}

xmlhttp.open("GET","/example/xmle/books.xml",true);

xmlhttp.send();

}

callBack函数



functionloadXMLDoc(url,cfunc)

{

if(window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera,Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=cfunc;

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

functionmyFunction()

{

loadXMLDoc("/ajax/test1.txt",function()

{

if (xmlhttp.readyState==4 &&xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

});

}

请求XML 文件



function loadXMLDoc(url)

{

var xmlhttp;

var txt,xx,x,i;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=newXMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 &&xmlhttp.status==200)

{

txt="<tableborder='1'><tr><th>Title</th><th>Artist</th></tr>";

x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");

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

{

txt=txt +"<tr>";

xx=x[i].getElementsByTagName("TITLE");

{

try

{

txt=txt +"<td>" + xx[0].firstChild.nodeValue +"</td>";

}

catch (er)

{

txt=txt + "<td></td>";

}

}

xx=x[i].getElementsByTagName("ARTIST");

{

try

{

txt=txt +"<td>" + xx[0].firstChild.nodeValue +"</td>";

}

catch (er)

{

txt=txt + "<td></td>";

}

}

txt=txt +"</tr>";

}

txt=txt +"</table>";

document.getElementById('txtCDInfo').innerHTML=txt;

}

}

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

进行一次head请求



var xmlhttp;

functionloadXMLDoc(url)

{

xmlhttp=null;

if(window.XMLHttpRequest)

{// code for Firefox, Mozilla, IE7, etc.

xmlhttp=new XMLHttpRequest();

}

else if(window.ActiveXObject)

{// code for IE6, IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

else

{

alert("Your browser does not supportXMLHTTP.");

}

}



functionstate_Change()

{

if(xmlhttp.readyState==4)

{// 4 = "loaded"

if (xmlhttp.status==200)

{// 200 = "OK"

document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();

}

else

{

alert("Problem retrieving data:"+ xmlhttp.statusText);

}

}

}

进行一次指定的head请求



var xmlhttp;

functionloadXMLDoc(url)

{

xmlhttp=null;

if(window.XMLHttpRequest)

{// all modern browsers

xmlhttp=new XMLHttpRequest();

}

else if(window.ActiveXObject)

{// for IE5, IE6

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

else

{

alert("Your browser does not supportXMLHTTP.");

}

}



functionstate_Change()

{

if(xmlhttp.readyState==4)

{// 4 = "loaded"

if (xmlhttp.status==200)

{// 200 = "OK"

document.getElementById('p1').innerHTML="This file was lastmodified on: " + xmlhttp.getResponseHeader('Last-Modified');

}

else

{

alert("Problem retrieving data:"+ xmlhttp.statusText);

}

}

}