Ajax对象怎么使用

最新推荐文章于 2024-07-28 17:16:30 发布

fwhezfwhez

最新推荐文章于 2024-07-28 17:16:30 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/fwhezfwhez/article/details/78983196

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.Ajax介绍与适用场合

Ajax就是所谓的异步javascript，能够在不重新刷新整个页面的情况下局部加载页面。

2.Ajax的创建方法

①建立js文件,fun.js，内容：

function createAjax() {
			var ajax = null;
			try {
				ajax = new ActiveXObject("microsoft.xmlhttp");//微软的ajax对象
			} catch (e1) {
				ajax = new XMLHttpRequest();//其他浏览器的ajax对象，高级ie也可使用
			}
			return ajax;
		}

②使用.ajax对象的使用往往被绑定在一个事件中,使用一般经过四个环节:

ajax.open(method,url): method选择"GET"或者"POST",url可以指向对应的servlet如"${pageContext.request.contextPath}/TimeServlet"

ajax.send(null):在GET方式下，由于参数都是放入请求行，所以发送的请求内容是空，填写null.

ajax.onreadystatechange:执行ajax请求处理结果,readyState有五个状态0-4，分别对应0-open态ajax对象打开、2-send态ajax对象发送但未到达,3-ajax经过处理后未收到，4-完成ajax请求收发,并且在完成收发后，ajax.status会置为200，所以可以根据该值判断是否成功.

ajax.onreadystatechange = function() {
		if (ajax.readyState == 4) {
			if (ajax.status == 200) {
				//成功后的处理
			}
		}

下面给出一个实例，用来局部刷新时间span.

①建立web工程，编辑index.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%
	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 'index.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">
	var baseURL="${pageContext.request.contextPath}";	
	</script>


</head>


<body>
	当前时间2:<span id="time"></span>
	<br />
	<input type="button" id="bt" value="testAjaxExistence" />
	<script type="text/javascript" src="js/funs.js"></script>
	<script type="text/javascript"src="js/action.js"></script>
</body>
</html>

②建立TimeServlet

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;


import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class TimeServlet extends HttpServlet {


	public TimeServlet() {
		super();
	}


	public void destroy() {
		super.destroy();
	}


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("Get");
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String nowStr = sdf.format(new Date());


		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(nowStr);
		pw.flush();
		pw.close();
	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {


		doGet(request, response);
	}


	public void init() throws ServletException {


	}


}

③缺失的js文件，放在了WEROOT/js下

funs.js

function createAjax() {
			var ajax = null;
			try {
				ajax = new ActiveXObject("microsoft.xmlhttp");
			} catch (e1) {
				ajax = new XMLHttpRequest();
			}
			return ajax;
		}

action.js

var bt = document.getElementById("bt");
bt.onclick = function() {
	var ajax = createAjax();
	if (ajax != null) {
		alert("存在ajax对象");
	}
	var url = baseURL + "/TimeServlet?time=" + new Date().getTime();
	ajax.open("GET", url);
	ajax.send(null);
	ajax.onreadystatechange = function() {
		if (ajax.readyState == 4) {
			if (ajax.status == 200) {
				var span = document.getElementById("time")
				span.innerHTML = ajax.responseText;
			}
		}


	};
};