Ajax学习笔记

简介

• Ajax是用来做浏览器数据的局部刷新的技术（2003年左右出现），核心对象是异步对象：XMLHttpRequest。

• 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

• Asynchronous Javascript And XML（异步JavaScript和XML）

• Ajax不是一种语言，而是一个做局部刷新的方法，主要运用：JavaScript、dom、css、xml等技术完成局部刷新。

• JavaScript：主要负责创建异步对象，发送请求，更新页面的DOM对象。

• xml：负责存储数据，并在网络中传输的一种数据格式。现在使用json替换xml。

• ajax需要请求服务器端的数据，用来局部更新页面中的数据。

全局刷新和局部刷新的区别

全局刷新：是指浏览器当前页面数据被另一个页面数据覆盖掉。在网络中传输大量的数据。浏览器需要加载，渲染页面。

局部刷新：在网页的内部，发起请求，获取数据，只改变页面中的部分内容，其余的页面内容无需加载和渲染，网络中数据传输量少。

可见局部刷新的好处，而我们Ajax就是用来实现局部刷新的。

Ajax实现原理

Ajax的核心对象：XMLHttpRequest异步请求对象。

1) 不能由浏览器发送请求给服务端

2) 浏览器委托浏览器内存中一个异步请求对象XMLHttpRequest代替浏览器发送请求.

3) 服务端处理完请求直接将【响应包】发送异步请求对象XMLHttpRequest内存中

4）XMLHttpRequest然后用javascript来操作DOM而局部更新页面

由于不是浏览器发送的请求，所以浏览器页面不会刷新。而是XMLHttpRequest这个人在自己偷偷操作部分页面。

Ajax使用步骤

第一：创建异步对象XMLHttpRequest

var xmlHttp = new XMLHttpRequest();   这是js的语法

第二：给异步对象绑定状态变化事件

给异步对象绑定onreadystatechange事件，每当异步对象的 readyState属性值改变时，就会触发 onreadystatechange 事件。

xmlHttp.onreadystatechange = function(){
    
}

异步对象的readyState属性：表示异步对象的状态
0: 创建异步对象时，new XMLHttpRequest(); readyState=0
1: 初始异步请求对象，xmlHttp.open();
2: 发送请求，xmlHttp.send();
3: 从服务器端获取了数据，此时是未进行处理解析的原始数据，3是异步对象内部使用。
4: 异步对象把接收到的数据进行处理解析后。开发人员一般在这个时候，进行数据的更新，更新页面。

异步对象的Status属性：
表示网络通讯的状态，状态码
200表示请求响应成功，正常结束。
404表示访问的资源不存在
405表示前端发送的请求方式与后端请求的处理方式不一致时发生
500表示服务器端的程序出现了异常。一般会认为是服务器端的错误导致的。

第三：初始化异步请求对象

xmlHttp.open("请求的方式get|post","服务器端的访问地址",true|false);
true（默认值）表示异步请求,指的是只要下面的异步对象发送完请求,就可以执行后续的代码,不用等服务器响应回来,数据处理完,可以同时发送多个异步请求,效率高.

false表示同步请求,指的是自请求发起后,要等到请求结束,也就是等服务器响应回来数据后,才能执行后续的请求,不能同时发送多个请求,效率低.

xmlHttp.open("get","http://192.168.1.12:8080/loginServlet?name=lin&pwd=123",true);

第四：使用异步对象发送请求

xmlHttp.send();
获取服务器端返回的数据，使用异步对象的属性 responseText
xmlHttp.responseText