ajax的使用

来源：互联网发布：java写入html文件编辑：程序博客网时间：2024/06/07 17:01

网页上面随处可见ajax,说简单点就是局部刷新，浏览器不会有跳跃的感觉。有时还会对表单做验证如“检验用户名是否存在”，还有用途比较广泛的文件上传等。在此基础上传递参数也是比不可少的。传递参数可以使地址栏重写也可以使用send传递，使用地址栏重写很有可能出现乱码。下面的博客就针对这个问题做一下讲解。这里的例子就说一个比较简单的，就提供个按钮和一个div,点击按钮就在div里显示图片。

1.用来显示按钮和div的jsp

<body><div id="picture"></div><input type="button" value="显示图片" onclick="showImg()" /></body>

2.编写ajax获取另一个页面的图片，这里首先要判断浏览器使用下面的代码就OK了

var xmlHttpRequest;function createXMLHttpRequest() {//判断浏览器类型if (window.XMLHttpRequest) {xmlHttpRequest = new XMLHttpRequest(); //火狐} else {xmlHttpRequest = new ActiveXObject(Microsoft.XMLHTTP); //IE}}

接下来就是提交请求以及函数的回调了

function showImg(){ createXMLHttpRequest();       xmlHttpRequest.open("POST", "pic.jsp", true);       xmlHttpRequest.onreadystatechange = processResponse;  //回调函数       //设置消息头，因为传递的参数长度可能较大，并设置编码格式为UTF-8       xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");       //使用send传参       xmlHttpRequest.send("filename=潘玮柏&type=image");  }function processResponse() {      if (xmlHttpRequest.readyState == 4) {          if (xmlHttpRequest.status == 200) {              var text = xmlHttpRequest.responseText; //取得返回的内容              document.getElementById("picture").innerHTML = text;          }      }  }

3.含有图片的jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><%      String filename=request.getParameter("filename");      String type=request.getParameter("type");      System.out.println(filename+","+type);          %>    <img src="pwb.jpg" alt='<%=filename%>' /> </body></html>

运行效果如下：