一、了解Ajax
1.1 什么是Ajax？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个页面。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
二、Ajax的工作原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
AJAX是基于现有的Internet标准，并且联合使用它们：
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)、JSON
三、Ajax get/post实例
3.1 Ajax开发步骤
- 建XMLHTTPRequest对象
- 设置onreadystatechange回调函数（回调函数中的参数data是用来跨域获取数据的）
- open() 打开连接
- send() 发送请求
注意：回调函数中的data参数，在进行跨域的时候，我们需要获取对应接口的数据并对数据进行相应的处理，那么就可以通过接口所提供的回调函数通过传参来获取数据。
3.2 get实例
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax.Get</title>
</head>
<body>
<script type="text/javascript">
//1.创建异步XMLHttpRequest对象
function createXMLHttpRequest() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
var xhr = createXMLHttpRequest();
//2.设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var responseText = xhr.responseText;
var jsObject = eval("(" + responseText + ")");
console.log(jsObject.flag);
console.log(jsObject.msg);
}
};
//3.打开连接
xhr.open("get", "${pageContext.request.contextPath}/test?username=ziph&password=123456&id=" + Math.random(), true);
//4.发送参数
xhr.send();
</script>
</body>
</html>
3.3 post实例
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax.post</title>
</head
最低0.47元/天 解锁文章
1187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
