使用ajax技术无刷新页面

最新推荐文章于 2023-09-26 21:37:18 发布

civilized

最新推荐文章于 2023-09-26 21:37:18 发布

阅读量2.7k

点赞数

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

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>

</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代码：

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>

</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();

}

}

civilized

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用ajax技术无刷新页面

一：首先看个小例子（通过GET方式进行无刷新获取服务端的响应数据）scripttype="text/javascript"language="javascript"> var xmlHttpRequest=null; function ajaxSubmit() { //获取文本输入框的值 var v1=documen
复制链接

扫一扫