【JavaWeb】学习笔记——Ajax、Axios

鸡先生

发布于 2022-10-29 17:19:23

8370

发布于 2022-10-29 17:19:23

文章被收录于专栏：鸡先生

Ajax

Ajax 介绍

AJAX(Asynchronous JavaScript And XML):异步的JavaScript 和 XML

AJAX 的作用：

与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
异步交互：可以在不重新加载整个页面的情况下，与服务器交互数据并更新部分网页的技术

同步和异步

AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO（爬虫）不友好，爬不到数据

AJAX 快速入门

GET 请求基本操作

//给button按钮绑定事件
const btn=document.getElementsByTagName('button')[0];
btn.onclick=function(){
    //1.创建核心对象
    const xhr=new XMLHttpRequest();
    const result=document.getElementById("result");
    //2.初始化 设置请求方法和 url
    xhr.open('GET','http://127.0.0.1:8000/ajaxservlet');
    //3.发送
    xhr.send();
    //4.事件绑定 处理服务端返回的结果
    //on when  当...的时候
    //readystate 是 xhr 对象中的属性表示状态
    //               0：未初始化 1：open()方法调用完毕 2：send()方法调用完毕 
    //              3：服务端部分返回结果 4：服务端返回了所以结果
    //change 改变
    xhr.onreadystatechange =function(){
    //判断(服务端返回了所有结果)
          if(xhr.readyState===4){
          //判断响应状态码 200 404 403 401 500
          //2xx 表示成功
          if(xhr.status >= 200 && xhr.status < 305){
          //处理结果  行、头、空行(在应用层没有实际意义)、体
          //1.响应行
          // console.log(xhr.status);//状态码
          // console.log(xhr.statusText);//状态字符串
          // console.log(xhr.getAllResponseHeaders());//所有头
          // console.log(xhr.response);//响应体
          //设置 result 的文本
           result.innerHTML=xhr.response;}

           else{

		   }
                }
            }
        }

PSOT 请求基本操作

//获取元素对象
    const result =document.getElementById("result");
    //绑定事件
    result.addEventListener("mouseover",function(){
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化 设置类型与 URL
        xhr.open('POST','http://127.0.0.1:8000/server');
        //3.发送
        xhr.send();
        //4.事件绑定
        xhr.onreadystatechange=function(){
        //判断
        if(xhr.readyState===4){
           if(xhr.status>=200&&xhr.status<305)
             {
                //处理服务端返回的结果
                result.innerHTML = xhr.response;
              }
           }
        }
    });

服务端

@WebServlet("/ajaxservlet")
public class ServletDemo1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //1.响应数据
        resp.getWriter().write("hallo ajax");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

案例

使用AJAX验证用户名是否存在需求：在完成用户注册时，当用户输入框失去焦点时，校验用户名是否在数据库已存在

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="reg-form" action="#" method="get">
        <table>
            <tr>
                <td>用户名</td>
                <td>
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" style="display: none">用户名已存在</span>
                </td>
            </tr>

            <tr>
                <td>密码</td>
                <td>
                    <input name="password" type="password" id="password">
                    <br>
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    //1. 给用户名输入框绑定 失去焦点事件
    document.getElementById("username").onblur=function (){
        //2. 发送ajax请求
        //获取用户名
        var username=this.value;

        //创建核心对象
        const xhr=new XMLHttpRequest();
        const result=document.getElementById("result");
        //初始化 设置请求方法和 url
        xhr.open('GET','http://localhost:8080/untitled_war/servletUserServlet?username='+username);
        xhr.send();//发送
        //事件绑定 处理服务端返回的结果
        xhr.onreadystatechange =function(){
            if(xhr.readyState===4&&xhr.status >= 200 && xhr.status < 305) {//响应成功
               //判断用户名是否存在
               if(this.responseText=="true"){
                    //存在：显示提示信息
                   document.getElementById("username_err").style.display = '';
               }else {
                    //不存在：清楚提示信息
                   document.getElementById("username_err").style.display = 'none';
               }
            }else {//响应失败

            }
        }
    }
</script>
</html>

后端代码

package com.itheima.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/servletUserServlet")
public class AjaxServletDemo1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 接收用户名
        String username = req.getParameter("username");

        //2. 调用servlet 查询User对象
        boolean flag = true;

        //3. 响应标记
        resp.getWriter().write(""+flag);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

AJAX 相关操作

设置请求头

//设置请求头
//Content-Type：请求体类型
//application/x-www-from-urllencoded：参数查询字符串类型(固定类型)
xhr.setRequestHeader('Content-Type','application/x-www-from-urllencoded');
xhr.setRequestHeader('name','atguigu');

