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);

    }

  }

}