您的位置：首页 > 其它

使用ajax技术无刷新页面

2012-12-03 22:53 656 查看

一：       首先看个小例子（通过GET方式进行无刷新获取服务端的响应数据）

<script
type="text/javascript"
language="javascript">
    var xmlHttpRequest=null;
    function ajaxSubmit()
    {   //获取文本输入框的值
       var v1=document.getElementById("NUM1").value;
       var v2=document.getElementById("NUM2").value;
       if(window.ActiveXObject)
// IE浏览器
       {
           xmlHttpRequest =
new ActiveXObject("Microsoft.XMLHTTP");
       }
       elseif (window.XMLHttpRequest)
//除IE外的其他浏览器实现
       {
       xmlHttpRequest=new XMLHttpRequest();
       }

       if(null != xmlHttpRequest)
       {
          //GET是提交的方式（注意这边要大写,POST也一样） ajaxServlet是你要关联的无刷新的服务端的servlet，true是设置你是否要进行异步
       xmlHttpRequest.open("GET", "ajaxServlet?v1="+v1+"&v2="+v2,true);
//注意这边使用的是GET方式进行提交的时候，我们要传递参数时要写在url后面
        //关联好ajax的回调函数
       xmlHttpRequest.onreadystatechange=ajaxCallBack;
       xmlHttpRequest.send(null);

       }

       function ajaxCallBack()
       {
       if(xmlHttpRequest.readyState == 4)
       {
           if(xmlHttpRequest.status == 200)
           {
             //获取服务端的数据

var responseText=xmlHttpRequest.responseText;
              document.getElementById("div1").innerHTML=responseText;
           }
       }

       }
     }

    </script>
</head>

<body>
    <input
type="button"
value="get content from server"
onclick="ajaxSubmit();"><br>
    <input
type="text"
name="num1"
id="NUM1"><br/>
    <input
type="text"
name="num2"
id="NUM2"><br/>
    <div
id="div1"></div>
</body>

ajaxServlet.java代码
public class ajaxServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

   throws ServletException, IOException {

  response.setContentType("text/html;charset=utf-8");

  request.setCharacterEncoding("utf-8");

  PrintWriter out = response.getWriter();

  System.out.println("这是doget方式的doget invoke");

  String num1=request.getParameter("v1");

  System.out.println(num1);

  String num2=request.getParameter("v2");

  System.out.println(num2);

  int number1 = Integer.valueOf(num1);

  int number2 = Integer.valueOf(num2);



  String sum = String.valueOf(number1 + number2);  //将两个文本框的数字进行相加，输出



  out.println(sum);

  out.flush();

  out.close();



}

}

二：     小例子2（ajax通过post方式进行无刷新获取服务端的响应数据）

ajax.jsp代码：

<script
type="text/javascript"
language="javascript">
    var xmlHttpRequest=null;
    function ajaxSubmit()
    {
       var v1=document.getElementById("NUM1").value;
       var v2=document.getElementById("NUM2").value;
       if(window.ActiveXObject)
// IE浏览器
       {
           xmlHttpRequest =
new ActiveXObject("Microsoft.XMLHTTP");
       }
       elseif (window.XMLHttpRequest) //除ie外的浏览器
       {
       xmlHttpRequest=new XMLHttpRequest();
       }

       if(null != xmlHttpRequest)
       {
       xmlHttpRequest.open("POST",
"ajaxServlet",true);
//这边用post方式时，我们传的参数不要写在url后面，因为post和get的提交请求的方式是不同的
       xmlHttpRequest.onreadystatechange=ajaxCallBack;
       // 使用post方式提交，必须要加上如下一行
       xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       xmlHttpRequest.send("v1="+v1+"&v2="+v2);
//使用post方式时，我们要传的参数要写在send方法中

       }

       function ajaxCallBack()
       {
       if(xmlHttpRequest.readyState == 4)
       {
           if(xmlHttpRequest.status == 200)
           {
              var responseText=xmlHttpRequest.responseText;
              document.getElementById("div1").innerHTML=responseText;
           }
       }
       }
    }
    </script>
</head>

<body>
    <input
type="button"
value="get content from server"
onclick="ajaxSubmit();"><br>
    <input
type="text"
name="num1"
id="NUM1"><br/>
    <input
type="text"
name="num2"
id="NUM2"><br/>
    <div
id="div1"></div>
</body>

ajaxServlet.java代码
public class ajaxServlet extends HttpServlet {

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp)

   throws ServletException, IOException {

  // TODO Auto-generated method stub



  resp.setContentType("text/html;charset=utf-8");

  req.setCharacterEncoding("utf-8");

  PrintWriter out = resp.getWriter();

  System.out.println("这是dopost方式的dopost invoke");

  String num1=req.getParameter("v1");

  System.out.println(num1);

  String num2=req.getParameter("v2");

  System.out.println(num2);

  int number1 = Integer.valueOf(num1);

  int number2 = Integer.valueOf(num2);



  String sum = String.valueOf(number1 + number2);



  out.println(sum);

  out.flush();

  out.close();



}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航