每日鸡汤：英雄来来往往，唯有国王屹立不倒。

作者：Java学术趴

仓库：Github、Gitee

博客：CSDN、掘金

公众号：Java学术趴

特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系小编授权

版权声明：文章里的部分文字或者图片来自于互联网，如有侵权请尽快联系小编。微信搜索公众号Java学术趴联系小编。

大家好！我是你们的老朋友Java学术趴，今天给大家分享全网最全的Ajax局部刷新技术。Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。接下来给大家详细介绍Ajax局部刷新技术。

Ajax前端技术

xhr是XMLHttpRequest的简称

前端技术：在浏览器中执行的程序都是前端，html、css、js等
后端技术：在服务器中执行的程序，使用Java元语言开发的后端程序。

servlet、jsp、jdbc、mysql、tomcat等等····

1 .全局刷新与全局刷新

全局刷新

概念：使用form、href等发起的请求是全局刷新
用户在发起请求，视图改变了，跳转视图，使用新的数据添加到页面
缺点：
- 传递数据量比较大，占用网络的宽带
- 浏览器需要重新的渲染整个页面
- 用户体验不是很好

局部刷新

概念：在当前页面中，发起请求，获取数据，更新当前网页的dom对象。对视图部分刷新。
特点：
- 数据比较小，在网络中传输速度快
- 更新页面内容，使部分页面更新，浏览器不用全部更新
- 在一个页面中，可以做多个局部刷新
- 从服务器获取的是数据，拿到更新的视图

2.异步请求对象

**异步对象 XMLHttpRequest

在局部刷新中，使用异步请求对象，在浏览器内部发起请求，获取数据

异步对象是在浏览器的内部的一种 JavaScript对象。各大浏览器都能支持异步对象的使用。

chrom、firework、ie、opper中都可以使用异步对象。在这些浏览器中写法可能不同，

但是原理都是一样的。

3. 异步对象XMLHttpRequest介绍

Js中的一种对象，使用Js语法创建和使用这个对象
var xmlhttp = new XMLHttpRequest();
之后可以使用xmlhttp对象的属性或者函数，进行异步对象的操作

使用异步对象实现局部刷新，异步对象主要负责发起请求，传递请求参数，并从服务端接收数据。

3.1局部刷新需要使用哪些技术：

JavaScript ：创建XMLHttpRequest对象，调用它的属性或者方法

负责创建异步对象，发送请求，更新页面的dom对象。
dom : 处理dom，更新 Servlet的数据
css：处理视图，更新，美化。
servlet : 服务端技术，需要服务端的数据
数据格式：网络中传输的数据格式，使用json代替了xml

把以上这些技术的综合使用叫做Ajax（阿贾克斯）

4. Ajax介绍

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法
使用AjAx实现局部刷新
AjAx = AsynChronous JavaScript and XML（异步的JavaScript和XML）。
- synChronous : 异步的意思
- JavaScript : javaScript脚本，在浏览器中执行
- and : 和
- XMl : 一种数据格式
AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据
是 AJAX 请求的响应结果。
AjAX 是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法。
注意：AjAx只是一种新的技术，多种技术的综合应用，不是一种新的编程语言。

包含了javaScript、dom、css、服务端技术、servlet、jsp、jdbc等，还有json数据格式。

Ajax核心是JavaScript 和 XML 但是在近些年json技术替代了XML，

所以现在的Ajax的核心是：JavaScript 与 json

5.AJAX异步对象（XMLHttpRequest）实现步骤

第一步：创建一个异步对象（使用的是JS语言）

var xmlHttp = new XMLHttpRequest();

第二步：给异步对象绑定事件，onreadstatechange事件，当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数，在函数中处理状态的变化

// 这段代码是以前JS中给函数绑定事件的方式
btn.onclick = function(){alert("按钮单击");
}

当请求被发送到服务端时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadstatechange事件。从事件可以指定一个处理函数 function。通过判断 XMLHttpRequest对象的状态，获取服务端返回的数据。

// 这段代码是ajax中异步对象绑定事件的方式
xmlHttp.onreadstatechange = function(){// 处理请求的状态变化;if(xmlHttp.readyState == 4 && xmlHttp.status == 200){// 此时说明可以处理服务端的数据，更新当前页面var data = xmlHttp.responseText;document.getElementById("name").value = data;}
}

第三步：初始异步请求对象

异步的方法　open()
注意：第一个参数：get或者post，第二个参数：访问地址第三个参数：是一个boolean类型的值(true/false)

xmlHttp.open(请求方式get/post,“服务器的访问地址”,同步/异步请求(默认是true，异步请求)

例如：
```
xmlHttp.open("get","loginServlet?name=cyb&password=123",true)
```
第四步：使用异步对象发送请求
```
xmlHttp.send();
```
怎么获取服务端返回的数据，使用异步对象的属性 responseText

使用例子：
```
xmlHttp.responseText
```

6. 异步对象的属性

**XMLHttpRequest 对象有三个重要的属性 **

6.1属性说明

onreadstatechange属性：一个js函数名或直接定义函数，每当 readyState 属性改变时，就会调用该函数。

6.2 readyState 属性

存在 XMLHttpRequest 的状态，从0到4发生变化
异步对象的属性 readyState 表示异步对象请求的状态变化
- 0 ：创建异步对象时， new XMLHttpRequest ();
- 1 : 初始化异步请求对象， xmlHttp.open();
- 2 : 发送请求， xmlHttp.send();
- 3 : 从服务端获取带了数据，此时3，注意3是异步对象内部使用，获取了原始数据。
- 4 : 异步对象把接收到的数据处理完成后，此时开发人员在4的时候处理数据。
  
  在4的时候，开发人员做什么？更新当前页面。

6.3 status 属性

异步对象的status属性，表示网络请求的状况：
- 200(请求成功)
- 404(请求失败)
- 500(Java代码出现问题)
在当 status == 200 时，表示网络请求成功。此时才可以进行数据的传输处理

6.4 responseText 属性

获取服务端返回的数据，使用异步对象的属性 responseText

xmlHttp.responseText

7. 项目一：全局刷新计算bmi

项目介绍：通过用户输入的信息，计算这个人的bmi，判断bmi的数值在哪个区间，返回测试结果给用户。
通过全局刷新计算bim，不使用Ajax异步对象

这个项目的源代码，点击星球进行免费获取星球 (Github地址)如果没有Github的小伙伴儿。可以关注本人微信公众号：Java学术趴，发送Ajax，免费给发给大家项目源码，代码是经过小编亲自测试的，绝对可靠。免费拿去使用。

8.项目二：局部刷新计算bim（使用Ajax异步请求对象）

项目介绍：这个项目和以上所需要完成的请求是一样的，只是实现的方式不同。
这个项目是使用的Ajax异步对象进行的局部刷新原理。
通过局部刷新计算bmi，使用Ajax异步对象完成局部刷新

这个项目的源代码，点击星球进行免费获取星球 (Github地址)如果没有Github的小伙伴儿。可以关注本人微信公众号：Java学术趴，发送Ajax，免费给发给大家项目源码，代码是经过小编亲自测试的，绝对可靠。免费拿去使用。

9.项目三：根据ID查询省份（Ajax异步对象实现）

项目介绍：这个是使用的 AJAX异步对象，通过获取用户输入的省份ID，查询到这个省份的名称、省份简称、省份的省会等信息。

这个项目的实现需要有一张省份的数据库表支持。大家可以按照下边的表文件自己新建一个。
下边是这个表文件的建表语句，大家可以参考一下。
运行的结果图：当用书输入的id=3的时候的查询结果如下：此时使用的是Ajax进行的局部刷新，不会刷新整个页面。

9.异步请求和同步请求

9.1 异步请求

XMLHttpRequest 对象 open( method , url, true ) 第三个参数 true 表示异步请求
异步请求特点：
1)某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成。
2)浏览器委托异步请求对象工作期间，浏览器处于活跃状态。可以继续向下执行其他命令。
3) 当响应就绪后再对响应结果进行处理

