Ajax入门-优快云博客

本文链接：https://blog.youkuaiyun.com/Chase_______/article/details/147008699

文章目录

概述

Ajax(Asynchronous JavaScript And XML),即异步的JacaScript和XML
作用:

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

同步/异步请求

Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。

同步请求发送过程如下图所示：

请添加图片描述
浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

异步请求发送过程如下图所示：

请添加图片描述
浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

原生Ajax

此处能看懂即可，后面有对Ajax封装的Axios,故不做要求
详情可看官方文档

书写方法

准备好数据地址
创建XMLHttpRequest对象:用于和服务器交换数据
向服务器发送给请求
获取服务器响应数据

<body>
  <input type="button" value="获取数据" onclick="getData()">
  <div id="div1"></div>
</body>

<script>
  function getData() {
    //1. 创建XMLHttpRequest
    var xmlHttpRequest = new XMLHttpRequest();

    //2. 发送异步请求
    xmlHttpRequest.open('GET', '地址');
    xmlHttpRequest.send();//发送请求

    //3. 获取服务响应数据
    xmlHttpRequest.onreadystatechange = function () {
      if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
        document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
      }
    }
  }
</script>

Axious

概念

Axios是对原生的AJAX进行封装。

Axious 官网

Axious 使用方法

引入 Axious 的 js 文件

<script src="js/axios-0.18.0.js"></script>

使用 Axious 发送请求，并获取响应结果

//发送get请求
axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/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还针对不同的请求，提供了别名方式的api, 用于简化使用

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求
将上述请求简化后得

//发送get请求
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})
//发送post请求
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})
```![请添加图片描述](https://i-blog.csdnimg.cn/direct/97f80b5a848d4cd7be3b3497aad7f67b.png)