2019-2020年人教统编《JavaWeb基础》第九讲——AJAX课件

合集下载

Ajax程序设计(第九讲)PPT教学课件

➢oXMLHttpRequest.send(varBody);
✓varBody: variant型, 可以是字符串,DOM树,或其他任意数
据流 2020/12/10
7
✓同步请求,则要等请求完成之后或超时后才返回;期间页面程序中断执行,没有任何响应; ✓异步请求,则立即返回,页面程序不会中断; ✓发送数据为字符串时,回应数据编码为utf-8,可以在文档类型头设置charset的字符类型; ✓发送数据为XML DOM object时, 回应数据编码,为XML中指定的编码,若没有指定,则默认为utf-8; ✓使用get请求时,或不要发送数据时,用send(null)或send() 即可.
2020/12/10
9
➢常用的HTTP状态码
✓200：OK，请求成功返回;
✓400：Bad Request，请求失败;
✓401：Unauthorized, 请求未被授权;
✓403：Forbidden，请求被禁用;
✓404：Not Found，请求数据源不存在;
✓408：Request Timeout，请求超时;
2020/12/10
8
➢3(数据传送中): 已经开始接收数据.但响应数据和
HTTP头信息不全,此时尝试获取数据会出现错误;
➢4(完成):数据接收完毕;
EX: HelloWorld(AsyncTest.html)
5. 指定请求状态改变时的事件处理句柄
XMLHttpRequest对象的readyState发生变化时，会触
true); open方法的3个参数
➢‘GET’: 定义请求的方法为get方法; ➢’service/hello_world.php’: 定义了请求的目标地址; ➢true: 定义了请求为异步请求（常省略）; 完整的open方法原型

Ajax技术PPT

Ajax工作机制图 Ajax工作机制图
浏览器客户端用户接口
Js调用调用 XML/JSON数据数据
Ajax引擎
HTTP请求
XML/JSON数据
HTTP传输
服务器客户端 Web服务器
属性存储，属性存储，后端处理，后端处理，遗留系统
Ajax工作机制图 Ajax工作机制图
浏览器客户端
用户接口用户操作
Xml属性 Xml属性
XML元素可以拥有属性。跟HTML一样，属性通常包含一些关于元素的额外信息。使用子元素还是使用属性数据既可以存储在子元素中也可以存储在属性中。应该避免使用属性么？属性不能包含多个值（子元素可以）。属性不容易扩展。属性不能够描述结构（子元素可以）。属性很难被程序代码处理。属性值很难通过DTD进行测试。
Ajax
讲师:王雨宁
Ajax概述 Ajax概述
06年google公司推出了googlemaps地图检索系统。引爆web开发的新热潮----ajax。什么是ajax？
Asynchronous JAVAScript Xml Ajax是基于服务器的页面异步处理技术。也就是改变了古老的用户请求-等待-响应这种web交互模式。
输入输出输入输出输入输出输入输出
Ajax引擎引擎用户端处理
数据数据传输数据传输数据传输数据传输数据传输
时间
传输
服务器客户端
服务器端处理服务器端处理服务器端处理
总结：显示和处理相分离一个有良心的it人总结：显示和处理相分离一个有良心的it人不二的选择。------GoogleEath开发总监. 不二的选择。------GoogleEath开发总监.

Ajax

