Ajax基础学习-蒲公英云

Ajax基础学习

1.ajax前端技术

前端技术：在浏览器中执行的程序都是前端，HTML，css，js等
后端技术

（1）全局刷新：使用form，href等发起的请求是全局刷新
用户发起请求，视图改变了，使用新的数据添加到页面
缺点：
1.传递数据量比较大，占用网络的带宽
2.浏览器需要重新渲染整个页面
3.用户的体验感不好

（2）局部刷新：在当前页面中，发起请求，获取数据，更新当前页面的dom对象，对视图部分刷新
（异步对象，在浏览器内存中的JavaScript对象，各大浏览器都能支持异步对象
异步对象 XMLHttpRequest
）
特点：
1.数量比较小，在网络中传输速度快
2.更新页面内容，是部分更新页面，浏览器不用全部渲染视图
3.在一个页面中，可以做多个局部刷新
4.从服务器获取数据，拿到更新视图

2.异步请求对象

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

3.异步对象XMLHttpRequest接收

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

var xhr = new XMLHttpRequest();

之后就可以使用xhr对象的属性或者函数，进行异步对象的操作。

使用异步对象实现局部刷新，异步对象主要是负责发起请求，传递请求的参数并从服务器端接收数据。(网络操作)。

局部刷新需要的技术

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

2）dom：处理dom，更新select的数据

3）css：处理视图，更新，美化

4）servlet：服务器端技术

5）数据的格式：json。之前是xml

把上面这些技术的综合使用叫做ajax，

4.Ajax

AJAX = Asynchronous Javascript And XML（异步JavaScript和XML），是一种无需重新加载整个页面的情况下，能够更新部分页面的新方法

AJAX不是一种新的语言，是多种技术的综合使用，包含了dom,javascript,jsp,jdbc等

我们使用ajax实现局部刷新

Ajax的核心是JavaScript和xml(json):使用JavaScript操作异步对象XMLHttpRequest和服务器交换使用的json格式。

5.异步对象XMLHttpRequest的属性和方法

1.创建异步对象，使用js语法

var xhr = new XMLHttpRequest();

2.XMLHttpRequest方法

open(请求方式，服务器端的访问地址，异步还是同步,true代表异步)

xhr.open("get","login",true)

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

3.XMLHttpRequest属性

readyState属性：请求的状态

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

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

2：表示使用send()方法发送请求。

3：表示使用异步对象从服务器端接收了数据

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

status属性：网络的状态，和Http的状态码对应

200：表示请求成功

404：表示服务器端资源未找到

500：服务器内部代码有错误

responseText属性：表示服务器端返回的数据

例如：

var data = xhr.responseText;

6.异步对象XMLHttpRequest使用步骤

1）使用js创建异步对象

var xhr = new XMLHttpRequest();

2）给异步对象绑定事件，事件名称onereadystatechange

例如button增加单击事件 onclick

xhr绑定事件

xhr.onreadystatechange = function{ 
//当事件发生时执行的代码
}

在绑定事件中做什么，根据readyState值做请求

xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && status ===200){
//从服务器端已经获取数据，更新当前的dom对象，完成请求的处理
var data = xhr.responseText;
//更新dom对象
documen.getElementByTd("#mydiv").innerHTML = data;
}
}