Ajax原生实例

来源：互联网发布：苹果手机能编程吗编辑：程序博客网时间：2024/06/06 12:38

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function info() {
//1.创建ajax核心对象xmlhttp
//获取实习ajax技术的核心对象xmlhttp
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

//2.创建回调函数
/*
应用:
回调函数体,是我们真正写ajax核心业务的地方
*/
//xmlhttp.onreadystatechange:表示一个回调函数,指的是函数体里面的内容,在执行完后台,才执行
xmlhttp.onreadystatechange = function() {
//xmlhttp.readyState:请求的状态码码值为4表示请求成功
//xmlhttp.status:响应的状态码码值为200为响应成功
//下面的if表示,只有在请求成功,并且响应也成功的情况下,回调函数执行
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//xmlhttp.responseText:表示回调函数的返回值
//就是后台pw.print("aaaaaaa");里面的内容
var data = xmlhttp.responseText;
//alert(data);
document.getElementById("msg").innerHTML = data;
}
}

//3.设置请求参数
/*
open方法为设置请求参数:
参数1:表示请求方式
参数2:请求的后台路径
参数3:表示设置同步或是异步
true:执行ajax的过程中,不耽误下面alert的执行
异步操作,两根线程
false:执行完ajax,alert才执行,按照代码从上向下的顺序,上面的代码执行完毕之后,下面的代码才执行
同步操作,一根线程

*/
xmlhttp.open("GET", "myServlet1.do", false);

//4.发送请求
//表示发送请求
xmlhttp.send();

alert(123);

}
</script>
</head>
<body>
<button onclick="info()">点击</button>
<br />
<br />
<span id="msg"></span>
</body>
</html>

阅读全文

0 0