ajax菜鸟教程(jq请求ajax的方法)

传统开发的缺点,是对于浏览器的页面,全部都是全局刷新的体验。如果我们只是想取得或是更新页面中的部分信息那么就必须要应用到局部刷新的技术。局部刷新也是有效提升用户体验的一种非常重要的方式。

Ajax技术是基于js语言的扩展,能够通过将请求发送给后台,并从后台取得相关数据,然后将数据在页面做局部刷新的重要技术。

本教程会通过对ajax的传统使用方式,结合json操作的方式,结合跨域等高级技术的方式,对ajax做一个全面的讲解。

搭配视频效果更佳哦~~~

什么是Ajax?

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和XML)。

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分页面内容的新方法

AJAX 不是新的编程语言,而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是JavaScript , XML.

JavaScript: 使用脚本对象XMLHttpRequest 发送请求, 接收响应数据XML: 发送和接收的数据格式,现在使用json

AJAX 不单需要前端的技术,同时需要后端(服务器)的配合。服务器需要提供数据,数据是AJAX 请求的响应结果。


全局刷新和局部刷新

B/S 结构项目中, 浏览器(Browse)负责把用户的请求和参数通过网络发送给服务器(Server),服务端使用 Servlet(多种服务端技术的一种)接收请求,并将处理结果返回给浏览器。

浏览器在html,jsp 上呈现数据,混合使用css, js 帮助美化页面,或响应事件。

全局刷新

登录请求处理:

index.jsp 发起登录请求——–LoginServlet result.jsp

发起请求request 阶段:

浏览器现在内存中是index 页面的内容和数据 :

ajax菜鸟教程(jq请求ajax的方法)

全局刷新原理:

1) 必须由浏览器亲自向服务端发送请求协议包。

2) 这个行为导致服务端直接将【响应包】发送到浏览器内存中

3) 这个行为导致浏览器内存中原有内容被覆盖掉

4) 这个行为导致浏览器在展示数据时候,只有响应数据可以展示

局部刷新

浏览器在展示数据时,此时在窗口既可以看到本次的响应数据, 同时又可以看到浏览器内存中原有数据

局部刷新原理:

1) 不能由浏览器发送请求给服务端

2) 浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求.

3) 这个行为导致导致服务端直接将【响应包】发送脚本对象内存中

4) 这个行为导致脚本对象内容被覆盖掉,但是此时浏览器内存中绝大部分内容没有收到任何影响

5) 这个行为导致浏览器在展示数据时候,同时展示原有数据和响应数据

ajax菜鸟教程(jq请求ajax的方法)

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

ajax菜鸟教程(jq请求ajax的方法)

配置tomcat 服务器的位置

ajax菜鸟教程(jq请求ajax的方法)

出现窗口

ajax菜鸟教程(jq请求ajax的方法)

确定使用tomcat

ajax菜鸟教程(jq请求ajax的方法)

4. 创建 Servlet, 名称 BMIServlet

ajax菜鸟教程(jq请求ajax的方法)

6. 创建 result.jsp

web 目录下创建 result.jsp 文件

ajax菜鸟教程(jq请求ajax的方法)

2. 新建Servlet, 名称 BMIServeltPrint

ajax菜鸟教程(jq请求ajax的方法)

1. 新建ajax.jsp

ajax菜鸟教程(jq请求ajax的方法)

3. 复制BMIServletPrint,重新命名 BMIServletAjax 代码不需要改动

4. 注册 Servlet

ajax菜鸟教程(jq请求ajax的方法)

7.访问ajax.jsp 请求

在jsp 中点击按钮,发起请求,观察浏览器中的弹出的内容变化

8.获取dom 对象 value 值

ajax菜鸟教程(jq请求ajax的方法)

9. 在浏览器测试发送ajax 请求

10.修改 doAjax 函数

ajax菜鸟教程(jq请求ajax的方法)

(0)
小多多的头像小多多创始人

相关推荐

发表回复

登录后才能评论