1.原生js写法
步骤:
1.html页面或jsp页面中触发某个事件,调用js方法
2.编写js方法:
a. 创建XMLHttpRequest对象
(1) ie浏览器
(2)非ie浏览器
b.调用open方法
参数一: 提交的方式
get/post
参数二:提交到服务器的url
参数三:true 异步,false同步
get提交方式: xmlHttpRequest.open("get","xxxServlet",true);
post提交方式: xmlHttpRequest.open("post","xxxServlet?name=hctrl",true);
注意: get提交方式,提交的参数写在send方法中,post提交方式参数卸载open方法中
c.给XMLHttpRequest对象注册onreadystatechange事件,判断readyState的值是4,status的值是200,
然后获取服务端传递回来的xml或json或文本,然后dom编程更改html页面或jsp页面的局部内容
d.如果post提交,还要添加消息头
xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
e.调用send方法发送请求
get方式: xmlHttpRequest.send(null);
post方式: xmlHttpRequest.send(name=value&name1=value1...);post方式传数据到服务器用send方式事项
get方式传送数据到服务的用法:
xmlHttpRequest.open("get","xxxServlet?name=value&name1=value1",true);
实例代码:
login.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="js/login.js"></script>
</head>
<body>
<div align="center">
<table border="1" style="border-collapse: collapse">
<tr>
<td>键盘</td>
<td id="td1">详细信息</td>
</tr>
<tr>
<td>鼠标</td>
<td id="td2">详细信息</td>
</tr>
</table>
</div>
</body>
</html>login.js
var xmlHttpRequest;
window.onload=function(){
alert(111);
func1();
//func2();
};
function func1(){
var td1_ele = document.getElementById("td1");
td1_ele.onclick=(function(){
func3();
});
}
function func3(){
//1.创建XMLHttpRequest对象
createObj();
//2.调用open方法
xmlHttpRequest.open("post","showInfoServlet",true);
xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
//3.注册事件
xmlHttpRequest.onreadystatechange=function(){
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var div1_ele = document.getElementById("td1");
alert(xmlHttpRequest.responseText);
div1_ele.innerHTML=xmlHttpRequest.responseText;
}
};
//发送请求
xmlHttpRequest.send("name=hctrl");
}
function createObj(){
if(window.XMLHttpRequest){
//非ie浏览器
xmlHttpRequest=new XMLHttpRequest();
}else{
//ie浏览器
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
}showInfoServlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取js传递过来的参数
String name = request.getParameter("name");
//设置返回值类型
response.setContentType("text/html;charset=utf-8");
//创建输出流
PrintWriter out = response.getWriter();
out.print(name);
out.flush();
out.close();
}
