Ajax自学笔记

我是最近几天才开始接触到的Ajax的学习，新人写文有不对的地方请大佬们指出昂。

了解Ajax之前，先去了解一下浏览器Web的工作原理。

即为B（浏览器）/S（服务器）的工作模式

浏览器利用HTTP请求给Web的服务器，Web读取相关的html文件并利用HTTP响应发给浏览器。

HTTP是超文本传输协议（超文本即格式文本，含有其他资源的文本），它在浏览器与服务器建立了连接之后，浏览器对服务器发送的请求就称为HTTP请求，服务器接受到请求作出响应，称为HTTP响应。以上就是浏览器的工作原理。

Ajax概念

对前端和后端进行数据、文本传递的一种技术。

它的好处是可以使网页实现异步更新，即不重新加载的整个网页的情况下，可以对网页的内容进行部分的更新。

可以用下面两幅图来对比一下传统Web工作流程和Ajax工作流程：

传统Web工作流程↓

 

Ajax工作流程↓

 Ajax应用

通常通过XMLHttpRequest对象(Ajax最核心的技术）

步骤如下↓

1.创建XMLHttpRequest对象

var oReq = new XMLHttpRequest();

2.建立监听，当服务器获取到响应时候，调用回调函数，进行多种方式的数据处理

oReq.addEventListener("load",function(){
console.log(this.responseText)});

3.设置参数（open()用于设置异步请求的URL，请求方法以及其他的参数信息；）

（常用方法：

  GET        ：获取

  POST        ：新增

  PUT        ：修改

  DELETE        ：删除）

oReq.open("GET","url")

4.发送请求到服务端（send（）用于向服务器发送请求，如果请求声明为异步，该方法就会立即返回，否则将等到收到响应为止）

oReq.send();

创建一个简单的Ajax的方法

const ajax={
xhr:new XMLHttpRequest (),
getJSON: function (url,seccess,failure){
if (!this.xhr){
if (failure) failure (new Error("can not create ajax accessor"));
return false;
}
this.xhr.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE){
if (this.status ===200) {
if(success) seccess(this.response);
} else {
if (failure) failure(new Error("ajax get failed."));
return false;
}
}
};
this.xhr.open("GET", url);
this.xhr.responseType = "json";
this.xhr.send();
},
};