一.什么是Ajax?
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术.不通过刷新页面既可以与服务器进行通信。
1.XMLHttpRequest
1)open("method","url") 建立对服务器的调用
2)send(content)向服务器发送请求
3)onreadystatechange 每个状态改变都会触发这一事件，通常调用一个函数
4)readyState请求状态：0-未初始化，1-正在加载，2-已经加载，3-交互中，4-完成
5)responseTest：服务器响应
6)status:服务器的Http状态码
实例练习：
实现点击姓名链接显示链接到的文本内容到原页面，不跳转页面。
huan.html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
姓名：马小欢
年龄：21
学历：大学本科
</body>
</html>
ming.html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
姓名：小明
年龄：22
学历：大学本科
</body>
</html>
yun.html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
姓名：赵云
年龄：25
学历：研究生
</body>
</html>
1.用原生方法实现：index_1.jsp代码：
<%--
Created by IntelliJ IDEA.
User: pc
Date: 17-4-21
Time: 下午12:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script>
<title>Title</title>
<script type="text/javascript">
$(function () {
$("a").click(function () {
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200 || request.status === 304) {
$(".html_").html("");
$(".html_").append(request.responseText);
}
}
}
return false;
});
});
</script>
<title>Title</title>
</head>
<body>
<h1>学生信息：</h1>
<ul>
<li><a href="./html_a/huan.html">马小欢</a></li>
<li><a href="./html_a/yun.html">赵云</a></li>
<li><a href="./html_a/ming.html">小明</a></li>
</ul>
<h1 class="html_"></h1>
</body>
</html>
结果：
点击小明名称
2.load方法：
load(url,[data],[callback]) 将远程的HTML插入到DOM中
url:请求页面的url地址
data:发送到key/value数据
callback:请求完成时的回调函数
2.load方法实现：index_1.jsp代码：
<%--
Created by IntelliJ IDEA.
User: pc
Date: 17-4-21
Time: 下午12:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script>
<title>Title</title>
<script type="text/javascript">
$(function () {
$("a").click(function () {
var url = this.href;
var time ={"time":new Date()}
$(".html_").load(url,time);
return false;
});
});
</script>
<title>Title</title>
</head>
<body>
<h1>学生信息：</h1>
<ul>
<li><a href="./html_a/huan.html">马小欢</a></li>
<li><a href="./html_a/yun.html">赵云</a></li>
<li><a href="./html_a/ming.html">小明</a></li>
</ul>
<h1 class="html_"></h1>
</body>
</html>
2.$.get $.post方法：
2.get方法 .post方法 实现：index_1.jsp代码：
<%--
Created by IntelliJ IDEA.
User: pc
Date: 17-4-21
Time: 下午12:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script>
<title>Title</title>
<script type="text/javascript">
$(function () {
$("a").click(function () {
var url = this.href;
var time = {"time": new Date()}
$.post(url, time, function (data) {
var name = $(data).find("name").text();
var age = $(data).find("age").text();
var email = $(data).find("email").text();
$(".html_").html("");
$(".html_").append("<h2>姓名：" + name + "性别：" + age + "邮箱：" + email);
});
return false;
});
});
</script>
<title>Title</title>
</head>
<body>
<h1>学生信息：</h1>
<ul>
<li><a href="./xml_ajax/huan.xml">马小欢</a></li>
<li><a href="./xml_ajax/yun.xml">赵云</a></li>
<li><a href="./xml_ajax/ming.xml">小明</a></li>
</ul>
<h1 class="html_"> </h1>
</body>
</html>
文章文集：JavaEE--学习笔记
网友评论