天天看点

Ajax小例[原]

刚看到Ajax这个名字还以为是荷甲劲旅阿贾克斯呢,搞了半天是Asynchronous JavaScript And XML的缩写,我晕~~~。

<script language="JavaScript">

<!--

function xmlHttpTest()

{

  var url = "http://localhost:8080/application/login.do"; 

  //根据浏览器不同,调用不同的方法来创建对象

  try

  {

      var xmlObj = new ActiveXObject("Msxml2.XMLHTTP");

  }

  catch (e)

  {

      try

      {

          var xmlObj = new ActiveXObject("Microsoft.XMLHTTP");

      }

      catch (e)

      {

          try

          {

             var xmlObj = window.XMLHttpRequest();

          }

          catch

          {

          }

      }

  }

  //Open方法中包含了5个参数,前三个是必要的,后两个是可选的(在服务器需要进行身份验证时提   供),参数如下: 

  //http-method: HTTP的通信方式,比如GET或是 POST

  //url: 接收XML数据的服务器的URL地址。通常在URL中要指明 ASP或CGI程序

  //async: 一个布尔标识,说明请求是否为异步的。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作

  //userID: 用户ID,用于服务器身份验证

  //password: 用户密码,用于服务器身份验证

  xmlObj.open("POST", url, false);       

  xmlObj.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");  //设置content type,作为表单数据发送

  //Send方法的参数类型可以是字符串、DOM树或任意数据流,下面有专门讨论发送xml数据的例子。

  xmlObj.send("userId=5");               //发送form数据

  // 在客户端发送数据的过程中,与服务器端的交互状态是不断的发生变化的,可以通过readyState属性获得其交互状态。

  // 0 (还没开始)

  // 1 (加载中)

  // 2 (已加载)

  // 3 (信息交互中)

  // 4 (完成)

  // 可以通过onreadystatechange属性捕获事件的变化,可以通过直接创建函数的方法调用,如下

  xmlObj.onreadystatechange = function()

  {

     if(xmlObj.readyState==0)

     {

         alert("还没开始");

     }

     else if(xmlObj.readyState==1)

     {

         alert("加载中");

     }

  }

  //或者可以直接指定函数名,这个函数是没有参数的。

  xmlObj.onreadystatechange = readyStateChanged;

  //获取经过服务器交互后的状态,根据返回状态,进入不同的处理程序

  if (xmlObj.status == 200)  //是指服务器处理成功!

  {    

      alert("OK");

  }

  else          //是指服务器处理失败!

  {  

      alert("FLASE");

  }

  var returnText = xmlObj.responseText;  //传回的值作为字符串来处理

  var returnStream = xmlObj.responseStream;   //传回的值作为Stream

  var returnXml = xmlObj.responseXML;  //传回的值作为XMLDocument对象来处理,可以通过 JavaScript DOM 的相关函数处理

  //下面是对xml数据传输的例子:

  //对于responseXML的情况,假设我们通过调用后传回来的xml文件结构如下:

  // <?xml version="1.0" ?>

  // <root>

  //  I'm a test.

  // </root>

  //下面是一个简单的处理事例:

  //    var returnXml = xmlObj.responseXML;

  // var rootNode = xmldoc.getElementsByTagName('root').item(0);

  // alert(rootNode.firstChild.data);

  //当然,我们也可以把xml数据传送给服务器,如下:

  try

  {

      var xmlDoc=new ActiveXObject("MSXML.DOMDocument");  //在IE上创建XML对象

  }

  catch

  {

      try

      {

          var xmlDoc=new ActiveXObject("MSXML2.DOMDocument");

      }

      catch

      {

      }

  }

  flag=xmlDoc.loadXML("");

  newNode =xmlDoc.createElement("XmlHttpTest")

  MarkNode=xmlDoc.documentElement.appendChild(newNode);

  newNode =xmlDoc.createElement("Author")

  newNode.text="Ten";

  MarkNode.appendChild(newNode)

  xmlObj.open("POST",url,false)

  xmlObj.setRequestHeader("Content-Type","text/xml")

  xmlObj.setRequestHeader("Content-Type","gb2312")

  xmlObj.send(xmlDoc);

}

function readyStateChanged()

{

  if(xmlObj.readyState==0)

  {

      alert("还没开始");

  }

  else if(xmlObj.readyState==1)

  {

      alert("加载中");

  }

}

//-->

</script>

继续阅读