传统开发的缺点是浏览器的所有页面都是全局刷新的。如果我们只是想获取或更新页面中的某些信息，就必须将其应用到局部刷新技术中。本地刷新也是有效提升用户体验的一个非常重要的方式。
Ajax技术是js语言的扩展，可以向后台发送请求，从后台获取相关数据，然后在页面本地刷新数据。
本教程将通过ajax的传统使用、json操作和跨领域先进技术对ajax进行全面的讲解。
配合视频效果更好~ ~ ~
https://www.ixigua.com/6846624275877593611
什么是Ajax？
Ajax =异步JaScript和XML(异步JaScript和XML)。
AJAX是一种更新某些页面而无需重新加载整个页面的新方法。
AJAX不是一种新的编程语言，而是一种使用现有技术的新方法。ajax使用的技术包括JaScript、html、dom、xml、css等等。主要是JaScript，XML。
JaScript:使用脚本对象XMLHttpRequest发送请求和接收响应数据XML:发送和接收的数据格式，现在使用json。
AJAX不仅需要前端技术，还需要后端(服务器)的配合。服务器需要提供数据，数据是AJAX请求的响应结果。
全局刷新和局部刷新
在B/S结构项目中，浏览器负责将用户的请求和参数通过网络发送给服务器，服务器使用Servlet(众多服务器技术之一)接收请求并将处理结果返回给浏览器。
浏览器在html和jsp上呈现数据，混合css和js帮助美化页面，或者响应事件。
全局刷新
登录请求处理:
Index.jsp发起了一个登录请求——登录result.jsp服务器。
启动请求请求阶段:
浏览器现在在其内存中有索引页的内容和数据:
服务器端响应结果阶段:
sevlet返回后，完全覆盖了原来的索引页，result.jsp覆盖了所有的浏览器内存数据。整个浏览器数据被完全刷新。重新显示数据、样式、标签等。在浏览器窗口中。
全局刷新原则:
1)浏览器必须亲自向服务器发送请求协议包。
2)此行为导致服务器将响应数据包直接发送到浏览器内存。
3)此行为会导致浏览器内存中的原始内容被覆盖。
4)此行为导致浏览器在显示数据时只显示响应数据。
本地刷新
当浏览器显示数据时，此时，您可以在窗口中同时看到响应数据和浏览器内存中的原始数据。
局部刷新原则:
1)浏览器无法向服务器发送请求。
2)浏览器委托浏览器内存中的脚本对象代替浏览器发送请求。
3)这种行为导致服务器直接将响应包发送到脚本对象内存。
4)此行为导致脚本对象的内容被覆盖，但此时浏览器内存中的大部分内容不受影响。
5)此行为导致浏览器在显示数据时同时显示原始数据和响应数据。
一种实现局部刷新的AJAX技术。
异步请求对象:
在本地刷新中，您需要创建一个对象，而不是由浏览器发起请求。该对象存在于内存中。
它代替浏览器发起请求并接收响应数据。这个对象被称为异步请求对象。
全局刷新是同步行为，局部刷新是异步行为【浏览器数据没有完全更新】。这个异步对象用于在后台与服务器交换数据。XMLHttpRequest就是我们所说的异步对象。
XMLHttpRequest对象可以:
在不重新加载页面的情况下更新网页在页面已加载后向服务器请求数据在页面已加载后从服务器接收数据
所有现代浏览器(IE7+、Firefox、Chrome、Safari和Opera)都内置了XMLHttpRequest对象。通过一行简单的JaScript代码，我们可以创建一个XMLHttpRequest对象。
创建XMLHttpRequest对象的语法(xhr):var xmlhttp = new XMLHttpRequest()；
AJAX中的核心对象是XMLHttpRequest。
AJAX 异步实现步骤
XMLHttpRequest对象介绍
(1)创建对象的方式
var xmlHttp = new XMLHttpRequest()；
(2) onreadstatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState发生变化时，就会触发onreadystatechange事件。这个事件可以指定一个处理函数。
通过判断XMLHttpReqeust对象的状态，得到服务器返回的数据。
语法:
xmlhttp . onreadystatechange = function(){
if(xmlhttp . ready state = = 4 & & xmlhttp . status = = 200){
处理服务器返回数据
}
}
以下是XMLHttpRequest对象的三个重要属性:
属性描述:
OnreadyStatechange属性:一个js函数名或直接定义的函数，每当readystate属性更改时都会调用它。
ReadyState属性:
有一种XMLHttpRequest的状态。从0更改为4。
0:请求未初始化，创建异步请求对象var xmlHttp = new XMLHttpRequest()。
1:初始化异步请求对象，xmlHttp.open(请求模式，请求地址，真)。
2:异步对象发送请求，xmlHttp.send()
3.异步对象接收回复数据并从服务器返回数据。XMLHttpRequest内部处理
4:异步请求对象已完成数据解析。只有这样才能读取数据。
状态属性:
200: "好& # 34；
404:未找到页面
(1)初始化请求参数:
方法:
Open(方法，url，async):初始化异步请求对象。
参数描述:
方法:请求的类型；获取或发布
Url:服务器的servlet地址。
Async:true(异步)或false(同步)
例如:
xmlHttp.open(“get “，” http:192 . 168 . 1 . 20:8080/myweb/query “，true)
(2)发送请求
xmlHttp.send()
(3)接收服务器响应的数据
要从服务器获得响应，请使用
ResponseText或responseXML属性。
ResponseText:获取字符串response形式的响应数据XML:获取XML形式的响应数据。
AJAX 实例全局刷新计算 bmi
要求:计算一个用户的身体质量指数。用户在jsp中输入自己的身高体重；在servlet中计算身体质量指数，显示身体质量指数的计算结果和建议。
身体质量指数指数(BodyMassIndex，英文简称身体质量指数)是用体重的公斤数除以身高的米数的平方得到的数字。是国际上普遍采用的衡量肥胖程度和健康程度的标准。
成人身体质量指数值:
1)太轻:低于18.5
2)正常:18.5-23.9
3)超重:24-27
4)肥胖:28-32岁
5)非常肥胖，32以上
开发步骤：
1.在idea中创建一个名为ch01-bmi-ajax的新项目。
2.配置tomcat服务器。如果已经进行了配置，请忽略此步骤。
选择本地。
配置tomcat服务器的位置
模块增加了tomcat支持
出现窗口
选择2个库。
你确定要用tomcat吗
3.创建一个jsp，用参数名称、重量和高度定义一个表单。
4.创建一个名为BMIServlet的Servlet。
5.注册servlet
创造result.jsp
在web目录下创建一个result.jsp文件。
7.配置运行程序和输入参数。显示bmi
使用HttpServletResponse 响应输出
1.创建一个新的JSP:indexPrint.jsp
2.创建一个名为BMIServeltPrint的新Servlet。
使用 ajax 请求，计算 bmi
1.新ajax.jsp
2.在ajax.jsp的头部指定doAjax()函数。
3.复制BMIServletPrint，重命名BMIServletAjax代码，不做任何更改。
4.注册Servlet
5.在浏览器中访问ajax.jsp。
在BMIServltAjax的第一行设置断点，然后点击jsp中的按钮，发起请求，观察浏览器中弹出内容的变化。
6.修改ajax.jsp的doAjax()函数。
7.请求访问ajax.jsp
点击jsp中的按钮，发起请求，观察浏览器中弹出内容的变化。
8.获取dom对象的值。
9.测试在浏览器中发送ajax请求
10.修改doAjax函数
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。
