Ajax前端技术
Ajax前端技术
前端技术:在浏览器中执行的程序都是前端,html , css,js等等
后端技术:在服务器中执行的程序，使用java语言开发的后端程序。servlet.,jsp, jdbc.mysq.,tomcat等等
1、全局刷新和局部刷新
1、全局剧新:使用form,href等发起的请求是全局刚新。
用户发起请求，视图改变了，跳转视图，使用新的数据添加到页面。
缺点:
- 1．传选数据量比较大。占用网洛的带宽
- 2．浏览器需要重新的渲染整个页面。
- 3．用户的体验不是那么好
2、局部刷新:在当前页面中，发起请求，获取数据，更新当前页面的dom对象。对视图部分剧新。
特点:
- 1.数量比较小,在网络中传输速度快。
- 2．更新页面内容,是部分更新页面,浏览器不用全部演染视图。
2、异步请求对象
异步对象 XMLHttpRequest
异步对象实现局部刷新，需要创建一个对象，代替浏览器发起请求的行为，传递请求参数，并从服务器接收数据将这个对象存在内存中。
代替浏览器发起请求并接收响应数据。这个对象叫做异步请求对象。
全局刷新是同步行为，局部刷新是异步行为[浏览器数据没有全部更新]异步对象是在浏览器内部的一种javascript对象。各大浏览器都能支持异步对象的使用。chrome firework, ie,opper ,
这个异步对象用于在后台与服务器交换数据。
1.全局请求和异步请求方式：
image.png
3.异步对象XMLHttpRequest介绍
js中的一种对象,使用js语法创建和使用这个对象。
var xhr = new XMLHttpRequest0;
之后就可以使用xhr对象的属性或者函数。进行异步对象的操作。
使用异步对象实现局部剧新，异步对象主要负责发起请求，传递请求的参数，并从服务器接收数据。局部刷新需要使用那些技术:
- （1） javascript :创建XMLHttpRequest对象，调用它的属性或者方法
- （2） dom:处理dom，更新select的数据
- （3）csS:处理视图,更新。美化。
- （4） servlet:服务器端技术
- （5）数据格式: json。它之前是xml
把上面这些技术的综合使用叫做ajax(阿责克斯)。
4.异步对象XMLHttpRequest属性和方法
1.创建异步对象,使用js的语法
var xhr = new XMLHttpRequest();
2.XMLHttpRequest方法
-
（1）open[(请求方式服务器端的访问地址，异步还是同步
例如: xhr.open("get ","loginServlet",true）; -
（2）send(:使用异步对象发送请求
3.XMLHttpRequest属性
readyState属性:请求的状态
- 0:表示创建异步对象时,new XMLHttpRequest0;
- 1:表示初始异步对象的请求参数。执行open(方法
- 2:使用send(方法发送请求。
- 3:使用异步对象从服务器接收了数据
- 4:异步对象接收了数据,并在异步对象内部处理完成后。
status属性:网络的状态，和Http的状态码对应
- 200:请求成功
- 404：服务器资源没有找到
- 500:服务器内部代码有错误
responseText属性:表示服务器端返回的教据
例如: var data = xhr.responseText;
5、异步对象XMLHttpRequest使用步骤
1、使用js创建异步对象
var xhr = new XMLHttpRequest(
2、给异步对象绑定事件。
事件名称 onreadystatechange
例如button增加单击事件 onclick
xhr绑定事件
xhr.onreadysatechange=functiorT{当事件发生时执行的代码}
<input type=""button” onc1ick="btnclickO""/>
<script type="text/javascript">
function btnc1ickOi
按钮单击的处理代码
}
</script>
在绑定事件中做什么。根据readyState值做请求的处理
3、初始请求的参裁。执行open()函教xhr.open("get","loginServlet",true)
4、发送请求,执行send0
xhr.send()
6、同步请求和异步请求
看open(请求方式，访问uri地址，boolean是不是异步的)
true:异步请求
false:同步请求
