JavaEE之 Ajax

温馨提示:本文阅读需要6分钟,建议收藏后阅读!


有小伙伴留言说

想要 Ajax 

今天我们就来一起认识 Ajax 吧!

Ajax


Ajax是英文“Asynchronous JavaScript And XML”(异步 JavaScript 和 XML)的字首缩写,它是一种创建交互式网页应用的开发技术。通过在后台与服务器进行频繁而少量数据的交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,更新网页的某个部分。

 

Ajax 的工作原理如图所示,它使用 JavaScript 通过 AJAX 引擎向服务器发出请求并处理响应来局部更新页面而不阻塞用户。AJAX 引擎的核心对象为XMLHTTPRequest,通过该对象,JavaScript 可以在不重新加载整个页面的情况与 Web 服务器交换数据。


 


Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

Ajax 可使因特网应用程序更小、更快以及更加友好。从而更完善了因特网应用程序。

 

Ajax 技术的组成

1,  JavaScript

2,  XMLHttpRequest

AJAX的核心是JavaScript对象XMLHttpRequest。XMLHttpRequest对象用于在后台与服务器进行异步通信,通过HTTP传递请求和响应数据

3,  XML

4,  DOM

DOM是文档对象模型(Document Object Model)的英文字首缩写,它定义了操作文档对象的接口。

5,  CSS

 

Ajax 的通信

(1) 创建XMLHttpRequest对象

(2) 初始化请求参数

(3) 发送请求

(4) 捕获请求状态

(5) 判断请求状态

readyState 属性值表示 HTTP 请求的当前状态,在事件处理程序中一般根据该值进行不同处理。当 XMLHttpRequest 对象初次创建时,该属性值从0开始,直到接收到完整的 HTTP 响应,该属性值递增至4。


 


(6) 判断请求结果

(7) 获取响应文本

当请求成功后,可以使用 responseText 属性来获取响应结果。

当 readyState 属性值小于3,responseText 属性就是一个空字符串。

当 readyState 为3时,responseText 属性返回目前已经接收的响应部分。

当 readyState 为4,responseText 属性会保存完整的响应体。

(8) 获取响应XML

responseXML 属性用于获取服务器对请求的响应,服务器返回的必须是 XML文档对象,因此 HTTP 响应头部的 content-type 必须设置为“text/XML”。


下面我们来写一个Ajax的例子

创建一个ajax项目

先来写一个登录界面



再来写一个Servlet处理这个登录请求


只有用户名和密码都正确的情况下才能通过,如果不是就像客户端输出0


下面我们来写js来


首先是获取XMlHTTPRequest对象


 

获取用户名和密码,如果用户名和密码动不为空我们就发送这个请求


 


写请求的方法(请求对象, 路径 ,请求参数,方法)



检测请求的状态

当 readyState=4 时,表示已经完全接受 HTTP 的响应,HTTP 请求的状态码为 200 是代表正确返回,然后根据返回的结果进行输出!



逻辑就是这样,我们跑一下试一下!


这个效果眼熟不


我们再来登录正确的



JQuery Ajax


关于 jQuery 与 Ajax

jQuery 提供多个与  Ajax 有关的方法。通过 jQuery  Ajax 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。


如果没有 jQuery, Ajax 编程还是有些难度的。编写常规的 Ajax 代码并不容易,因为不同的浏览器对  Ajax 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 为我们解决了这个难题,我们只需要简单的代码,就可以实现  Ajax 功能。

  

首先下载一个 jQuery


这是 jQuery的官网,伙伴们可以去下载注意一下 jQuery有两个版本 一个开发版相对大一点,我们开发一般是要用这个 ,一个生产版本,体积小一点,扔到项目里的



这边我已经下好了

我们另外新建一个页面


 


现在利用 jQuery 来改造之前的 js



就这些代码就可以实现我们刚才的那些效果了





今天就来给大家演示一下 js 可以解析 json 


写一个get方法


 


 


效果:



 jQuery - Ajax get() 和 post() 方法


HTTP 请求:GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

这个我们之前就演示过了,这边就不演示了


 jQuery $.get() 方法,用来获取我们在 get 存储的 json 数据



效果:


 


 jQuery $.post() 方法



效果:


我们的 Ajax 就分享到这里了

小伙伴们回去自己练习一下吧!


回复

Ajax

获取源码

再见了


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容