Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

2022-12-22 0 1,045

现代合作开发的优点,是对应用领域程序的页面,全为自上而下创下的新体验。如果我们而已想获得或者预览页面中的部份重要信息所以就要要应用领域到局部性创下的控制技术。局部性创下也是有效率提高使用者新体验的一类十分关键的形式。

Ajax控制技术是如前所述js词汇的扩充,能透过将允诺推送到前台,并从前台获得有关统计数据,接着将统计数据在页面做局部性创下的关键控制技术。

本讲义会透过对ajax的现代采用形式,紧密结合json操作方式的形式,紧密结合布吕马等高阶控制技术的形式,对ajax做一个全面性的传授。

配搭音频效用较佳哦~~~

https://www.ixigua.com/6846624275877593611

什么是Ajax?

AJAX = Asynchronous JavaScript and XML(触发器的 JavaScript 和XML)。

AJAX 是一类在无须再次读取整座页面的情况下,能预览部份页面文本的新方法

AJAX 不是捷伊C词汇,而要采用原有控制技术混和采用的一类新方法。ajax 中采用的控制技术有JavaScript, html , dom , xml ,css 等。主要是JavaScript , XML.

JavaScript: 采用JAVA第一类XMLHttpRequest 推送允诺, 转交积极响应统计数据XML: 推送和转交的统计数据库系统,现在采用json

AJAX 纵使须要后端的控制技术,与此同时须要后端(伺服器)的相互配合。伺服器须要提供统计数据,统计数据是AJAX 允诺的积极响应结论。

自上而下刷新和局部性创下

B/S 内部结构工程项目中, 应用领域程序(Browse)负责管理把使用者的允诺和模块透过互联网推送到伺服器(Server),服务器端采用 Servlet(多种不同服务器端控制技术的一类)转交允诺,并将处理意见回到给应用领域程序。

应用领域程序在html,jsp 上呈现出统计数据,混和采用css, js 协助亮化页面,或积极响应该事件。

自上而下创下

登录允诺处理:

index.jsp 发起登录允诺——–LoginServlet result.jsp

发起允诺request 阶段:

应用领域程序现在内存中是index 页面的文本和统计数据 :

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

伺服器端应答结论阶段:

sevlet 回到后把统计数据全部覆盖掉原来index 页面文本, result.jsp 覆盖了全部的应用领域程序内存统计数据。 整座应用领域程序统计数据全部被创下。再次在应用领域程序窗口显示统计数据,样式,标签等

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

自上而下创下基本原理:

1) 要由应用领域程序亲自向服务器端推送允诺协议包。

2) 这个行为导致服务器端直接将【积极响应包】推送到应用领域程序内存中

3) 这个行为导致应用领域程序内存中原有文本被覆盖掉

4) 这个行为导致应用领域程序在展示统计数据时候,只有积极响应统计数据可以展示

局部性创下

应用领域程序在展示统计数据时,此时在窗口既可以看到本次的积极响应统计数据, 与此同时又可以看到应用领域程序内存中原有统计数据

局部性创下基本原理:

1) 不能由应用领域程序推送允诺给服务器端

2) 应用领域程序委托应用领域程序内存中一个JAVA第一类代替应用领域程序推送允诺.

3) 这个行为导致导致服务器端直接将【积极响应包】推送JAVA第一类内存中

4) 这个行为导致JAVA第一类文本被覆盖掉,但是此时应用领域程序内存中绝大部份文本没有收到任何影响

5) 这个行为导致应用领域程序在展示统计数据时候,与此同时展示原有统计数据和积极响应统计数据

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

AJAX 实现局部性创下的一类控制技术。

触发器允诺第一类:

在局部性创下,须要创建一个第一类,代替应用领域程序发起允诺的行为,这个第一类存在内存中。

代替应用领域程序发起允诺并转交积极响应统计数据。这个第一类叫做触发器允诺第一类。

自上而下创下是同步行为, 局部性创下是触发器行为[应用领域程序统计数据没有全部预览] 这个触发器第一类用于在前台与伺服器交换统计数据。XMLHttpRequest 就是我们说的触发器第一类。

XMLHttpRequest 第一类能:

在不再次读取页面的情况下预览页面在页面已读取后向伺服器允诺统计数据在页面已读取后从服务器转交统计数据

所有现代应用领域程序 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 第一类。透过一行简单的 JavaScript 代码,我们就可以创建 XMLHttpRequest 第一类

