`
小鑫的java
  • 浏览: 143251 次
  • 性别: Icon_minigender_1
  • 来自: 浙江
社区版块
存档分类
最新评论

JavaScript_ajax上课代码

AjaxJavaScriptServletJSPHTML 
阅读更多 
程序1 简单的ajax代码框架 *******************************
package com.tarena.ajax;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ajaxServlet extends HttpServlet {
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=gbk");
        PrintWriter out = response.getWriter();
        out.println("Hello Ajax 我来了");
        out.flush();
        out.close();       
    }
}
 
http://127.0.0.1:8080/jsp-app/servlet/ajaxServlet

///////////////////////////////////////////////
http://127.0.0.1:8080/jsp-app/ajax.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>ajax.html</title>
    </head>
    <script>
  function ajaxtest(){
      //ajax 编程模式
      var oajax;
      var data=document.getElementById("data");
      //////////////////////////////
      try{
          oajax=new XMLHttpRequest();
          data.innerHTML="<B>标准方式</B>";
      }catch(e){
          try{
                oajax=new ActiveXObject("Microsoft.XMLHTTP");   
              data.innerHTML="<B>MS方式</B>";
          }catch(me){
              data.innerHTML="<B>false</B>";
                 }     
      }
      //
      oajax.open("get","http://127.0.0.1:8080/jsp-app/servlet/ajaxServlet");
      data.innerHTML="打开连接成功";
      //
      //oajax.onreadystatechange=deal;
      oajax.onreadystatechange=function(){
          var state=oajax.readyState;
          //if(state==4){data.innerHTML="服务器处理完毕";}
          switch(state){
              case 0:break;
              case 1:break;
              case 2:break;
              case 3:data.innerHTML="数据发送...";break;
              case 4:var txt=oajax.responseText;data.innerHTML=txt;break;
             
          }
      };
      //
      oajax.send(null);
      data.innerHTML="发送完毕";
      //
  }
 
  function deal(){
  data.innerHTML="响应";
  }
  </script>
    <body>
        <button onclick="ajaxtest();">
            测试test
        </button>
        <!-- test -->
        <div id="data"></div>
    </body>
</html>

程序2 ajax的多种参数传递方式演示 *********************************************
package com.tarena.ajax;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TableServlet extends HttpServlet {

    protected void service(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String querystring=request.getQueryString();
        String key1=request.getParameter("key1");
        String key2=request.getParameter("key2");
       
        String code=request.getHeader("mycode");
        //String usernamepassword=request.getHeader("A");
        response.sendError(602, "my err 602");
       
        BufferedReader reader=request.getReader();
        String body="";
        String temp="";
        while((temp=reader.readLine())!=null){
            body=body+temp;           
        }
       
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        try {
            Thread.sleep(2000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        out.println("<table border=1>");
        out.println("<tr");
        out.println("<td>学号</td><td>姓名</td>");
        out.println("</tr");
        out.println("<tr");
        out.println("<td>"+key1+"</td><td>"+key2+"</td>");
        out.println("</tr");
        out.println("<tr");
        out.println("<td>"+body+"</td><td>"+code+"</td>");
        out.println("</tr");
        out.println("</table>");
        out.flush();
        out.close();
    }

}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>query.html</title>
        <script type="text/javascript">
    function query(){
        var aj=new XMLHttpRequest();
        var inf=document.getElementById("info");
        inf.innerHTML="正在查询。。。。";
        aj.open("post","http://127.0.0.1:8080/jsp-app/servlet/TableServlet?key1=value1001&key2=ren",
        true,"Louis","123abc");
        aj.setRequestHeader("mycode","code123");
        aj.onreadystatechange=function(){
             if(aj.readyState==4){
              //inf.innerHTML=aj.responseText;
              var sta=aj.statusText;
              inf.innerHTML=sta;//显示 my err
             }
        }
        //aj.send(null);
        aj.send("<stu><name>hello,i am ren</name></stu>");
    }
   
    </script>
    </head>

    <body>
        <center>
            <h1>
                学生明细查询
            </h1>
            <hr>
            <input type="button" value="查询" onclick="query();">
            <div id="info" style="width: 300; height: 200;">
                查询结果
            </div>
        </center>
    </body>
</html>

程序3 ajax实用案例 ***********************************************
<input type="button" value="Other!" onclick="selectP(4);" />


function selectP(a){
    alert(a);
    var aj=new XMLHttpRequest();
        var inf=document.getElementById("data");
        aj.open("post","http://127.0.0.1:8080/shopcart/servlet/SelectP?key1="+a,
        true);
        aj.onreadystatechange=function(){
             if(aj.readyState==4){
              inf.innerHTML=aj.responseText;
             }
        }
        aj.send(null);
    }

 

分享到：
| shopcart10的经典代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics