【WEB基础】④关于AJAX

前端之家收集整理的这篇文章主要介绍了【WEB基础】④关于AJAX前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

就现在接触所见,我把AJAX分为两种:

1.纯JS

  <script language="javascript" type="text/javascript" charset="utf-8">
  var xmlHttp;
  <!--创建传输对象-->
  function createXMLHttpRequest()
  {
     if(window.ActiveXObject)
     {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     else if(window.XMLHttpRequest)
     {
        xmlHttp=new XMLHttpRequest();
     }
  }
  <!--调动函数,向后台传值-->
  function select_change()
  {
     var deptNames=document.getElementById("deptNames").value;
     if(deptNames!=null){
          createXMLHttpRequest();
          var url="action.DeptChangeJListServlet?deptNames="+deptNames;
          xmlHttp.open("POST",url,true);
          xmlHttp.onreadystatechange=showMember;
          xmlHttp.send(null);
          }
  }
  <!--接收后台数据-->
  function showMember()
  {
     if(xmlHttp.readyState==4)
     {
        if(xmlHttp.status==200)
        {
           <!--以纯文本格式接收后台数据-->
           var membersData=xmlHttp.responseText;
           <!--以标签为标识接收后台数据-->
           var membersData=xmlHttp.responseXML.getElementsByTagName("jobNames");
           var membeRSSelect=document.getElementById("jobNames");
           membeRSSelect.options.length=0;
           
           for(var i=1;i<membersData.length;i++)
           {
             
             var mvalue=membersData[i].childNodes[1].firstChild.nodeValue;
             var option=new Option(mvalue,mvalue);
             try
             {
                membeRSSelect.appendChild(option);
             }
             catch(e)
             {
                alert(e);
             }
           }
        }
        else
        {
           alert("您请求的页面有异常!");
        }
     }
     else
     {
     }
  }
  </script>


 
 

2.Jquery

<script type="text/javascript" src="resources/scripts/jquery-1.2.6-vsdoc-cn.js"></script>
    <script type="text/javascript">
        function textLoginName() {
                $.ajax({
                    type: "post",url:"action.NameCheckServlet",data: "loginName=" + $('#loginName').val(),success: function(data,textStatus) {
                        $("#loginNames").html("");
                        $("#loginNames").append(data);
                    },error: function() {
                        alert('出错了!');
                    }
                });
            }
    </script>

后台 @H_403_17@response.setContentType("text/html,charset=utf-8"); response.setHeader("Charset","utf-8"); response.setCharacterEncoding("utf-8");//设置输出编码格式 PrintWriter out=response.getWriter(); @H_403_17@sb.append("<jobNames>"); Map map=new DeptChangeService().DeptChange(); List list =(List) map.get(deptNames); System.out.println(); for (Object object : list) { <span style="white-space:pre"> </span>sb.append("<jobNames><id>"+1+"</id><name>"+object.toString()+"</name></jobNames>"); <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>sb.append("</jobNames>"); <span style="white-space:pre"> </span>out.write(sb.toString()); <span style="white-space:pre"> </span>out.flush(); <span style="white-space:pre"> </span>out.close();

猜你在找的Ajax相关文章