Ajax
|
ajax:asynchronous javascript and xml 异步的js和xml 特点：*异步访问服务器 *局部刷新，不需要服务器响应整个页面，只是数据，数据类型有：text、xml、json 异步交互和同步交互
ajax应用场景 ajax的优缺点 缺点： *************************************************************************************************** 1. 第一步（得到XMLHttpRequest） <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ajax1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function createXMLHttpRequest(){
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("MSxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
throw e;
}
}
}
}
window.onload=function(){ //文档加载完毕后执行
var bt=document.getElementById("bt");
bt.onclick=function(){ //给按钮的点击事件注册监听
/*
四步操作
1.创建异步对象
2.打开与服务器的连接
3.发送请求
4.给异步对象的onreadystatechange事件注册监听器
*/
var xmlHttp=createXMLHttpRequest();
xmlHttp.open("GET","<c:url value='/AServlet' />",true);
xmlHttp.send(null);//GET请求没有请求体，但也要给出，不然造成部分浏览器不能发送
//在xmlHttp对象的一个事件上注册监听器：onreadystatechange
xmlHttp.onreadystatechange=function(){ //当xmlHttp的状态发生改变时
//双重判断：判断是否为4状态(服务器响应结束)，而且还要判断是否为200(响应成功)
if(xmlHttp.readyState==4 && xmlHttp.status==200){
var content = xmlHttp.responseText;
var h1=document.getElementById("h1");
h1.innerHTML=content;
}
};
};
};
</script>
</head>
<body>
<button id="bt">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AServlet extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
response.getWriter().print("Hello,Ajax!!!");
System.out.println("Hello,Ajax!!!");
}
}发送POST请求(如果发送请求时需要带有参数，一般都用POST请求)
* open：xmlHttp.open("POST" ....); * 添加一步：设置Content-Type请求头： > xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); * send：xmlHttp.send("username=zhangSan&password=123");//发送请求时指定请求体 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajax1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
// 创建异步对象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
alert("哥们儿，您用的是什么浏览器啊？");
throw e;
}
}
}
}
window.onload = function() {//文档加载完毕后执行
var btn = document.getElementById("btn");
btn.onclick = function() {//给按钮的点击事件注册监听
/*
ajax四步操作，得到服务器的响应
把响应结果显示到h1元素中
*/
/*
1. 得到异步对象
*/
var xmlHttp = createXMLHttpRequest();
/*
2. 打开与服务器的连接
* 指定请求方式
* 指定请求的URL
* 指定是否为异步请求
*/
xmlHttp.open("POST","<c:url value='/AServlet'/>",true);
//设置Content-Type请求头
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*
3. 发送请求
*/
xmlHttp.send("username=zhangSan&password=123"); //发送请求时指定请求体
/*
4. 给异步对象的onreadystatechange事件注册监听器
*/
xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行
// 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// 获取服务器的响应结束
var text = xmlHttp.responseText;
// 获取h1元素
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
};
};
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
public void doPost(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException {
// TODO Auto-generated method stub
String username=req.getParameter("username");
resp.getWriter().print("(POST)Hello AJAX!!"+username);
System.out.println("(POST)Hello AJAX!!"+username);
} （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |