AJAX04-应用（用户名是否已被注册、响应内容为xml）

最新推荐文章于 2024-07-30 20:50:32 发布

微凉归期

最新推荐文章于 2024-07-30 20:50:32 发布

阅读量56

点赞数

分类专栏： 2-JavaWeb基础 # 2-2 AJAX 文章标签： ajax java

本文链接：https://blog.csdn.net/weixin_45176509/article/details/117958237

版权

2-JavaWeb基础同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

2-2 AJAX

4 篇文章 0 订阅

订阅专栏

应用1：用户名是否已被注册

步骤：
1、编写页面：ajax.jsp

给出注册表单页面
给出用户文本框添加onblur事件的监听
获取文本框内容，通过ajax发送给服务器，得到响应结果；
如果为0，则什么都不做；

<head>
<script type="text/javascript">
   //创建异步对象
   function createXMLHttpRequest(){
    try {
        return new XMLHttpRequest();
    }catch(){
       try {
           return new ActiveXobject("Msxml2.XMLHTTP");
       }catch(e){
          try{
              return new ActiveXobject("Microsoft.XMLHTTP");
          }catch(e){
             alert("用的啥浏览器？？？");
             throw e;
          }
       }
     }
  }
   window.onland =function (){ //文档加载完毕之后执行
       var tUserName=document.ElementById("usernameId");
       tUserName.onblur=function(){//给按钮的点击事件注册监听
       //第一步：得到异步对象
       var xmlHttp = createXMLHttpRequest();
       //第二步：打开与服务器连接，3个参数：请求方式、url、异步请求
       xmlHttp.open("POST","<c:url value="/Servelt"/>",true);
       //***********************************************
       //修改open方法，设置请求头
       xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       //第三步：发送请求
       xmlHttp.send("username="+tUserName.value);//get请求没有请求体，但也要给出null
       //第四步：设置监听
       xmlHttp.onreadystatechange =function (){
            if(xmlHttp.readyState ==4 && xmlHttp.status =200){
            //获取服务器的响应结束
            var text = xmlHttp.responseText();
            var span=document.ElementById("errorSpan");
                if("1"==text ){
                    span.innerHtml ="该用已注册！";           
                }else{
                    span.innerHtml ="";           
                }
            }
          };
       };
   };
 </script>
 </head>
 <body>
     <h1>演示用户信息是否已注册</h1>
     <form action="" method="post">
         用户名：<input type="text" name="username" id="usernameID"/> <span id="errorSpan"></Span>
         <br/>
         密  码：<input type="text" name="password" id="passwordID"/> 
         <br/>
         <input type="submit" value="提交"/> 
   </form>
  </body>

2、编写servelt：Servelt.java

获取客户端传递的用户参数信息
判断是否为用户名是否为123456
如果是返回1，否则返回0

public class Servelt extends HttpServelt {
      public void doPOST(HttpServeltRequest request,HttpServeltResponse response)  throws Exception{
          //防止乱码************************
          response.setContentType("text/html;charest=utf-8");
          response.setCharacterEncoding("UTF-8");
          String userName=request.getParameter("username");//获取请求参数
          if(userName.equals("123456")){
              response.getWrtter().print("1");
          }else{
              response.getWrtter().print("0");
          }
      }
}

应用2：响应内容为xml

1、编写页面ajax.jsp

<head>
<script type="text/javascript">
   //创建异步对象
   function createXMLHttpRequest(){
    try {
        return new XMLHttpRequest();
    }catch(){
       try {
           return new ActiveXobject("Msxml2.XMLHTTP");
       }catch(e){
          try{
              return new ActiveXobject("Microsoft.XMLHTTP");
          }catch(e){
             alert("用的啥浏览器？？？");
             throw e;
          }
       }
     }
  }
   window.onland =function (){ //文档加载完毕之后执行
       var bta =document.getElenmentById("bta");
       bta.onclick =function(){//给按钮的点击事件注册监听
       //第一步：得到异步对象
       var xmlHttp = createXMLHttpRequest();
       //第二步：打开与服务器连接，3个参数：请求方式、url、异步请求
       xmlHttp.open("GET","<c:url value="/Servelt"/>",true);      
       //第三步：发送请求
       xmlHttp.send(null;//get请求没有请求体，但也要给出null
       //第四步：设置监听
       xmlHttp.onreadystatechange =function (){
            if(xmlHttp.readyState ==4 && xmlHttp.status =200){
            //获取服务器的响应结束
            var doc= xmlHttp.responseXML();
            //查询文档下名为student的元素,得到数组，再去下标为0的元素;
            var ele=doc.getElementByTagName("student")[0];
            //获取名为number的元素属性值
            var number=ele.getAttribute("number");
            //*********浏览器兼容性问题**********
            var name;
            var age;
            var sex;
            if(windows.addEventListener){//其他浏览器
               name=ele.getElementByTagName("name")[0].textContent;
               age=ele.getElementByTagName("age")[0].textContent;
               sex=ele.getElementByTagName("sex")[0].textContent;
            }else{//IE浏览器
               name=ele.getElementByTagName("name")[0].text;
               age=ele.getElementByTagName("age")[0].text;
               sex=ele.getElementByTagName("sex")[0].text;
            }
            var txt="姓名："+name+"、年龄："+age+"、性别"+sex;
            document.getElementById("h1").innerHTML=txt;
            }
          };
       };
   };
 </script>
 </head>
 <body>
    <button id="bta">点击这里</button>
   <h1 id="h1"></h1>
  </body>

2、编写servelt：Servelt.java

public class Servelt extends HttpServelt {
      public void doGet(HttpServeltRequest request,HttpServeltResponse response)  throws Exception{
      String xml="<students>"+
                 "<student number='001'>"+
                 "<name>张三</name>"+
                 "<age>18<age/>"+
                 "<sex>男<ex/>"+
                 "</student>"+
                 "</students>";
      response.setContentType("text/html;charest=utf-8");
      response.getWrtter().print(xml);
      }
}