9.2 同步请求

XMLHttpRequest 对象 open( method , url, false ) 第三个参数 false 表示同步请求
同步请求特点：
1)某一个时刻，浏览器只能委托一个异步请求对象发送请求，必须等待请求处理完成。
2)浏览器委托异步请求对象工作期间，浏览器处于等待状态。不能执行其他命令。
3)不推荐使用。

9.3异步请求和同步请求对比

xmlHttp.open(get/post,url,true) : 异步处理请求。使用异步对象发起请求之后，不用等待数据处理完毕，
就可以执行其他的操作,在send之后执行其他代码。可以同时执行多个异步请求。
xmlHttp.open(get/post,url,false) :同步，异步对象必须在处理完成请求，从服务端获取数据之后，才能执行send之后的代码。
在任意的。一次只能执行一个异步请求，必须在处理完成之后（也就是必须等待向服务端发送请求，并且服务端将数据发送回来），
才能执行其他的请求处理。

--------看完的大佬们可以关注一下小编，会一直更新小技巧，免费分享给大家呦！！！---------

点击星球可快速进入小编的Github星球呦！！里边还有更多好玩的技术，等待大家去探索呦！！

关于Ajax原理与使用方式，收藏这一篇文章就够了！！相关推荐

MySQL优化-一篇文章就够了（转发加收藏吧）
关注我,一个仍存梦想的屌丝程序员,每天为你分享高质量编程博客. 回复 "代金券" 免费获取腾讯云和阿里云代金券前言说起MySQL的查询优化,相信大家收藏了一堆:不能使用SEL ...
收藏！一篇文章搞懂项目管理
先说一个观点:人生处处皆项目,项目管理是每个人必备的底层能力,它可以让复杂的问题变得简单,是保证项目成功的手段. 今天和大家聊聊什么是项目管理,项目管理的重要性,如何提高项目管理能力. 01.什么是项 ...
了解redis的单线程模型工作原理？一篇文章就够了
1.首先redis是单线程的,为什么redis会是单线程的呢? 从redis的性能上进行考虑,单线程避免了上下文频繁切换问题,效率高: 从redis的内部结构设计原理进行考虑,redis是基于Reac ...
为什么在ftp的配置中linux和windowns ping不通_2019年电脑配置推荐，收藏一篇文章就够了...
[2019年]建议您按照如下5种档次选择适合自己的电脑,文章较长建议收藏后阅读去年intel涨价太多,目前价格已经下跌,但仍然没有回落到起涨点,在性价比上有明显劣势.不过,intel可不是吃素的,面 ...
收藏！一篇文章搞懂甘特图
一些软件可以在你管理项目的过程中,根据你的项目完成情况,智能生成甘特图. 项目管理是一种以目标为导向的工作方法论.实现目标的基础是设置合理有效的计划. 计划中最重要的是时间计划,它的目的是让管理者把握 ...
搞定 WeakHashMap 的工作原理一篇文章就够了！！！
文章目录一.什么是 WeakHashMap? 二.为什么需要 WeakHashMap? 三.WeakHashMap 的例子四.WeakHashMap 的使用场景五.WeakHashMap 的数据 ...
ajax原理及其优缺点
什么是ajax? AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. a ...
AJAX原理及其特点
1.AJAX本质 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使 ...
浅析ajax原理与用法
1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建动态网页的技术,目的是显示动态局部刷新.通过XML ...
【PHP学习】—利用ajax原理实现登录功能（八）
[PHP学习]-利用ajax原理实现登录功能(八) 通过学习上篇文章我们发现这种方法存在了一定的缺陷,利用页面跳转,HTML页面访问服务器,要等待服务器响应,账号密码输入错误后,还要回退页面重新输入账 ...

关于Ajax原理与使用方式，收藏这一篇文章就够了！！