30分钟精通Ajax，工作原理及实现步骤

传统开发的缺点，是对于浏览器的页面，全部都是全局刷新的体验。如果我们只是想取得或是更新页面中的部分信息那么就必须要应用到局部刷新的技术。

局部刷新也是有效提升用户体验的一种非常重要的方式。

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

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

在线观看：​​www.bilibili.com/video/BV15k…​​

资料下载：​​www.bjpowernode.com/javavideo/1…​​

什么是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 页面的内容和数据 ：

服务器端应答结果阶段：

sevlet 返回后把数据全部覆盖掉原来index 页面内容， result.jsp 覆盖了全部的浏览器内存数据。 整个浏览器数据全部被刷新。重新在浏览器窗口显示数据，样式，标签等

全局刷新原理：

1. 1. 
      
2. 必须由浏览器亲自向服务端发送请求协议包。
   
3. 这个行为导致服务端直接将【响应包】发送到浏览器内存中
   
4. 这个行为导致浏览器内存中原有内容被覆盖掉
   
5. 这个行为导致浏览器在展示数据时候，只有响应数据可以展示
   
   1. 
      
   1. 
      

局部刷新

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

局部刷新原理：

1. 1. 
      
2. 不能由浏览器发送请求给服务端
   
3. 浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求.
   
4. 这个行为导致导致服务端直接将【响应包】发送脚本对象内存中
   
5. 这个行为导致脚本对象内容被覆盖掉，但是此时浏览器内存中绝大部分内容没有收到任何影响
   
6. 这个行为导致浏览器在展示数据时候,同时展示原有数据和响应数据
   
   1. 
      
   1. 
      

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。

通过判断XMLHttpReqeust 对象的状态，获取服务端返回的数据。

语法：

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

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

选择Local

配置tomcat 服务器的位置

Module 添加tomcat 支持

出现窗口

选择 2 Library

确定使用tomcat

3. 创建 jsp，定义form，有参数name， weight， height

4. 创建 Servlet， 名称 BMIServlet

5. 注册 servlet

6. 创建 result.jsp

web 目录下创建 result.jsp 文件

7.配置运行程序，输入参数。显示bmi

​​_ueditor_page_break_tag_​​

使用HttpServletResponse 响应输出

1. 1. 
      
2. 新建jsp： indexPrint.jsp
   1. 
      
   1. 
      

1. 1. 
      
2. 新建Servlet, 名称 BMIServeltPrint
   1. 
      
   1. 
      

使用 ajax 请求，计算 bmi

1. 1. 
      
2. 新建ajax.jsp
   1. 
      
   1. 
      

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

1. 1. 
      
2. 复制BMIServletPrint，重新命名 BMIServletAjax 代码不需要改动
   
3. 注册 Servlet
   
   1. 
      
   1. 
      

1. 1. 
      
2. 在浏览器访问ajax.jsp
   1. 
      
   1. 
      

在BMIServltAjax 的第一行设置断点，然后在 jsp 中点击按钮，发起请求，观察浏览器中的弹出的内容变化

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

7.访问ajax.jsp 请求

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

8.获取dom 对象 value 值

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

10.修改 doAjax 函数

作者：凌小可可

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。