Ajax笔记

 前端系列
一、HTML5
二、CSS3
三、JavaScript
四、jQuery
五、BootStrap
六、Element
七、Ajax
八、JSON
九、VUE3

---

第一章、Ajax

一、概述

1、概述 AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。 我们先来说概念中的 `JavaScript` 和 `XML`，`JavaScript` 表明该技术和前端相关；`XML` 是指以此进行数据交换。

2、作用 AJAX

作用有以下两方面：

1.与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。

2.异步交互：可以在==不重新加载整个页面==的情况下，与服务器交换数据并==更新部分网页==的技术，如：搜索联想、用户名是否可用校验，等等…

二、快速入门

在 `webapp` 下创建名为 `01-ajax-demo1.html` 的页面，在该页面书写 `ajax` 代码 创建核心对象，不同的浏览器创建的对象是不同的

创建核心对象，不同的浏览器创建的对象是不同的
    var xhttp;
    if (window.XMLHttpRequest) {
      xhttp = new XMLHttpRequest();
    } else {
      // code for IE6, IE5
      xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

发送请求
    //建立连接
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
    //发送请求
    xhttp.send();

获取响应
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          // 通过 this.responseText 可以获取到服务端响应的数据
          alert(this.responseText);
      }
    };

三、Axios

Axios 对原生的AJAX进行封装，简化书写。

1、基本使用 axios 使用是比较简单的，分为以下两步：

    // 1.引入 axios 的 js 文件
    <script src="js/axios-0.18.0.js"></script>
    // 2.使用axios 发送请求，并获取响应结果
    发送 get 请求：
        axios({
            method:"get",
            url:"http://localhost:8080/JavaWeb10-ajax/aJAXDemo1?username=zhangsan"
        }).then(function (resp){
            alert(resp.data);
        })

    发送 post 请求：
        axios({
            method:"post",
            url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
            data:"username=zhangsan"
        }).then(function (resp){
            alert(resp.data);
        });

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

method属性：用来设置请求方式的。取值为 `get` 或者 `post`。

url属性：用来书写请求的资源路径。如果是 `get` 请求，需要将请求参数拼接到路径的后面，格式为： `url?参数名=参数值&参数名2=参数值2`。

data属性：作为请求体被发送的数据。也就是说如果是 `post` 请求的话，数据需要作为 `data` 属性的值。

`then()` 需要传递一个匿名函数。我们将 `then()` 中传递的匿名函数称为 ==回调函数==，意思是该匿名函数在发送请求时不会被调用， 而是在成功响应后调用的函数。而该回调函数中的 `resp` 参数是对响应的数据进行封装的对象，通过 `resp.data` 可以获取到响应的数据。

2、快速入门

3、请求方法别名 为了方便起见， Axios 已经为所有支持的请求方法提供了别名。

如下：

get请求 ： `axios.get(url[,config])`

post请求：`axios.post(url[,data[,config])`

delete请求 ： `axios.delete(url[,config])`

head请求 ： `axios.head(url[,config])`

options请求 ： `axios.option(url[,config])`

put请求：`axios.put(url[,data[,config])`

patch请求：`axios.patch(url[,data[,config])`