AJAX、AXIOS(基本介绍、入门使用

一、AJAX

老样子,我们先抛出三个问题

  • 什么是AJAX?
  • 为什么要使用AJAX?
  • AJAX有什么作用?

1,1、什么是AJAX(异步,同步的区别)

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。

Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。

Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下,能够更新部分⽹⻚的技术。

通过在后台与服务器进⾏少量数据交换,Ajax 可以使⽹⻚实现异步更新。这意味着可以在不重新加载整个⽹⻚的情况下,对⽹⻚的某部分进⾏更新。

传统的⽹⻚(不使⽤ Ajax)如果需要更新内容,必须重载整个⽹⻚⻚⾯。

1、同步:发送⼀个请求,需要等待响应返回,然后才能够发送下⼀个请求,如果该请求没有响应,不能发送下⼀个请求,客户端会处于⼀直等待过程中 

2、异步:发送⼀个请求,不需要等待响应返回,随时可以再发送下⼀个请求,即不需要等待。

1,2、为什么要使用AJAX

为了保留页面状态如果没有ajax的话,浏览器与服务器交互就必须刷新页面(无论是form提交还是href跳转)带来的结果就是原页面信息丢失。

无刷新的好处:
1、只更新部分页面,有效利用带宽
2、提供连续的用户体验
3、提供类似c/s的交互效果,操作更方便

1,3、AJAX的作用

  • 不刷新页面更新网页

  • 在页面加载后(使用mounted钩子函数)从服务器请求数据

  • 在页面加载后(使用mounted钩子函数)从服务器接收数据

  • 在后台向服务器发送数据

 AJAX、AXIOS(基本介绍、入门使用_第1张图片

二、AJAX快速入门

分三步走

  • 创建XMLHttpRequest对象:用于和服务器交换数据
  • 向服务器发送请求
  • 获取服务器响应书去

2.1、创建对象

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2.2、发送请求

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

3.3、获取响应对象

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
} 

完整示例

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", "你的项目路径", true);
xhttp.send();
function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
} 

三、AXIOS

老样子,我们还是先抛出三个问题

  • 什么是AXIOS?
  • 为什么要使用AXIOS?
  • AXIOS有什么作用?

3.1、什么是AXIOS

  1. Axios 是一个基于 promise 的 异步 ajax 请求库,前端最流行的 ajax 请求库。简单的讲就是可以发送get、post请求,负责与后端交互。
  2. Vue、React等框架的出现,促使了Axios轻量级库的出现, react/vue 官方都推荐使用 axios 发 ajax 请求。
  3. 因为Vue等,不需要操作Dom,所以不需要引入Jquery.js了
     

3.2、 为什么要使用AXIOS

  1. 传统的Ajax是基于XMLHttpRequest(XHR),配置和调用方式非常混乱,所以在开发中很少使用,而是使用 jquery-ajax
  2. 首先我们需要明确一点,在vue的整个开发中是不需要使用 jquery的,那么意味着为了方便我们进行一个网络请求,特意引入一个重量级的框架jquery,得不偿失
  3. axios有非常多的优点,并且使用起来也非常的方便

说大白话就是Ajax配置起来过于麻烦,被Axios轻量级框架代替了

3.3、AXIOS有什么作用

  • 从 node.js 创建http 请求
  • 转换请求数据和响应数据
  • 自动转换json数据
  • 拦截请求和响应
  • 支持Promise API
  •  从浏览器中创建XMLHttpRequests
  • 取消请求
  • 客户端支持防御XSRF

四、AXIOS快速入门

1,引入axios.js文件(PS:自己去官网下载哦)

你可能感兴趣的:(JavaWeb,VUE,ajax,javascript,前端)