js方式利用Ajax技术从后台获得数据

来源:互联网 发布:python高级编程视频 编辑:程序博客网 时间:2024/05/22 15:54

  不使用Jquery等js类库,使用js方式创建xmlHttpRequest对象,关键是需要判断浏览器是否支持Ajax技术,然后向服务器提交请求,处理服务器返回的数据。

代码如下:

<script type="text/javascript">
  var xmlHttp=getAjaxHttp();
  window.onload = function () {  
      xmlHttp.open( "GET", "MyLianqinAction?userid=20150001", true );
   xmlHttp.onreadystatechange = updateList;     
      xmlHttp.send( null );
  };
  //Ajax回调函数
  function updateList(){
   if( xmlHttp.readyState == 4  && xmlHttp.status == 200 )
      {  
         var data=xmlHttp.responseText;  //获得从服务器返回的数据

         //对数据进行处理,显示到页面

        document.getElementById("showdata").value=data;
      }
  }
 
  //创建ajax对象
  function getAjaxHttp() {
      var xmlHttp;
      try {
          // Firefox, Opera 8.0+, Safari
          xmlHttp = new XMLHttpRequest();
          } catch (e) {
              // Internet Explorer
              try {
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
              } catch (e) {
              try {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (e) {
                  alert("您的浏览器不支持AJAX!");
                  return false;
              }
          }
      }
      return xmlHttp;
  }
 </script>

0 0
原创粉丝点击