初识ajax

刚刚接触ajax，感觉比较抽象。总结了些自己的理解

全局刷新：

1.使用form,href等发起的请求为全局刷新

2.用户发起请求，视图改变，跳转视图，使用新的数据添加至页面。

3.缺点：

​ a.传送数据量较大，占用网络带宽

​ b.浏览器需要重新渲染整个页面

​ c.用户体验好差

局部刷新

1.在当前页面中。发起请求，获取数据，更新当前页面的dom对象，对视图部分刷新

2.优点：

​ a.数据量小，网络中传输速度快

​ b.更新页面内容，部更新页面，浏览器不用全部渲染视图

​ c.一个页面可以做多个局部刷新

​ d.从服务器获取数据，更新视图

3.异步请求对像

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

4.异步对象XMLHttpRequest接收

1.js中的一种对象，使用js语法创建和使用这个对象

​ var xhr = new XMLHttpRequset();创建后使用xhr对象的属性或者函数进行异步对象的操作

使用异步对象进行局部刷新，异步对象主要发起请求，传递请求的参数，从服务器接收数据

2.局部刷新需要使用的技术：

​ a.javascript：创建XMLHttpRequest对象，调用他的属性与方法

​ b.DOM:处理dom,更新select的数据

​ c.css:处理视图，更新，美化

​ d.servlet:服务器技术

​ e.数据格式：json

Ajax

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法

使用ajax进行局部刷新

核心：javascript与xml(json)

异步对象XMLHttpRequest属性与方法

​ 1.var xhr = new XMLHttpRequset();创建后使用xhr对象的属性或者函数进行异步对象的操作

​ 2.XMLHttpRequest方法

​ ①open(请求方式，服务器访问地址，异步还是同步)

​ 例如：xhr.open(‘get’,;loginServlet,true)

​ ②send():使用异步对象发送请求

​ 3.XML.HttpRequest属性

​ ①readyState:请求状态：

​ a，0：表示创建异步对象时，new XMLHttpRequset();

​ b.，1：表示初始异步对象的请求参数，执行open()方法

​ c.，2：使用send()方法发送请求

​ d.，3：使用异步对象从服务器接收数据

​ e.，4：异步对象接收数据，并在异步对象内部处理完成后

​ ②status属性:网络状态和Http的状态码对应

​ a.200:请求成功

​ b.404:服务器资源没有找到

​ c.500:服务器内部代码有错误

​ ③responseText属性:表示服务器返回的数据

​ 例如：var data = xhr.responseText;

异步对象XMLHttpRequest使用步骤

1使用js创建异步对象

var xhr = new XMLHttpRequest();

2.初始请求参数，执行Open()函数

xhr.open('get',loginServlet,ture)

​ a.‘get’--------请求方法

​ b.,loginServlet--------请求地址

3.发送请求，执行send()

​ xhr.send()
4 给异步对象绑定事件，事件名称 onreadystatechange

​ xhr.onreadystatechange = function(){ 事件发生时的代码}

​ 根据readyStatue值做请求处理

```javascript
var xhr = new onreadystatechange()
			if(xhr.readyState == 4 %% xhr.status==200){
				// 从页面获取数据，更新当前DOM对象
				var data= xhr.responseText;
				// 更新数据
				document.getElementById('box').innerHTML = data
			}