Ajax 技术在 JavaWeb 应用中随处可见,比如购物车中根据商品数量及时更新等应用,那么我们今天就来说说 Ajax 的一些小应用!

  Ajax 技术也就是允许浏览器与服务器通信而无需刷新当前页面,数据在客户端和服务端独立传输,而不是以前客户端向服务端发送一个请求,服务器返回整个页面,如此反复。完成 Ajax 请求就需要使用 XMLHttpRequest 类的方法,下面我们先开始介绍 XMLHttpReqest 的 API

一、XMLHttpRequest API

  1.1 XMLHttpRequest 方法

    1. open("method", "url") -- -- 建立对服务器的调用,Method 参数可以是 get,也可以是 post,url 可以是相对的也可以是绝对的(准备发送请求)

        2. send("content")  -- -- 向服务器发送请求(发送的内容)

        3. setRequestHeader(“header”, "value") -- -- 把指定的首部设置为所提供的值,在设置任何首部之前必须先调用 open() 方法

  1.2 XMLHttpRequest 属性

    1. OnReadystateChange  -- -- 每个状态改变都会触发这个时间处理器,通常是 JS 函数(改事件由服务器触发)

      1.2.1 Ajax 执行过程中,服务器会通知客户端当前的通信状态,依靠 readyState 属性实现,改变 readryState 属性是服务器对客户端连接操作的一种方式,每次 readyState 属性改变都会触发 onReadyStateChange  事件

    2. readyState -- -- 请求的状态,有 5 个可取值 0(未初始化), 1(正在加载), 2(已经加载), 3(交互中), 4(已经完成)

    3. responseText -- -- 服务器的响应,表示为一个串

    4. responseXML -- -- 服务器的响应,表示为XML 可以解析为 DOM 对象

    5. status -- -- 服务器的 Http 状态码(200 对应 ok,404 对应 notFound)

 二、Ajax 小案例(使用 JS 实现)

  使用 Ajax 实现如下案例,分别用三种数据传输格式(Html、XML、JSON)

  2.1  案例演示

  

  2.2 Html 传输格式

    由于返回的数据格式为 html 所以利用函数 innerHtml 插入标签内即可。

    htmlTest.jsp 代码如下

 <%--
Created by IntelliJ IDEA.
User: yin‘zhao
Date: 2017/12/04
Time: 23:23
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>HtmlPage</title>
<script type="text/javascript">
window.onload = function () {
// 获取 a 标签
var aTags = document.getElementsByTagName("a");
// 为每一个 a 标签添加点击事件
for (var i = 0; i < aTags.length; i++) {
aTags[i].onclick = function () {
// 新建 XMLHttpRequest 对象
var request = new XMLHttpRequest();
// 定义传输方法为 GET
var method = "GET";
// 定义 URL
var url = this.href + "?time=" + new Date();
// 发送请求
request.open(method, url);
// 不需要传输数据,设置传输内容为 null
request.send(null);
// 处理响应
request.onreadystatechange = function () {
// 如果响应已经完成
if (request.readyState == 4) {
// 如果服务器状态码正确
if (request.status == 200 || request.status == 304) {
// 那么就将响应字段加入预先定义好的 Html 中
document.getElementById("htmlTest").innerHTML = request.responseText;
}
}
}
// 超链接点击事件返回 false,取消其默认事件的触发
return false;
}
}
}
</script>
</head>
<body>
<ul>
<li><a href="yy.html">YY Page</a></li><br>
<li><a href="SSPage.html">SS Page</a></li><br>
<li><a href="YYSSPage.html">YS Page</a></li><br>
</ul>
<div id="htmlTest"></div>
</body>
</html>

    各超链接所对应的页面(SSPage.jsp、yy.html、YYSSPage.html)

 <h3>SS</h3>
<b>ssPage please go to</b>
 <h3>YY</h3>
<b>yyPage please go to</b>
 <h3>YS</h3>
<b>ysPage please go to</b>

  2.3 XML 传输格式

    传输格式为 XML 需要在 jsp 页面中解析为 XML 获取标签内容然后加入页面

    xmlTest.jsp

 <%--