AJAX完成验证用户名
4、编写回调的js（判断readyState，判断status，接收返回结果xmlHttp.responseText，进行处理）
function check() { // 提前先准备好验证的结果。 return idFlag; } 修改form表单，添加onsubmit拦截非法数据 <form action=“LoginServlet?status=insert" method="post" onsubmit="return check();">
AJAX完成验证用户名
2、编写js操作（定义xmlHttp，编写创建方法，固定的4个步骤调用）
function checkid(userid) { // 1：创建核心对象 createXMLHttp(); // 2：设置提交方式和提交路径。 xmlHttp.open("post",“LoginServlet? status=checkid&userid="+userid); // 3：设置回调函数，类似一个事件，当Servlet返回数据后，执行checkidCallback方法。 xmlHttp.onreadystatechange= checkidCallback; // 4：提交 xmlHttp.send(); } function checkidCallback () { } </script>
9.1 Ajax介绍
如果可以把请求与回应改为非同步进行，也就是发送请求后，浏览器不需要苦等服务器的回应，而是让使用者对浏览器中的Web应用程序进行其他操作。当服务器处理请求并送出回应时，计算机接收到回应，再呼叫浏览器所设定的对应动作进行处理，如图9.2所示。

《JavaWeb基础》第九讲——AJAX-精41页PPT

《JavaWeb基础》第九讲——AJAX精
1、战鼓一响，法律无声。——英国 2、任何法律的根本；不，不成文法本身就是讲道理 ……法律，也 ----即明示道理。— —爱·科克
3、法律是最保险的头盔。——爱·科克 4、一个国家如果纲纪不正，其国风一定颓败。—— 塞内加 5、法律不能使人人平等，但是在法律面前人人是平等的。 ——波洛克
41、学问是异常珍贵的东西，从任何源泉吸收都不可耻。——阿卜·日·法拉兹
42、只有在人群中间，才能认识自己。——德国
43、重复别人所说的话，只需要教育；而要挑战别人所说的话，则需要头脑。—— 玛丽·佩蒂博恩·普尔
44、卓越的人一大优点是：在不利与艰难的遭遇里百折不饶。——贝多芬

《Ajax教程之一》课件

02
Ajax基础知识
XMLHttpRequest对象
XMLHttpRequest对象用于在后台与服务器交换数据。
它提供了一种方法，可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。
XMLHttpRequest对象可以读取从服务器返回的数据，并将这些数据显示在网页上。
发送请求
Ajax的应用场景
要点一
总结词
Ajax适用于需要频繁与服务器交互的网页应用，如动态表单验证、实时搜索、聊天室、在线编辑器等。
要点二
详细描述
在动态表单验证中，Ajax可以用于实时验证用户输入的数据，提高表单提交的效率和用户体验。实时搜索中，Ajax 可以实现动态搜索结果，提高搜索的准确性和效率。在聊天室中，Ajax可以实现实时更新聊天内容，提高聊天的实时性和用户体验。在线编辑器中，Ajax可以实现实时保存和预览功能，提高编辑的效率和用户体验。
详细描述
在Ajax中，发送POST请求与发送GET请求类似，同样使用XMLHttpRequest对象的open()方法指定请求类型为"POST"，然后使用send()方法发送请求。不同的是，POST请求需要将数据包含在请求体中，可以通过设置send()方法的参数或者使用FormData接口来构建请求体。
05
总结与展望
Ajax的优势与不足
优势无需重新加载整个页面，提高用户体验；
减轻服务器负担，提高网站性能；
Ajax的优势与不足
• 实现异步数据交互，提高数据传输效率。
Ajax的优势与不足
01
不足
02
03
04
需要复杂的编程技术，学习成本高；
存在跨域问题，限制了数据交互的范围；

JavaWeb介绍精品PPT课件

访问数据库
1
用户输入
3
返回结果 Web应用
服务器
返回响应
从服务器端检索到的信息
4
浏览器发送请求到服务端,然后服务端以网页的形式向客户端返回用户请求的资源。
” 如果十年前Sun没有做Java,人们便会写.Net程序,如果他们写.Net程序,他
们就是为windows写程序,而不是为Sun的设备写程序”
B/S架构 PK C/S架构
• B/S是浏览器/服务器端,程序完全放在服务器上,不用在客户端安装任何软件,客户端只需一个浏览器即可访问应用程序,它是基于Internet的产物
• B/S中浏览器端与服务器端采用请求/响应模式进行交互
Internet
在应用服务器中布
署运行程序
IE
应用服务器
数据库服务器
” 如果十年前Sun没有做Java,人们便会写.Net程序,如果他们写.Net程序,他们就是为windows写程序,而不是为Sun的设备写程序” ——Scott McNealy(Sun首席执行官)
本课案例
• 编写第一个Servlet程序:HelloServlet
” 如果十年前Sun没有做Java,人们便会写.Net程序,如果他们写.Net程序,他们就是为windows写程序,而不是为Sun的设备写程序” ——Scott McNealy(Sun首席执行官)
第一课
JavaWeb介绍
” 如果十年前Sun没有做Java,人们便会写.Net程序,如果他们写.Net程序,他们就是为windows写程序,而不是为Sun的设备写程序” ——Scott McNealy(Sun首席执行官)
学习里程碑
SQL Base
SQL Advance SqlServer Mysql NTC SE&PM

ajax培训课件ppt

的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用
XMLHTTPREQUEST对象的属性
attribute EventListener onreadystatechange; readonly attribute unsigned short readyState; readonly attribute DOMString responseText; readonly attribute Document responseXML; readonly attribute unsigned short status; readonly attribute DOMString statusText;
XMLHTTPREQUEST对象的方法
void open(in DOMString method, in DOMString url); void open(in DOMString method, in DOMString url, in boolean async); void open(in DOMString method, in DOMString url, in boolean async, in DOMString user); void open(in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password); void setRequestHeader(in DOMString header, in DOMString value); void send(); void send(in DOMString data); void send(in Document data); void abort(); DOMString getAllResponseHeaders(); DOMString getResponseHeader(in DOMString header);

ajax课件

—高级软件人才实作培训专家! 高级软件人才实作培训专家! 发送请求--方法和属性介绍发送请求--方法和属性介绍 -利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分：
• • •
onreadystatechange 事件处理函数 open 方法 send 方法
北京传智播客教育
• • •
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的 JavaScript对象。 XMLHttpRequest在不同浏览器上的实现是兼容的在不同浏览器上的实现是兼容的，所以可以用同样在不同浏览器上的实现是兼容的的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。
北京传智播客教育
—高级软件人才实作培训专家! 高级软件人才实作培训专家! XMLHttpRequest对象初始化 XMLHttpRequest对象初始化
function createXmlHttpRequest(){ var xmlHttp; try{ //Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e){ try{ //Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){} } } return xmlHttp; }

AJAX基础介绍PPT课件

• 示例Biblioteka • 上面的 AJAX 应用程序包含一个 div 和一个按钮。
• div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：
• <!DOCTYPE html> <html> <body>
<div id="myDiv"><h2>Let AJAX change this
• 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
• XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象
• 创建 XMLHttpRequest 对象的语法： • variable=new XMLHttpRequest(); • 老版本的 Internet Explorer （IE5 和 IE6）使
GET 还是 POST？
• 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
• 然而，在以下情况中，请使用 POST 请求：
– 无法使用缓存文件（更新服务器上的文件或数据库）
– 向服务器发送大量数据（POST 没有数据量限制） – 发送包含未知字符的用户输入时，POST 比 GET
• 接下来，在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数：
• <head> <script> function loadXMLDoc() { .... AJAX script goes here ... } </script>

AJAX基础教程PPT课件

} else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP");
}设置返回ຫໍສະໝຸດ 务器返回数据类型的MIME格式http_request.overrideMimeType(“text/xml”);
} else { // 页面有问题} } else { // 信息还没有返回，等待}
16
16
.
处理服务器返回
❖ XMLHttpRequest成功返回的信息有两种处理方式：
▪ responseText该属性以字符串的形式返回响应的值 ▪ responseXML该属性将返回结果作为一个XML的
DOM文档返回，可以执行DOM处理。
3
3
.
传统Web应用同步处理
❖ 传统的Web应用采用同步交互过程。
4
4
.
传统Web应用同步处理
❖ 传统的Web应用采用同步交互过程。
5
5
.
传统Web应用同步处理
❖ 传统的Web应用中，用户单击一个链接后，待需要等待，直到另外一个页面刷新显示。
❖ 如果仅仅需要改变页面的某一部分的内容，也不得不刷新整个页面。
<h2>用户登录</h2> <hr/> <div id="msg"></div> <form name="loginform">
帐号：<input name="userid" type="text"/> <span id="userid.msg"></span><BR> 密码：<input name="pwd" type="password"/> <span id="pwd.msg"></span><BR> <input value="登录" type="button" onclick="checkUserLogin()"/> </form>

《JavaWeb课件PPT》

JavaWeb的优势
JavaWeb具有跨平台性、高效性、可扩展性和安全性等优点，使其成为开发企业级应用的首选技术。
主要组件
JavaWeb由Servlet、JSP、 JDBC等技术组成，每个组件都有其独特的功能和用途。
环境搭建
1 安装JDK
2 配置开发环境
为了编写和运行JavaWeb应用程序，您需要在计算机上安装Java Development Kit (JDK)。
AJAX可用于向服务器发送请求并获取响应数据，通常使用 JSON或XML格式进行数据交换。
使用jQuery
jQuery是一个流行的 JavaScript库，提供了丰富的 AJAX功能和简化的API。
JSTL是JavaServer Pages 标准标签库，提供了一组丰富的标签和函数，用于在JSP页面中简化逻辑。
常用JSTL标签
JSTL标签包括条件判断、循环、格式化、数据访问等，可以减少在JSP页面中编写大量的Java代码。
使用JSTL
通过导入JSTL库文件和在 JSP页面中引入JSTL标签库，您可以开始使用JSTL 来增强页面功能。
2
XML在Web应用中的应用
XML可用于定义配置文件、数据传输和Web服务等方面，具有简单、可读性高等特点。
3
常用的XML技术
常用的XML技术包括XML解析、XSLT转换、XPath查询和XML Schema验证等。
AJAX技术
什么是AJAX
数据交互
AJAX是Asynchronous JavaScript and XML的缩写，通过在后台与服务器进行数据交互，实现异步更新页面内容。
JSP标签库包含了一组自定义标签，可以简化在JSP页面中表达业务逻辑的编写。

JavaWeb基础-第九讲——AJAX

4、最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。
9.1 AJAX简介
AJAX技术的产生
Ajax被认为是(Asynchronous JavaScript and XML 的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. Ajax在Google中广泛被应用，例如Google Map 、Google Suggest 和 Google Ads。
选择软件技术效果页面
选择计算机信息管理
本课结束！
LOGO
9.5 AJAX开发框架
开发框架介绍
9.5 AJAX开发框架
A、初始化XMLHttpRequest对象
9.5 AJAX开发框架
A、初始化XMLHttpRequest对象
9.5 AJAX开发框架
B、指定相应处理函数
9.5 AJAX开发框架
C、发出HTTP请求
9.5 AJAX开发框架
C、发出HTTP请求
9.2 AJAX应用到的技术
9.2 AJAX应用到的技术
9.2 AJAX应用到的技术
9.2 AJAX应用到的技术
9.3 发送请求
9.3 发送请求
9.3 发送请求
9.3 发送请求
9.4 接收请求
9.4 接收请求
9.4 接收请求
9.4 接收请求
9.4 接收请求
9.4 接收请求
9.1 AJAX简介
9.1 AJAX简介
9.1 AJAX简介
什么是Ajax
9.1 AJAX简介
什么是Ajax
9.1 AJAX简介
Ajax工作原理
9.1 AJAX简介
Ajax工作原理