Ajax的简单介绍及开发5步骤

最新推荐文章于 2024-07-26 00:00:00 发布

暴力飞机

最新推荐文章于 2024-07-26 00:00:00 发布

阅读量558

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_50639300/article/details/123958676

版权

AJAX 异步请求 XMLHttpRequest 局部刷新 AjaxServlet

关键词由CSDN通过智能技术生成

1. AJAX介绍

AJAX 是一种用于创建快速动态网页的技术。

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

AJAX 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

1. AJAX优点

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好

3.AJAX工作原理

4.开发步骤（5）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax开发步骤</title>
<script type="text/javascript">
	var xmlhttp=null;
function sendAjax(){
	//1.获取 核心 XMLHttpRequest对象  xmlhttp=new XMLHttpRequest();

	if (window.XMLHttpRequest)
	  {// code for all new browsers
	  xmlhttp=new XMLHttpRequest();
	  }
	else if (window.ActiveXObject)
	  {// code for IE5 and IE6
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	
	//2.设置回调函数 处理服务器响应的数据
	 xmlhttp.onreadystatechange=callback;
	//3.设置请求方式及路径url
	var url="http://localhost:8080/ajax/AjaxServlet";
	  xmlhttp.open("GET",url,true);
	  //4.真正向服务器发送请求
	  xmlhttp.send(null);
}
//回调函数
function callback(){
	if (xmlhttp.readyState==4)
	  {// 4 = "loaded"
	  if (xmlhttp.status==200)
	    {// 200 = OK
	    //5.得到响应数据
	    alert(xmlhttp.responseText)
	    }
	  else
	    {
	    alert("Problem retrieving XML data");
	    }
	  }

}
	

</script>
</head>
<body>
<input type="button" value="按钮" onclick="sendAjax()">
</body>
</html>

服务器端

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


public class AjaxServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//	System.out.println("接收到了");
//		通过response获取输出流响应数据到浏览器
		response.getWriter().write("hello  ajax");
	}

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

}