创建 XMLHttpRequest 第一类的语法(xhr): var xmlhttp=new XMLHttpRequest();

AJAX 中的核心第一类就是XMLHttpRequest

AJAX 触发器实现关键步骤

XMLHttpRequest 第一类介绍

(1) 创建第一类形式

var xmlHttp = new XMLHttpRequest();

(2) onreadstatechange 该事件

当允诺被推送到伺服器时,我们须要执行一些如前所述积极响应的任务。每当readyState 改变时,就会触发 onreadystatechange 该事件。此该事件可以指定一个处理函数function。

语法:

xmlHttp.onreadystatechange= function() {

if( xmlHttp.readyState == 4 && xmlHttp.status == 200){

处理伺服器回到统计数据

}

}

下面是 XMLHttpRequest 第一类的三个关键的属性:

属性说明:

onreadystatechange 属性:一个 js 函数名 或 直接定义函数,每当readyState 属性改变时,就会调用该函数

readyState 属性:

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

• 0: 允诺未初始化,创建触发器允诺第一类 var xmlHttp = new XMLHttpRequest()

• 1: 初始化触发器允诺第一类, xmlHttp.open(允诺形式,允诺地址,true)

• 2: 触发器第一类推送允诺, xmlHttp.send()

• 3: 触发器第一类转交应答统计数据 从服务器端回到统计数据。XMLHttpRequest 内部处理。

• 4: 触发器允诺第一类已经将统计数据解析完毕。 此时才可以读取统计数据。

status 属性:

200: “OK”

404: 未找到页面

(1) 初始化允诺模块:

方法:

open(method,url,async) : 初始化触发器允诺第一类

模块说明:

method:允诺的类型;GET 或 POST

url:伺服器的servlet 地址

async:true(触发器)或 false(同步)

例如 :

xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)

(2) 推送允诺

xmlHttp.send()

(3) 转交伺服器积极响应的统计数据

如需获得来自伺服器的积极响应,请采用 XMLHttpRequest 第一类的

responseText 或 responseXML 属 性 。

responseText:获得字符串形式的积极响应统计数据responseXML:获得 XML 形式的积极响应统计数据

AJAX 实例

自上而下创下计算 bmi

需求:计算某个使用者的BMI。 使用者在jsp 输入自己的身高,体重;servlet 中计算BMI,并显示 BMI 的计算结论和建议。

BMI 指数(即身体质量指数,英文为BodyMassIndex,简称 BMI),是用体重公斤数除以身高米数平方得出的数字,是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准

成人的 BMI 数值:

1)过轻:低于 18.5

2)正常:18.5-23.9

3)过重:24-27

4)肥胖:28-32

5)十分肥胖,高于 32

合作开发关键步骤:

1. 在idea 中创建捷伊工程,名称:ch01-bmi-ajax

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

2. 配置tomcat 伺服器,如果已经配置,省略此关键步骤。

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

选择Local

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

配置tomcat 伺服器的位置

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

Module 添加tomcat 支持

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

出现窗口

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

选择 2 Library

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

确定采用tomcat

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

3. 创建 jsp,定义form,有模块name, weight, height

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

4. 创建 Servlet, 名称 BMIServlet

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

5. 注册 servlet

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

6. 创建 result.jsp

web 目录下创建 result.jsp 文件

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

7.配置运行程序,输入模块。显示bmi

采用HttpServletResponse 积极响应输出

1. 新建jsp: indexPrint.jsp

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

2. 新建Servlet, 名称 BMIServeltPrint

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤
Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

采用 ajax 允诺,计算 bmi

1. 新建ajax.jsp

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

2. 在ajax.jsp 的head 部份指定 doAjax()函数

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

3. 复制BMIServletPrint,再次命名 BMIServletAjax 代码不须要改动

4. 注册 Servlet

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

5. 在应用领域程序访问ajax.jsp

在BMIServltAjax 的第一行设置断点,接着在 jsp 中点击按钮,发起允诺,观察应用领域程序中的弹出的文本变化

6. 修改ajax.jsp 中的doAjax()函数

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

7.访问ajax.jsp 允诺

在jsp 中点击按钮,发起允诺,观察应用领域程序中的弹出的文本变化

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

9. 在应用领域程序测试推送ajax 允诺

10.修改 doAjax 函数

Ajax入门学习必备!快速了解Ajax工作原理及开发步骤

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务