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{当事件发生时执行的代码}

在绑定事件中做什么。根据readyState值做请求的处理

3、初始请求的参裁。执行open()函教xhr.open("get","loginServlet",true)

4、发送请求,执行send0

xhr.send()

---

6、同步请求和异步请求

看open(请求方式，访问uri地址，boolean是不是异步的)
true:异步请求
false:同步请求