ajax新手学习

最新推荐文章于 2022-03-31 00:48:14 发布

life4what

最新推荐文章于 2022-03-31 00:48:14 发布

阅读量161

点赞数

分类专栏： JQuery 文章标签： AJAX JQuery

本文链接：https://blog.csdn.net/qq_36453423/article/details/85165710

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

-------------------------------------------------此文仅为我本人的学习笔记，不喜勿喷。---------------------------------------

AJAX小测试

以下为HTML页面代码

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX学习测试</title>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
	function loadXML() {
		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");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4
					&& xmlhttp.status == 200) {
				document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST", "servlet", true);
		xmlhttp.setRequestHeader("Content-type",
				"application/x-www-form-urlencoded");//添加浏览器响应头
		xmlhttp.send("fname=Bill&lname=Gates");
	};
</script>
</head>
<body>

	<div id="myDiv">
		<h2>通过 AJAX 改变文本</h2>
	</div>
	<button id="b01" type="button" onclick="loadXML()">改变内容</button>

</body>

</html>

以下为Servlet页面代码

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/servlet")
public class servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public servlet() {
		super();
		// TODO Auto-generated constructor stub
	}

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

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("utf-8");
		System.out.println("进入到servlet");
		String fname=request.getParameter("fname");
		String lname=request.getParameter("lname");
		System.out.println("接收到的fname="+fname);
		System.out.println("接收到的lanme="+lname);
		response.getWriter().write("<h2>我是servlet传来的信息</h2>");
	}

}

运行程序
在这里插入图片描述

点击之后
在这里插入图片描述

接下来进行各个重要函数解析

参考自W3schhol教程

检查浏览器是否支持xmlhttpRequest对象

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");
  }

open方法、send方法、setRequestHeader方法

open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置,例如上述例子servlet所在位置
async：true（异步）或 false（同步）

send(string) 将请求发送到服务器。
string：仅用于 POST 请求

setRequestHeader(header,value)向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值

onreadystatechange 事件

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪.