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);

});

【JavaWeb】学习笔记——Ajax、Axios的更多相关文章

JavaWeb学习笔记——Ajax
JavaWeb学习笔记总结目录篇
JavaWeb学习笔记一: XML解析 JavaWeb学习笔记二 Http协议和Tomcat服务器 JavaWeb学习笔记三 Servlet JavaWeb学习笔记四 request&resp ...
javaweb学习笔记整理补课
javaweb学习笔记整理补课 * JavaWeb: * 使用Java语言开发基于互联网的项目 * 软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端 ...
[学习笔记]AJAX学习
AJAX学习 ——在w3cschool学习AJAX的学习笔记参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象所有现代浏览器均支 ...
【JAVAWEB学习笔记】06_jQuery基础
接05的学习笔记. 四.使用JQ完成省市二级联动 1.需求分析使用jquery完成省市二级联动 2.技术分析 2.1数组的遍历操作方式一: $(function(){ // 全选/ 全不选 $(& ...
javaweb学习笔记（二）
一.javaweb学习是所需要的细节 1.Cookie的注意点 ① Cookie一旦创建,它的名称就不能更改,Cookie的值可以为任意值,创建后允许被修改. ② 关于Cookie中的setMaxAg ...
Javaweb学习笔记（一）
一.javaweb学习是所需要的细节 1.发送响应头相关的方法 1).addHeader()与setHeader()都是设置HTTP协议的响应头字段,区别是addHeader()方法可以增加同名的响应 ...
Javaweb学习笔记——（二十三）——————AJAX、XStream、JSON
AJAX概述 1.什么是AJAX ajax(Asynchronous JavaScript and xml) 翻译成中文就是"异步JavaScript和xml&quo ...
【JAVAWEB学习笔记】28_jquery加强：json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用一.json数据结构 1.什么是json JSON(Jav ...

随机推荐

Apache Dolphinscheduler 1.3.x 系列配置文件指南
前言本文档为dolphinscheduler配置文件指南,针对版本为 dolphinscheduler-1.3.x 版本. 考虑公众号对markdown文件格式支持不那么友好的问题,建议大家在PC端 ...
Redis 08 地理位置
参考源 https://www.bilibili.com/video/BV1S54y1R7SB?spm_id_from=333.999.0.0 版本本文章基于 Redis 6.2.6 Redis 的 ...
Excel 插入嵌入式图表和独立图表的方法
描述嵌入式图表:是一种与当前工作表相同位置的图表,且悬浮在表格之上,不受表格限制,因此称之为嵌入式图表. 独立图表:是独立于当前工作表的图表,打印时,需要单独将其打印出来. 插入独立图表的图文教程: ...
IP 地址分类和子网掩码
IP 地址分类 IP 地址是由 4 组 8 位二进制表示的,格式为:xxxxxxxx.xxxxxxxx.xxxxxxxx.xxxxxxxx.十进制表示的格式为:xxxx.xxxx.xxxx.xxxx, ...
Linux或Docker里安装minio / Docker中安装h5ai
此文为单节点搭建操作 Linux中搭建minio 对象存储服务器下载minio安装包 wget https://dl.minio.io/server/minio/release/linux-amd6 ...
Linux安装LibreCAD
目录目录添加软件源并更新软件列表 sudo add-apt-repository ppa:librecad-dev/librecad-daily sudo add-apt-repository p ...
【读书笔记】C#高级编程第二十五章事务处理
(一)简介事务的主要特征是,任务要么全部完成,要么都不完成. (二)概述事务由事务管理器来管理和协调.每个影响事务结果的资源都由一个资源管理器来管理.事务管理器与资源管理器通信,以定义事务的结果. ...
【SQLServer】max worker threads参数说明
本文介绍如何使用SQL Server Management Studio或Transact-SQL在SQL Server中配置最大工作线程服务器配置选项. max worker threads选项配置 ...
day38-IO流05
JavaIO流05 4.常用的类04 4.4节点流和处理流03 4.4.8打印流-PrintStream和PrintWriter 打印流只有输出流,没有输入流 1.简单介绍及应用 PrintStrea ...
从源码中理解Spring Boot自动装配原理
个人博客:槿苏的知识铺一.什么是自动装配 SpringBoot 定义了一套接口规范,这套规范规定:SpringBoot在启动时会扫描外部引用jar包中的META-INF/spring.factori ...

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