设置请求参数

//GET请求的参数在地址栏中，这种方法容易暴露数据，非常不安全。
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');

//POST请求的参数在响应体重，相较于GET数据隐秘性更高。
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');/*两种方式都是有效的*/

JSON对象传输方法

客户端

//客户端我们接收的还是一个字符串，如果将这个字符串装为对象呢？
//方法一：手动对数据转化
let data = JSON.parse(xhr.response);

//方法二：设置响应体数据的类型
xhr.responseType = 'json';
//注意:要在请求初始化的时候就定义

服务端

//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应头
response.setHeader('Access-Control-Allow-Headers','*');
//响应一个数据
const data={
    name:'孙悟空'
};
//进行字符串转换
let str=JSON.stringify(data);
//设置响应体
response.send(str);

请求超时与网络异常处理

客户端

//超时设置 超过2s
xhr.timeout=2000;
xhr.ontimeout=function(){//超时回调
alert("网络异常，请稍后重试");
}

xhr.onerror=function(){//网咯异常回调
alert("你的网络好像有点问题");
}

服务端

app.get('/delay',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*'); 
    setTimeout(() => {
        //设置响应体
    response.send('延时响应');
    }, 3000);
});

取消请求

const xhr=new XMLHttpRequest();/*创建对象*/
xhr.abort();

同源策略

是浏览器的一种安全策略。
同源：协议、域名、端口号必须完全相同。违背同源策略就是跨域

不过AJAX是默认满足同源策略的

跨域解决方案一（只支持 get 请求。

在网页中有一些标签天生具有跨域能力，比如：img link iframe script。于是我们可以利用一个非官方的跨域解决方案JSONP 来解决跨域问题，它纯粹凭借程序员的聪明才智开发出来的，JSONP 就是利用script 标签的跨域能力来发送请求的。

JSONP 使用

//1.动态的创建一个 script 标签
var script = document.createElement("script");
//2.设置 script 的 src，设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data)
{
  alert(data.name);
};
//3.将 script 添加到 body 中
document.body.appendChild(script);

// 4.服务器中路由的处理
router.get("/testAJAX",function(req , res){
  console.log("收到请求");
  var callback = req.query.callback;
  var obj =  {name:"孙悟空", age:18 }
  res.send(callback+"("+JSON.stringify(obj)+")");
});

跨域问题解决方案二（支持 get 和 post 请求。

通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。于是官方给我们提供了一个跨域解决方案 CORS（Cross-Origin Resource Sharing：跨域资源共享）。它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

官方文档：https://developer.mozilla.org/zh-CN/docs/web/http/cors

CORS 使用

 router.get("/testAJAX" , function (req , res) {
   //通过 res 来设置响应头，来允许跨域请求
   //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
   res.set("Access-Control-Allow-Origin","*");
   res.send("testAJAX 返回的响应");
 	})

Axios

Axios 异步框架

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。Axios 对原生的Ajax进行封装，简化书写

官方网站：https://www.axios-http.cn/docs/intro

特性

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

安装

用 npm:
$ npm install axios

使用 bower:
$ bower install axios

使用 yarn:
$ yarn add axios

使用 jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用 unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

快速入门——使用axios 发送请求，并获取响应结果

//GET
axios({
  method:"get",
  url:"http://localhost:8080/ajax-demo/aJAXDemo1?username=zhangshang"
}).then(function(resp)){
  alert(resp.data);
}

//POST
axios({
  method:"post",
  url:"http://localhost:8080/ajax-demo/aJAXDemo1"
  data:"username=zhangshang"
}).then(function(resp)){
  alert(resp.data);
}

Axios 语法

基础语法

方法	作用
axios(config)	通用/最本质的发任意类型请求的方式
axios(url[, config])	可以只指定url发get请求

加粗的方法是比较常用的方法

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

方法	作用
axios.request(config)	等同于 axios(config)
axios.get(url[, config])	发get请求
axios.post(url[, data[, config]])	发post请求
axios.delete(url[, config])	发delete请求
axios.put(url[, data[, config]])	发put请求
axios.head(url[, config])	发head请求
axios.options(url[, config])	发options请求
axios.patch(url[, data[, config]])	发patch请求

注意：在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

示例

//GET请求
axios.get("url")
    .then(function(resp)){
	alert(resp.data);
});

//POST请求
axios.post("url","参数")
    .then(function(resp)){
	alert(resp.data);
});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-18，如有侵权请联系 cloudcommunity@tencent.com 删除

php