ajax+servlet简单实现,基础ajax

AJAX 简介

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。


AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准,并且联合使用它们:

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

variable=new XMLHttpRequest();

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)

AJAX 响应


属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。

案例点击打开链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax_demo</title>
<script>
	function loadXMLDoc() {
		var xmlhttp;
		var userName = document.getElementById("userName").value;
		var queryString = "AjaxDemo?userName="+userName;
		if (window.XMLHttpRequest) {
			//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
			xmlhttp = new XMLHttpRequest();
		} else {
			// IE6, IE5 浏览器执行代码
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("show").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST", queryString, true);
		xmlhttp.send();
	}
</script>
</head>
<body>
	<form action="#">

		<h2>获取姓名:</h2>
		<input id="userName" type="text" />
		<br>
		<div id="show" style="border-bottom-color: red;" ></div>
		<br>
		<button type="button" onclick="loadXMLDoc()">请点击</button>
	</form>
</body>
</html>

servlet文档

package cn.oneday.ajaxdemo;
/**
 * @author oneday
 */
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 AjaxDemo extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String encoding = "UTF-8";// 字符编码
		request.setCharacterEncoding(encoding);// 请求编码
		response.setContentType("text/html;charset=" + encoding);// 响应编码

		PrintWriter out = response.getWriter();
		String userName = request.getParameter("userName");
		System.out.println(userName+"hhh");
		String responseText = "UserName" + userName;
		out.println(responseText);
		out.close();

	}

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

		doGet(request, response);
	}

}

xml文档

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>ajax_demo</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <servlet>
    <!-- servlet的内部名称,自定义。尽量有意义 -->
    <servlet-name>AjaxDemo</servlet-name>
    <!-- servlet的类全名: 包名+简单类名 -->
    <servlet-class>cn.oneday.ajaxdemo.AjaxDemo</servlet-class>
</servlet>
<!-- servlet的映射配置 -->
<servlet-mapping>
    <!-- servlet的内部名称,一定要和上面的内部名称保持一致!! -->
    <servlet-name>AjaxDemo</servlet-name>
    <!-- servlet的映射路径(访问servlet的名称) -->
    <url-pattern>/AjaxDemo</url-pattern>
</servlet-mapping>
</web-app>

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax_demo</title>
<script>
	var xmlhttp;
	var userName = document.getElementById("userName").value;
	var queryString = "AjaxDemo?userName=" + userName;

	function myFunction() {
		loadXMLDoc(
				queryString,
				function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						document.getElementById("show").innerHTML = xmlhttp.responseText;
					}
				});
	}

	function loadXMLDoc(url, statechange) {
		if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 代码
			xmlhttp = new XMLHttpRequest();
		} else {// IE6, IE5 代码
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = statechange;
		xmlhttp.open("POST", url, true);
		xmlhttp.send();
	}
</script>
</head>
<body>
	<form action="#">

		<h2>获取姓名:</h2>
		<input id="userName" type="text" />
		<br>
		<div id="show" style="border-bottom-color: red;" ></div>
		<br>
		<button type="button" onclick="loadXMLDoc()">请点击</button>
	</form>
</body>
</html>




阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/one_dayR/article/details/79951606
文章标签: ajax java 异步刷新
个人分类: java经验 ajax
想对作者说点什么? 我来说一句

ajax+servlet

2010年04月28日 7KB 下载

servlet+ajax实现滑动显示分页源码

2007年09月05日 568KB 下载

没有更多推荐了,返回首页

不良信息举报

ajax+servlet简单实现,基础ajax

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