17.JavaWeb基础 Ajax（局部刷新）

最新推荐文章于 2022-04-16 00:19:47 发布

初心始终钰

最新推荐文章于 2022-04-16 00:19:47 发布

阅读量2.5k

点赞数

分类专栏： JavaWeb基础

本文链接：https://blog.csdn.net/qq_16430735/article/details/38586495

版权

JavaWeb基础专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Ajax技术主要用于实现页面的局部刷新，提升操作性能。它依赖于XMLHttpRequest对象，通过异步请求避免整体页面刷新。文章介绍了Ajax的基本概念、XMLHttpRequest对象的readyState属性以及Ajax如何返回普通数据和XML数据。

摘要由CSDN通过智能技术生成

Ajax技术主要完成页面的局部刷新，通过Ajax技术可以使程序在每次提交的时候不用进

行页面的整体刷新，从而提升操作的性能，在Ajax中主要是依靠XMLHttpRequest对象完成

操作。

最典型的例子就是：Goole Map。使用了大量的Ajax技术。

一.Ajax简介

Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）并不是一项

新的技术，它产生的主要目的是为了页面的局部刷新。每当用户向服务器端发送请求的时候，哪怕

需要一点点简单的更新局部内容，服务器端都会将一个整体的页面进行一次刷新，并重新生成代码

这样程序的性能就会有所降低。如果采用了Ajax技术，就可以实现局部的内容变更，从而使处理的

性能比前者高很多。

Ajax本身是一门综合性的技术，其主要应用包括了HTML、JavaScript、XML、DOM、XMLHttp

-Request等页面技术，但是在这些之中，最重要的是XMLHttpRequest对象。

二.XMLHttpRequest对象

在Ajax中主要通过XMLHttpRequest对象处理发送异步请求和回应的。

XMLHttpRequest对象的属性
属性	描述
onreadystatechange	用于指定当readyState改变时的回调函数
readyState	返回当前请求状态，只读
responseBody	回应信息正文以unsigned byte数组形式返回，只读
responseStream	以Ado Stream对象的形式返回响应信息，只读
responseText	接收以普通文本返回的数据，只读
responseXML	接收以XML文本返回的数据，只读
status	返回当前请求的http状态码，只读
statusText	返回当前请求的http响应行代码，只读

readyState 一共有5种取值，分别介绍一下：

0：请求没发出（open()方法之前）

1：请求已经建立但没发出（send()方法之前）

2：请求已经发出正在处理之中（到这里就可以从响应信息得到内容头部）

3：请求已经从处理，正在接收服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应。

4：响应已经完成，可以访问服务器响应并使用它。

XMLHttpRequest的方法
方法	描述
abort()	取消当前所发送的请求
getAllResponseHeaders()	取得所有的HTTP头信息
getResponseHeader()	取得一个指定的HTTP头信息
open()	创建一个HTTP请求，并指定请求模式（get、post）
send()	将创建的请求发送到服务器端，并接收回应信息
setRequestHeader()	设置一个指定请求的HTTP头信息

三.Ajax返回普通数据

返回数据的页面：

Hello Ajax

Ajax异步处理接受：

<!DOCTYPE html>
<html>
<head>
<title>a1.html</title>



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


</head>

<body>

	<script type="text/javascript" lang="JavaScript">
		var xmlHttp;

		//1.创建XMLHttpRequest
		function createXMLHttp() {

			//使用的是FireFox
			if (window.XMLHttpRequest) {

				xmlHttp = new XMLHttpRequest();

				//使用的是IE内核		
			} else {

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

			}

		}

		function showMsg() {

			createXMLHttp();

			//2.open()
			xmlHttp.open("POST", "content.html");

			//3.设置请求完成之后的回调函数
			xmlHttp.onreadystatechange = showMsgCallback;

			//4.send()
			xmlHttp.send(null);

		}

		//回调函数
		function showMsgCallback() {

			//数据返回完毕
			if (xmlHttp.readyState == 4) {

				//HTTP操作正常	
				if (xmlHttp.status == 200) {

					var text = xmlHttp.responseText;

					document.getElementById("msg").className = "给你一个新的名称";

					document.getElementById("msg").innerHTML = text;

				}

			}

		}
	</script>

	<input type="button" value="调用Ajax" οnclick="showMsg()">
	<p>
	<div id="msg" style="font-size: 20px;font-weight: bold;"></div>
	</p>


</body>
</html>

由于有一段代码document.getElementById("msg").className = "给你一个新的名称"

打开Firebug：

看到了div中的添加了class。

四.Ajax返回XML数据

在XMLHttpRequest对象中可以调用responseXML()方法接收一组返回的XML数据，这些返

回的XML数据可以动态生成（利用JDOM工具将数据库中的数据变为XML文件），也可以直接读取一

个XML文件，当客户端接收到读取的XML文件之后，可以通过DOM解析的方式对数据进行操作。

读取的XML文件：

<?xml version="1.0" encoding="UTF-8"?>
<message>

	<me>

		<name>CaMnter</name>
		<everytime>Save you from anything 07</everytime>

	</me>

	<she>

		<name>07</name>
		<everytime>Never remember me</everytime>

	</she>

</message>

Ajax异步处理：

<!DOCTYPE html>
<html>
<head>
<title>a2.html</title>



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


</head>

<body>

	<script type="text/javascript" lang="JavaScript">
		var xmlHttp;

		//1.创建XMLHttpRequest
		function createXMLHttp() {

			if (window.XMLHttpRequest) {

				xmlHttp = new XMLHttpRequest();

			} else {

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

			}

		}

		function sendRequest() {

			createXMLHttp();

			//2.open()
			xmlHttp.open("POST", "msg.xml");

			//3.设置请求完成之后的回调函数
			xmlHttp.onreadystatechange = getXMLContent;

			xmlHttp.send(null);

		}

		function getXMLContent() {

			if (xmlHttp.readyState == 4) {

				if (xmlHttp.status == 200) {

					var xmlDoc = xmlHttp.responseXML;

					var message = xmlDoc.getElementsByTagName("message");

					var me = message.item("me");

					var she = message.item("she")

					document.getElementById("me_name").innerHTML = me
							.getElementsByTagName("name")[0].firstChild.nodeValue;
					document.getElementById("me_everytime").innerHTML = me
							.getElementsByTagName("everytime")[0].firstChild.nodeValue;
					document.getElementById("she_name").innerHTML = me
							.getElementsByTagName("name")[1].firstChild.nodeValue;
					document.getElementById("she_everytime").innerHTML = me
							.getElementsByTagName("everytime")[1].firstChild.nodeValue;

				}

			}

		}
	</script>

	<input type="button" value="显示" οnclick="sendRequest()">
	<p>
	<div id="me_name" style="font-size: 20px;font-weight: bold;"></div>
	<div id="me_everytime" style="font-size: 20px;font-weight: bold;"></div>
	</p>
	<p>
	<div id="she_name" style="font-size: 20px;font-weight: bold;"></div>
	<div id="she_everytime" style="font-size: 20px;font-weight: bold;"></div>
	</p>


</body>
</html>