网页上面随处可见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;
}
}
}
<%@ 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>
运行效果如下：
原文链接：https://www.f2er.com/ajax/164929.html
