-
- AJAX介绍
AJAX 是一种用于创建快速动态网页的技术。
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
AJAX 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
-
- 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);
}
}