Created by IntelliJ IDEA.
User: yin‘zhao
Date: 2017/12/05
Time: 8:41
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>XMLPage</title>
<script type="text/javascript">
window.onload = function () {
var aTag = document.getElementsByTagName("a");
for (var i = 0; i < aTag.length; i++) {
aTag[i].onclick = function () {
var url = this.href + "?time=" + new Date();
var method = "GET";
var request = new XMLHttpRequest(); request.open(method, url);
request.send(null);
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200 || request.readyState == 304) {
// 获得返回数据的 XML 格式
var result = request.responseXML;
// 获得返回内容的 name 标签
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
// 获得返回内容的 website 标签
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
// 创建 h3 标签
var hNode = document.createElement("h3");
// 将 website 内容加入到 h3 标签内
hNode.appendChild(document.createTextNode(name)); var bNode = document.createElement("b");
bNode.appendChild(document.createTextNode(website)); var divNode = document.getElementById("details");
// 每次点击的时候首先将其内容清空,在加入对应的标签
divNode.innerHTML = "";
divNode.appendChild(hNode);
divNode.appendChild(bNode)
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<ul>
<li><a href="yy.xml">YYPage</a></li><br><br>
<li><a href="ss.xml">SSPage</a></li><br><br>
<li><a href="ys.xml">YSPage</a></li><br><br>
</ul>
<div id="details"></div>
</body>
</html>

    各超链接所对应的 xml 文件(ss.xml、yy.xml、ys.xml)

 <?xml version="1.0" encoding="UTF-8" ?>
<details>
<name>ss</name>
<website>ss.com</website>
</details>
 <?xml version="1.0" encoding="UTF-8" ?>
<details>
<name>yy</name>
<website>yy.com</website>
</details>
 <?xml version="1.0" encoding="UTF-8" ?>
<details>
<name>ys</name>
<website>ys.com</website>
</details>

  2.4 JSON 传输格式

    传输数据格式为 JSON 首先在页面需要将其转换为 JSON 格式

    jsonTest.jsp

     <%--
Created by IntelliJ IDEA.
User: yin‘zhao
Date: 2017/12/04
Time: 23:23
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JSONPage</title>
<script type="text/javascript">
window.onload = function () {
var aTags = document.getElementsByTagName("a"); for (var i = 0; i < aTags.length; i++) {
aTags[i].onclick = function () {
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href + "?time=" + new Date();
request.open(method, url);
request.send(null); request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
var result = request.responseText;
// 转换为 JSON 格式,将字符串
var jsonCon = eval("(" + result + ")");
// 获取 name 和 website 节点值
var name = jsonCon.person.name;
var website = jsonCon.person.website;
// 创建新的 html 节点
var hNode = document.createElement("h3");
hNode.appendChild(document.createTextNode(name));
var bNode = document.createElement("b");
// 给新建的节点添加子节点,并为新的子节点添加内容
bNode.appendChild(document.createTextNode(website)); var divNode = document.getElementById("jsonTest");
// 清空 div 节点中的内容
divNode.innerHTML = "";
// 添加子节点
divNode.appendChild(hNode);
divNode.appendChild(bNode);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<ul>
<li><a href="yy.json">YY Page</a></li><br>
<li><a href="ss.json">SS Page</a></li><br>
<li><a href="ys.json">YS Page</a></li><br>
</ul>
<div id="jsonTest"></div>
</body>
</html>

    各超链接所对应的 json 文件

 {
"person":{
"name":"ss",
"website":"ss.com"
}
} 
 {
"person":{
"name":"ys",
"website":"ys.com"
}
} 
{
"person": {
"name": "yy",
"website": "yy.com"
}
}

  2.5 各种传输格式的优缺点

    2.5.1 优点

      1. Html 传输格式不需要 js 解析 html 代码,可读性好,html 代码和 innerHtml 属性搭配效率高

      2. XML 是一种通用的传输格式,不必把数据强加到已经定义好的格式中,而为数据自定义合适的标记,且利用 DOM 可以完全掌握文档

      3. JSON 和 XML 相似但相比起来更加轻巧

    2.5.2 缺点

      1. 若需要使用 Ajax 更新一篇文档的多个部分则 html 不合适

      2. 当浏览器接收到较长的 XML 文档时 DOM 解析可能会很复杂

      3. JSON 的语法严谨,代码不宜读

    2.5.3 适用场景

      1. 若 application 不需要与其他程序共享数据时使用 HTML

      2. 如果数据需要重用 JSON 在性能和大小方面有优势

      3. 当远程程序未知时 XML 文档是首选

三、案例再实现(使用 JQuery 实现)

  案例效果如上,只是实现方式为 JQuery

  3.1 JQuery 中 Ajax 的 API

    1. load(url) -- -- 任何 HTML 节点都可以使用 load 方法加载 Ajax,它可以载入远程的 HTML 代码并插入 HTML 中,若需要使用部分内容则可以使用选择器(在定义 URL 的时候使用选择器)

    2. load 方法的传递方式根据 load 方法是否传递参数而定,若没有传递参数那么就是 get 请求方式,若有则为 post 请求方式

    3. 对于必须在完成加载才可以继续的操作,load() 方法提供了回调函数,该函数有三个参数,代表请求返回内容的 data,代表请求状态的 textStatus 对象和 XMLHttpRequest 对象

    4. $.get(url, args, function)  -- -- 使用 get 方式进行异步请求,data 代表返回的内容可以是 XML、Html、JSON 等数据格式;args 为 JSON 格式的传递参数;响应结束时触发回调函数,其响应结果在函数参数中

    5. $.getJSON() -- -- 对于 JSON 传输格式直接使用该方法,参数和 $.get() 方法一样

  3.2 HTML 数据传递格式

    htmlTest.jsp

 <%--
Created by IntelliJ IDEA.
User: yin‘zhao
Date: 2017/12/04
Time: 23:23
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>HtmlPage</title>
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("a").click(function () {
// 使用选择器,选择出 h3 标签部分
var url = this.href + " h3";
// 参数
var args = {"time": new Date()};
// 所有的 html 节点均可调用 load 方法将返回内容直接加入到目标标签内
$("#htmlTest").load(url, args);
return false;
});
})
</script>
</head>
<body>
<ul>
<li><a href="yy.html">YY Page</a></li><br>
<li><a href="SSPage.html">SS Page</a></li><br>
<li><a href="YYSSPage.html">YS Page</a></li><br>
</ul>
<div id="htmlTest"></div>
</body>
</html>

  3.3 XML 数据传输格式

  xmlTest.jsp

 <%--
Created by IntelliJ IDEA.
User: yin‘zhao
Date: 2017/12/05
Time: 8:41
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>XMLPage</title>
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script>
$(function () {
$("a").click(function () {
var url = this.href;
var args = {"time": new Date()}; $.get(url, args, function (data) {
// 找到 name 节点属性值
var name = $(data).find("name").text();
var website = $(data).find("website").text();
// 首先清空在添加节点,然后加入新建的节点
$("#details").empty().append("<h2>" + name + "</h2><b>" + website + "</b>");
});
return false;
})
})
</script>
</head>
<body>
<ul>
<li><a href="yy.xml">YYPage</a></li>
<br><br>
<li><a href="ss.xml">SSPage</a></li>
<br><br>
<li><a href="ys.xml">YSPage</a></li>
<br><br>
</ul>
<div id="details"></div>
</body>
</html>

  3.4 JSON 数据传输格式

  jsonTest.html

 <%--
Created by IntelliJ IDEA.
User: yin‘zhao
Date: 2017/12/04
Time: 23:23
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JSONPage</title>
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("a").click(function () {
var url = this.href;
var args = {"time": new Date()}; $.getJSON(url, args, function (data) {
var name = data.person.name;
var website = data.person.website; $("#jsonTest").empty().append("<h3>" + name + "</h3><b>" + website + "</b>");
})
return false;
})
})
</script>
</head>
<body>
<ul>
<li><a href="yy.json">YY Page</a></li><br>
<li><a href="ss.json">SS Page</a></li><br>
<li><a href="ys.json">YS Page</a></li><br>
</ul>
<div id="jsonTest"></div>
</body>
</html>

  以上这些就是我所知道有关 Ajax 的一些知识,我们可以利用以上知识实现三级联动,演示如下:

  

  写的有不好的地方还望指出,谢谢!

Ajax 学习总结的更多相关文章

  1. Ajax学习心得

    Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网 ...

  2. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  3. ajax学习之post请求步骤

    ajax学习之post请求步骤 蚣汉御豁 讼护尧 娉郐皑 磲 力豪强的虎视眈眈相信过不了 觏随迦趾 怪了灵敏儿竟然不慌不忙的也没有来找她们 缸轰诎 ?ê戆冼 跄鲅胗绩 掳戈玉孑 馀模嗷婧 ...

  4. AJAX学习前奏----JS基础加强

     AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...

  5. AJAX学习必备三本书

    <AJAX基础教程>AJAX必备图书之一.国内发行的第一本AJAX图书,也是目前最好的AJAX入门书,如果您是AJAX新手,此书是最好的入门图书.本书基本包括了实现Ajax需要了解的大部分 ...

  6. AJAX学习2

    作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正. 本文学习内容:https://www. ...

  7. [学习笔记]AJAX学习

    AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...

  8. AJAX学习小结

    12345678910 $.ajax({ "url":"", //访问路径 "data":"", // 需要传输的数据 ...

  9. Ajax学习笔记demo

    AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...

  10. Ajax学习重点总结

    1.什么是AJAX AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML). AJAX是在不重新加载整个页面的情况下,后台与服务器交换数据并更新 ...

随机推荐

  1. 在为知笔记中使用Markdown和思维导图

    为知笔记Wiz是一款很好的网摘和笔记工具,作为为知的忠实用户,我在为知收费后第一时间就购买了两年的授权,毕竟这么多年积累的资料都在为知上,我也习惯了使用Wiz来做些工作相关的笔记.为知笔记自带Mark ...

  2. C# 关闭窗体立即停止进程

    C#在关闭窗体的时候,有时线程还在后台执行,没有及时退出. 处理方案: 为Form添加FormClosing事件,加入以下语句,在退出时,杀死本进程. System.Diagnostics.Proce ...

  3. 《天书夜读:从汇编语言到windows内核编程》四 windows内核调试环境搭建

    1) 基础篇是讲理论的,先跳过去,看不到代码运行的效果要去记代码是一个痛苦的事情.这里先跳入探索篇.其实今天的确也很痛苦,这作者对驱动开发的编译与调试环境介绍得太模糊了,我是各种尝试,对这个环境的搭建 ...

  4. Shell 快速指南

    Shell 快速指南 ███████╗██╗ ██╗███████╗██╗ ██╗ ██╔════╝██║ ██║██╔════╝██║ ██║ ███████╗███████║█████╗ ██║ ...

  5. ECMAScript6词法

    ES6简介 ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,它于2015 年 6 月正式发布.ECMAScript 和 JavaScript 的关系是,前者是后 ...

  6. 《java.util.concurrent 包源码阅读》04 ConcurrentMap

    Java集合框架中的Map类型的数据结构是非线程安全,在多线程环境中使用时需要手动进行线程同步.因此在java.util.concurrent包中提供了一个线程安全版本的Map类型数据结构:Concu ...

  7. JAVA 中LinkedHashMap要点记录

    JAVA 中LinkedHashMap要点记录 构造函数中可能出现的几个参数说明如下: 1.initialCapacity 初始容量大小,使用无参构造方法时,此值默认是16 2.loadFactor ...

  8. 查看Page结构

    SQL Server存储数据的基本单元是Page,每一个Page的大小是8KB,数据文件是由Page构成的.在同一个数据库上,每一个Page都有一个唯一的资源标识,标识符由三部分组成:db_id,fi ...

  9. JS构造函数模式

    构造函数是可以创建特定类型对象的函数,可以接受参数定义函数成员.如果之前做过java比较好理解,举个例子: function exampleFunction(arg1, arg2, arg3){ th ...

  10. ORACLE 错误代码提示归集

    有时数据库出现问题,不是每次都有网络可查,所以把所有的ora系列的错误整理出来, 在最没有办法的时候,需要自己来解决,有了这些根据,问题会好办的.虽说对于数据库方面, DBA很强大,他们在遇到错误时, ...