ajax技术的学习笔记

ajax技术

目的：实现了在无需刷新整个页面就可以局部加载数据，避免了一些不必要的更新，避免了不必要的资源浪费，提高用户浏览数据的体验。

实现原理：

普通http请求：浏览器直接发送请求到服务器端，服务端响应数据给浏览器，浏览器会直接响应数据到页面上，即刷新着整个页面，过程开发人员是不可控的；
ajax请求：一种特殊的http请求，浏览器将http请求操作交给了ajax对象代理，即浏览器发送请求给ajax进行处理，处理后ajax再将请求发送给服务器端；响应同理，服务器端将响应发送给ajax，ajax处理后再将响应发送给浏览器端，过程是开发人员可控的，ajax接收到响应数据不会在页面上显示这个数据，我们一般说的局部刷新，是我们拿到ajax请求回来的响应数据，自己采用编码的方式进行的手动刷新（局部填充数据）

实现步骤

1、创建ajax对象
在javascript中有一个内置构造函数XMLHttpRequest（），创建此构造函数的实例对象就是创建代理对象ajax
小知识点补充：javascript是脚本语言，依赖于浏览器本身，只要浏览器支持JavaScript，就可以正常执行。

var xhr = new XMLHttpRequest();

2、告诉Ajax请求地址以及请求方式
ajax对象的open方法，两个参数：请求方式、请求路由

xhr.open(‘get’,’http://localhost:8080/web/test’)

3、发送请求

xhr.send();

4、获取服务端给客户端的响应数据，因为各方面的因素影响（比如：网速）客户端并不知道什么时候服务端会响应，这个时间是不确定的，所以我们不可以在send方法后直接获取请求结果，我们需要一个在xhr的onload事件下面添加事件处理函数，当服务端对客户端做出来响应，客户端会自动调用onload事件对应事件处理函数，我们可以通过xhr对象下的responseText属性获取服务器端的响应数据

xhr.onload = function (){
        console.log(xhr.responseText);
}