Java基础——Ajax(一)
学习之前举一个简单的小栗子,让我们简单了解一下Ajax的应用与好处。一般网站都会有自己的数据库,用来单独存储用户的个人信息,平时我们在注册账号的时候会遇到信息输入的页面,假设第一个输入信息是用户名的填写,一般当你填写这第一个的时候旁边就会有提醒,提醒你的用户名是否合法,是否被占用等等。
这里就用到了Ajax,而不是像老版的Web设计,需要把所有的注册信息填写完毕,再提交到数据库去验证,再返回给客户提示。Ajax提高了效率,减少了运行成本,提升了用户体验。
一、Ajax 简介
== 传统的Web应用模式和 ajax 方式的比较 //上面
== AJAX应用的特点
1. 不刷新整个页面,在页面内与服务器通信。
2. 使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
3. 应用仅由少量页面组成。大部分交互在页面之内完成,不需要切换整个页面。
==AJAX的好处
--减轻服务器的负担。AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
--无刷新更新页面,减少用户心理和实际的等待时间。
--可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。
--可以调用外部数据。
--基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
--进一步促进页面呈现和数据的分离
==AJAX基础—概念
Asynchronous JavaScript and XML(异步JavaScript和XML)是一种创建交互网页应用的网页开发技术。所谓同步,即客户端脚本在请求服务器后,客户端脚本等待服务器返回响应之后再继续执行。而异步则是,客户端脚本在请求服务器之后,服务器还没有返回相应,客户端就可以执行下面的脚本.这就是异步。异步也表现就是在不打扰用户正常浏览的情况下,在后台与服务器交互。
==AJAX技术组成
XMLHttpRequest:进行异步数据读取;
Javascript:Javascript一直被定位为客户端的脚本语言,应用最多的地方是表单数据的校验。
现在,可以通过Javascript操作XMLHttpRequest,来跟数据库打交道。
DOM: DOM(Document Object Model)是提供给HTML和XML使用的一组API,提供了文件的表述结构,并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以跟页面进行交互。
XML:通过XML(Extensible Markup Language),可以规范的定义结构化数据,是网上传输的数据和文档符合统一的标准。
DHTML 或 Dynamic HTML:用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
二、XMLHttpRequest
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想,因为您能够:
1.在不重新加载页面的情况下更新网页
2.在页面已加载后从服务器请求数据
3.在页面已加载后从服务器接收数据
4.在后台向服务器发送数据
5.所有现代的浏览器都支持 XMLHttpRequest 对象 (IE6 除外)
三、创建 XMLHttpRequest 对象
所有现代浏览器 (IE7+、Firefox、Chrome(谷歌)、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。通过一行简单的 JavaScript 代码,我们就可以创建 XMLHttpRequest 对象。
var xmlhttp=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
四、通过 XMLHttpRequest 对象实现 ajax 效果
var xmlhttp; $(function(){$("button").click(function(){if(window.XMLHttpRequest){ //如果浏览器支持这个对象xmlhttp=new XMLHttpRequest();}else if(window.ActiveXObject){ //如果是ie6xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}if(xmlhttp){ //成功xmlhttp.onreadystateChange =myReadyStateChange; //它指向一个回调函数xmlhttp.open("get","UserServlet",true); //true表示使用异步方式/*//如果要改用post方式,要改用下面的方式//xmlHttp.open("post", "UserServlet", true);//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //这句不加,后台取不到 userName//xmlHttp.send("userName=zhangsan&password=aaa"); //如果有多个参数,可以用&号分开 */xmlhttp.send(null); }else{alert("XMLHttpRequest对象创建失败");}});});//回调函数 在什么时候被调用 在 xmlhttp 的 readyState 发生变化的时候被调用 function myReadyStateChange(){//alert(xmlhttp.readyState);if(xmlhttp.readyState==4) //等于四,表示服务端返回了 {if(xmlhttp.status ==200 ) //xmlhttp.status 代表服务端返回的状态码 {$("#A1").html(xmlhttp.status); //状态码$("#A2").html( xmlhttp.statusText); //状态信息$("#A3").html(xmlhttp.responseText); //响应的消息 }}}<button>ajax方式得到数据</button><br />Status(状态码): <span id="A1"></span> <br />Status text(状态说明): <span id="A2"></span> <br />Response(响应的数据): <span id="A3"></span>
服务端 UserServlet
response.getWriter().print("this is server data"); //尽量别加ln
备注:(前面我在学习网络上韩顺平的视频中,有记过这里的笔记,这里重温一下)
响应状态码: 表示服务器对请求的各种不同处理结果,是一个三位的10制数。
可归为 5 类
100段的 :成功接收请求,要求客户端继续提交下一次请求才能完成整个处理
200段的 :成功接收请求,并处理完成
300段的 :为完成请求,客户端需进一步细化请求,例如请求的资源已经移动到一个新地址
400段的 :客户端请求有错误
--400 Bad Request //客户端请求有语法错误,不能被服务器所理解
--401 Unauthorized //请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用
--403 Forbidden //服务器收到请求,但是拒绝提供服务
--404 找不到
500段的 :服务器端出现错误
--500 Internal Server Error //内部服务器错误,服务端的CGI,ASP,JSP等程序发生错误
--503 Server Unavailable //服务不可用,服务器由于当前负载过大,一段时间后可能恢复正常
注释:onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。
仅在状态为 4 时,我们才执行代码。
5 个状态中每一个都有一个相关联的非正式的名称,下表列出了状态、名称和含义:
状态 | 名称 | 描述 |
0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置 |
1 | Open open() | 方法已调用,但是 send() 方法未调用。请求还没有被发送 |
2 | Sent Send() | 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应 |
3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成 |
4 | Loaded HTTP | 响应已经完全接收 |
readyState 的值不会递减,除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候,都会触发 onreadystatechange 事件句柄。
responseText
--目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。
--如果响应包含了为响应体指定字符编码的头部,就使用该编码。否则,假定使用 Unicode UTF-8。
status
--由服务器返回的 HTTP 状态代码,如 200 表示成功,而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
statusText (Not Found、OK)
--这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说,当状态为 200 的时候它是 "OK",
--当状态为 404 的时候它是 "Not Found"。和 status 属性一样,当 readyState 小于 3 的时候读取这一属性会导致一个异常。
之前我在网上看到一些特别有趣的解释相应状态码的图片,分享给大家:
转载于:https://www.cnblogs.com/1693977889zz/p/7642875.html
Java基础——Ajax(一)相关推荐
- Java基础 ajax异步操作json
l AJAX的基础与案例: 1.1 AJAX: 1.1.1 AJAX的概述: 什么是AJAX: AJAX即"Asynchronous Javascript And XML&qu ...
- java中ajax概念_Java之AJAX概念和实现方式
Java之AJAX概念和实现方式 开发工具与关键技术:MyEclipse 10,java 作者:刘东标 撰写时间:2019-06-12 1.概念: Asynchronous JavaScript An ...
- 零基础AJAX入门(含Demo演示源文件)
零基础AJAX入门(含Demo演示源文件) 作者:一点一滴的Beer 个人主页:http://www.cnblogs.com/beer 摘要:因为笔者的大四毕业设计是做WebGIS系统,用过Web版 ...
- 你所需要的java基础篇和提升篇大总结
好好学java 致力于java知识分享 关注 精彩内容 你所需要的java全套视频教程 你所需要的java电子图书 你所需要的大数据视频教程 你所需要的java练习项目 如 / 诗 近半个月,每天一篇 ...
- java基础(十) 深入理解数组类型
戳上面的蓝字关注我们哦! 精彩内容 精选java等全套视频教程 精选java电子图书 大数据视频教程精选 java项目练习精选 1. 数组类简介 在java中,数组也是一种引用类型,即是一种类. ...
- java基础(七) 深入解析java四种访问权限
戳上面的蓝字关注我们哦! 精彩内容 精选java等全套视频教程 精选java电子图书 大数据视频教程精选 java项目练习精选 引言 Java中的访问权限理解起来不难,但完全掌握却不容易,特别是4 ...
- java基础(三) 加强型for循环与Iterator
戳上面的蓝字关注我们哦! 精彩内容 精选java等全套视频教程 精选java电子图书 大数据视频教程精选 java项目练习精选 引言 从JDK1.5起,增加了加强型的for循环语法,也被称为 &q ...
- java基础(二) 自增自减与贪心规则
戳上面的蓝字关注我们哦! 精彩内容 精选java等全套视频教程 精选java电子图书 大数据视频教程精选 java项目练习精选 引言 JDK中提供了自增运算符++,自减运算符--.这两个操作符各有 ...
- java基础知识大全,java 基础知识点汇总
java 基础知识点汇总 问题一:我声明了什么! String s = "Hello world!"; 许多人都做过这样的事情,但是,我们到底声明了什么?回答通常是:一个Strin ...
最新文章
- The genome polishing tool POLCA makes fast and accurate corrections in genome assemblies
- 避免图像去雾算法中让天空部分出现过增强的一种简易方法
- 数组最大最小值比较次数优化
- mysql后台修改表_mysql之约束以及修改数据表
- torch.roll() 详解
- spark-jar冲突解决方案
- ArrayBlockingQueue跟LinkedBlockingQueue的区别
- Spark-shell进行粘贴模式
- 深度学习如何均衡精度、内存、计算和通信开销?
- 本地Apache配置虚拟主机/域名
- html叠加层,JavaScript实现多个重叠层点击切换效果的方法
- s7300plc串口通信_s7-300串口通讯.ppt
- DPDK分析——KNI
- MongoDB应用之自增id
- 《网络神采4》技术大揭密之:DedeCMS存储过程
- MFC学习之 对话框设置背景颜色及控件透明的方法
- Java封神路之多线程(第二篇),从把握整体架构到具体演示,快速掌握多线程机制
- 学习ifconfig实战技巧,成为网络管理高手
- 推荐系统 (一): 推荐系统的架构
- 零基础如何自学软件测试?2020软件测试学习路线
热门文章
- linux的grub界面退出,linux退出 grub
- 前端开发,必知ES5、ES6的7种继承
- 干货丨常用JS前端开发框架有哪些?
- 电脑怎么彻底删除软件_电脑强力卸载工具,删除电脑无用软件,让电脑更加快捷顺畅...
- c++代码好玩_Python开源学习:60秒学会一个例子,147段简单代码助你从入门到大师 | 中文资源...
- kettle mysql 导入数据库_ETL工具—Kettle数据的导入导出—数据库到数据库
- mysql -h 日志打印_mysql日志
- java输出孪生素数对数_最大的孪生素数证明
- C语言学习笔记---数据拷贝函数memcpy()和memmove()函数
- SpringBoot中yaml配置