Ajax用法总结(包括原生Ajax、Jquery、Axois)

HTTP知识

HTTP(hypertext transport protocol)协议『超文本传输协议』,协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文

请求行:  GET、POST  /s?ie=utf-8...(url的一长串参数)  HTTP/1.1 
请求头:  Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
        ...
        
空行
请求体:  username=admin&password=admin (Post、Put有)
image-20231209210341376

点击原始才可看到请求行等详情信息。

image-20231209210501931

Get请求载荷:url的发送的json格式参数。

image-20231209211531937

Post请求体:发送的表单数据

image-20231209212025552

响应报文

响应行:      HTTP/1.1  200  OK
响应头:      Content-Type: text/html;charset=utf-8
            Content-length: 2048
            Content-encoding: gzip
            ...
            
空行    
响应体:      <html>
              <head>
              </head>
              <body>
                  <h1>尚硅谷</h1>
              </body>
          </html>

image-20231209211026367

响应体:这里返回的是HTML文本,显示网页。

image-20231209211101390

原生AJAX

AJAX简介

AJAX 全称为 Asynchronous JavaScript And XML, 就是异步的 JS 和 XML。

XML简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。

XML 和 HTML 类似, 不同的是 HTML 中都是预定义标签, 而 XML 中没有预定义标签,全都是自定义标签, 用来表示一些数据

<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender></gender>
</student>

现在已经被 JSON 取代了。

{
    "name":"孙悟空",
    "age":18,
    "gender":"男"
}

AJAX的使用

核心对象:

XMLHttpRequest: AJAX 的所有操作都是通过该对象进行的。

使用步骤

// 1) 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 2) 设置请求信息
xhr.open(method, url);

// 可以设置请求头, 一般不设置  
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

//3) 发送请求
xhr.send(body) //get 请求不传 body 参数, 只有 post 请求使用

4) 接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
    if(xhr.readyState == 4 && xhr.status == 200){
        var text = xhr.responseText;
        console.log(text);
    }
}

get请求

客户端:

<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
            
            //3. 发送
            xhr.send();
            
            
            //4. 事件绑定 处理服务端返回的结果
            
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
				//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 < 300){
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码  200
                        // console.log(xhr.statusText);//状态字符串  OK
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }


        }
    </script>
</body>

服务端:

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX - 2');
});

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

post请求

xhr.open('POST', 'http://127.0.0.1:8000/server');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','atguigu'); // 会报错,因为不是预定义标签,要进行相关设置
// 请求体
xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');

// 服务端
// 接受post请求
app.post('/server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX POST');
});
//服务端
//可以接收任意类型的请求 
app.all('/server', (request, response) => {
});

返回Json类型

// 客户端
const xhr = new XMLHttpRequest();

//设置响应体数据的类型
xhr.responseType = 'json';

xhr.open('GET','http://127.0.0.1:8000/json-server');
xhr.send();
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300){
            //
            // console.log(xhr.response);
            // result.innerHTML = xhr.response;
            
            // 1. 手动对数据转化
            // let data = JSON.parse(xhr.response); //将响应文本转换为JSON类型
            // console.log(data);
            // result.innerHTML = data.name;
            
            // 2. 自动转换
            console.log(xhr.response);
            result.innerHTML = xhr.response.name;
        }
    }
}

// 服务端
//JSON 响应
app.all('/json-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    
    const data = {
        name: 'atguigu'
    };
    //将data变量转换为 JSON 字符串
    let str = JSON.stringify(data);
    response.send(str);
});

超时与网络异常

// 客户端
btn.addEventListener('click', function(){
    const xhr = new XMLHttpRequest();
    //超时设置 2s 设置
    xhr.timeout = 2000;
    //超时回调
    xhr.ontimeout = function(){
        alert("网络异常, 请稍后重试!!");
    }
    //网络异常回调
    xhr.onerror = function(){
        alert("你的网络似乎出了一些问题!");
    }

    xhr.open("GET",'http://127.0.0.1:8000/delay');
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status< 300){
                result.innerHTML = xhr.response;
            }
        }
    }
})

// 服务端
//延时响应
app.all('/delay', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        response.send('延时响应');
    }, 3000)
});

取消请求

// 客户端
<button>点击发送</button>
<button>点击取消</button>
<script>
    //获取元素对象
    const btns = document.querySelectorAll('button');
    let x = null;

    btns[0].onclick = function(){
        x = new XMLHttpRequest();
        x.open("GET",'http://127.0.0.1:8000/delay');
        x.send();
    }

    // abort 取消正在pending的请求
    btns[1].onclick = function(){
        x.abort();
    }
</script>

解决重复请求问题

<button>点击发送</button>
<script>
    //获取元素对象
    const btns = document.querySelectorAll('button');
    let x = null;
    //标识变量
    let isSending = false; // 是否正在发送AJAX请求

    btns[0].onclick = function(){
        //判断标识变量
        if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
        x = new XMLHttpRequest();
        //修改 标识变量的值
        isSending = true;
        x.open("GET",'http://127.0.0.1:8000/delay');
        x.send();
        x.onreadystatechange = function(){
            // 这里不判断状态码是因为,可能请求是失败的,则会导致走不到x.readyState === 4这个判断,无法修改isSending
            if(x.readyState === 4){
                //修改标识变量
                isSending = false;
            }
        }
    }
</script>

JQuery发送AJAX

get请求

$.get(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式, xml, html, script, json, text, _default。
// 客户端
$('button').eq(0).click(function(){
    // {a:100, b:200} get携带的参数 在url后面
    $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
        console.log(data);
    },'json');
});

// 服务端
//jQuery 服务
app.all('/jquery-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

post请求

$.post(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式, xml, html, script, json, text, _default。
$('button').eq(1).click(function(){
    // {a:100, b:200} form data 请求体
    $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
        console.log(data);
    });
});

JQuery通用方法发送请求

$('button').eq(2).click(function(){
    $.ajax({
        //url
        url: 'http://127.0.0.1:8000/jquery-server',
        //参数
        data: {a:100, b:200},
        //请求类型
        type: 'GET',
        //响应体结果
        dataType: 'json',
        //成功的回调
        success: function(data){
            console.log(data);
        },
        //超时时间
        timeout: 2000,
        //失败的回调
        error: function(){
            console.log('出错啦!!');
        },
        //头信息
        headers: {
            c:300,
            d:400
        }
    });
});

aioxs发送请求

https://github.com/axios/axios

特点

  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Supports the Promise API (支持 ES6 Promise API)
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data (自动转换JSON数据)
  • 🆕 Automatic data object serialization to multipart/form-data and x-www-form-urlencoded body encodings
  • Client side support for protecting against XSRF
axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.delete(url[, config])

Get请求

// https://github.com/axios/axios
const btns = document.querySelectorAll('button');

//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';

btns[0].onclick = function () {
    //GET 请求
    axios.get('/axios-server', {
        //url 参数
        params: {
            id: 100,
            vip: 7
        },
        //请求头信息
        headers: {
            name: 'atguigu',
            age: 20
        }
    }).then(data => {
        // handle success
        console.log(data);
    }).catch(error => {
        // handle error
    }).finally(() => {
        // always executed
    });
}

响应结果展示:

image-20231210133955765

Post请求

btns[1].onclick = function () {
    //Post请求
    axios.post('/axios-server', {  //请求体  
        username: 'admin',
        password: 'admin'
    }, {
        //url 参数
        params: {
            id: 200,
            vip: 9
        },
        //请求头参数
        headers: {
            height: 180,
            weight: 180,
        }
    }).catch(error => {
        // handle error
    }).finally(() => {
        // always executed
    });
}

通用方法发送请求

btns[2].onclick = function(){
    axios({
        //请求方法
        method : 'POST',
        //url
        url: '/axios-server',
        //url参数
        params: {
            vip:10,
            level:30
        },
        //头信息
        headers: {
            a:100,
            b:200
        },
        //请求体参数
        data: {
            username: 'admin',
            password: '123456'
        }
    }).then(response => {
        //响应状态码
        console.log(response.status);
        //响应状态字符串
        console.log(response.statusText);
        //响应头信息
        console.log(response.headers);
        //响应体
        console.log(response.data);
    }).catch(error => {
        // handle error
    }).finally(() => {
        // always executed
    });
}

跨域

同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出, 是浏览器的一种安全策略

同源: 协议、 域名、 端口号 必须完全相同。

违背同源策略就是跨域

同源情况:

// 服务端
const express = require('express');

const app = express();

app.get('/home', (request, response)=>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
});

app.get('/data', (request, response)=>{
    response.send('用户数据');
});

app.listen(9000, ()=>{
    console.log("服务已经启动...");
});

// 客户端
<!-- index.html -->
<h1>尚硅谷</h1>
<button>点击获取用户数据</button>
<script>
    const btn = document.querySelector('button');

    btn.onclick = function(){
        const x = new XMLHttpRequest();
        //这里因为是满足同源策略的, 所以 url 可以简写
        x.open("GET",'/data');
        x.send();
       
        x.onreadystatechange = function(){
            if(x.readyState === 4){
                if(x.status >= 200 && x.status < 300){
                    console.log(x.response);
                }
            }
        }
    }
</script>

在localhost:9000 端口下的index页面点击button发送请求,这个请求也是本地端口下的服务。因此是同源的。

解决跨域问题

CORS

简介

CORS(Cross-Origin Resource Sharing) , 跨域资源共享。 CORS 是官方的跨域解决方案, 它的特点是不需要在客户端做任何特殊的操作, 完全在服务器中进行处理, 支持get 和 post 请求。 跨域资源共享标准新增了一组 HTTP 首部字段, 允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

工作

CORS 是通过设置一个响应头来告诉浏览器, 该请求允许跨域, 浏览器收到该响应以后就会对响应放行。

使用

后端设置响应头部信息: 在服务端(后端)对应的接口中设置合适的响应头部信息,允许指定域名或允许所有域名访问,如设置 Access-Control-Allow-Origin 为 ‘*’(表示允许所有域名)。

//设置响应头  设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');

// 其他设置
// 允许所有Headers
response.setHeader('Access-Control-Allow-Headers', '*');
// 允许所有方法请求,get/post/put/delete...
response.setHeader("Access-Control-Allow-Method", '*');

其他解决跨域问题:

  1. 使用代理: 在开发环境下,可以通过配置代理来规避跨域问题。即在前端发送请求时,先将请求发送到自己的服务器(域名前端一致),再由自己的服务器转发请求到目标后端服务,然后将后端服务的响应返回给前端。这种方式需要自己搭建代理服务器。
  2. 小程序开发工具配置不校验合法域名: 在微信开发者工具中,可以临时关闭域名校验,但这仅适用于开发阶段,上线时不建议关闭域名校验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/635375.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL数据库单表查询中查询条件的写法

1.使用比较运算符作为查询条件 ; !; >; >; <; <; 如上图所示&#xff0c;可以使用命令select 字段&#xff0c;字段 from 表名 where Gender “M”; 即挑选出Gender “M” 的教师&#xff0c; 如上图所示&#xff0c;可以使用命令select 字段&#xff0c;…

如何使用Android NDK将头像变成“遗像”

看完本文的标题&#xff0c;可能有人要打我。你说黑白的老照片不好吗&#xff1f;非要说什么遗像&#xff0c;我现在就把你变成遗像&#xff01;好了&#xff0c;言归正传。我想大部分人都用过美颜相机或者剪映等软件吧&#xff0c;它们的滤镜功能是如何实现的&#xff0c;有人…

TCP Spurious Retransmission

TCP虚假重传是网络中可能存在丢包问题的一个指标&#xff0c;但并不意味着一定存在丢包。虚假重传指的是当TCP发送方错误地认为原始数据包已丢失时&#xff0c;会不必要地进行重传&#xff0c;而实际上原始数据包已成功到达目的地。 虚假重传可能由多种因素引起&#xff0c;例…

【Linux】进程信号及相关函数/系统调用的简单认识与使用

文章目录 前言一、相关函数/系统调用1. signal2. kill3. abort (库函数)4. raise (库函数)5. alarm 前言 现实生活中, 存在着诸多信号, 比如红绿灯, 上下课铃声…我们在接收到信号时, 就会做出相应的动作. 对于进程也是如此的, 进程也会收到来自 OS 发出的信号, 根据信号的不同…

分布式锁2-Zookeeper分布式锁实战

Zookeeper分布式锁实战 使用curator操作Zookeeper进行实战&#xff1b; curator是什么&#xff1a;Apache Curator包含一套高级API框架和工具类&#xff0c;它 是Apache ZooKeeper 的Java 客户端库。 准备 pom文件引入curtor依赖和zookeeper依赖 <!--curator--> <…

麦克纳母轮(全向)移动机器人集群控制的Simulink/Simscape虚拟仿真平台搭建

麦克纳姆轮是一种常见的全向移动机构&#xff0c;可以使机器人在平面内任意方向平移&#xff0c;同时可以利用差速轮车的属性实现自转&#xff0c;能够在狭窄且复杂多变的环境中自由运行&#xff0c;因而被广泛应用于竞赛机器人和特殊工业机器人场景。 Ps:最新的BYD仰望U8也有一…

graspnet+Astra2相机实现部署

graspnetAstra2相机实现部署 &#x1f680; 环境配置 &#x1f680; ubuntu 20.04Astra2相机cuda 11.0.1cudnn v8.9.7python 3.8.19pytorch 1.7.0numpy 1.23.5 1. graspnet的复现 具体的复现流程可以参考这篇文章&#xff1a;Ubuntu20.04下GraspNet复现流程 这里就不再详细…

C++容器之映射(std::map)

目录 1 概述2 使用实例3 接口使用3.1 construct3.2 assigns3.3 iterators3.4 capacity3.5 access3.6 insert3.7 erase3.8 swap3.9 clear3.10 emplace3.11 emplace_hint3.12 key_comp3.13 value_comp3.14 find/count3.15 upper_bound/upper_bound/equal_range3.16 get_allocator…

数据结构和算法|堆排序系列问题(一)|堆、建堆和Top-K问题

在这里不再描述大顶堆和小顶堆的含义&#xff0c;只剖析原理层面。 主要内容来自&#xff1a;Hello算法 文章目录 1.堆的实现1.1 堆的存储与表示过程1.2 访问堆顶元素1.4元素出堆 2.⭐️建堆2.1 方法一&#xff1a;借助入堆操作实现2.2 ⭐️方法二&#xff1a;通过遍历堆化实现…

Java 多线程抢红包

问题需求 一个人在群里发了1个100元的红包&#xff0c;被分成了8个&#xff0c;群里有10个人一起来抢红包&#xff0c;有抢到的金额随机分配。 红包功能需要满足哪些具体规则呢? 1、被分的人数抢到的金额之和要等于红包金额&#xff0c;不能多也不能少。 2、每个人至少抢到1元…

Ubuntu Nerfstudio安装

https://blog.csdn.net/qq_30565883/article/details/133778529 https://blog.csdn.net/weixin_52581013/article/details/137982846 https://zhuanlan.zhihu.com/p/654394767 1. 结论 因为需要安装tiny-cuda-nn&#xff0c;然而 所以我之前的在笔记本上安装就白费了&#xf…

基于python的k-means聚类分析算法,对文本、数据等进行聚类,有轮廓系数和手肘法检验

K-means算法是一种常见的聚类算法&#xff0c;用于将数据点分成不同的组&#xff08;簇&#xff09;&#xff0c;使同一组内的数据点彼此相似&#xff0c;不同组之间的数据点相对较远。以下是K-means算法的基本工作原理和步骤&#xff1a; 工作原理&#xff1a; 初始化&#x…

QT C++ QTableWidget 演示

本文演示了 QTableWidget的初始化以及单元格值改变时响应槽函数&#xff0c;打印单元格。 并且&#xff0c;最后列不一样,是combobox &#xff0c;此列的槽函数用lambda函数。 在QT6.2.4 MSVC2019 调试通过。 1.界面效果 2.头文件 #ifndef MAINWINDOW_H #define MAINWINDOW…

使用API有效率地管理Dynadot域名,进行域名邮箱的默认邮件转发设置

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

【四数之和】python,排序+双指针

四层循环&#xff1f;&#xff08;doge) 和【三数之和】题目很类似 class Solution:def fourSum(self, nums: List[int], target: int) -> List[List[int]]:nums.sort()#a,b,c,d四个数&#xff0c;先固定两个数&#xff0c;那就是双指针问题了&#xff0c;令ba1&#xff…

【数据结构】【C语言】堆~动画超详细解读!

目录 1 什么是堆1.1 堆的逻辑结构和物理结构1.2 堆的访问1.3 堆为什么物理结构上要用数组?1.4 堆数据上的特点 2 堆的实现2.1 堆类型定义2.2 需要实现的接口2.3 初始化堆2.4 销毁堆2.5 堆判空2.6 交换函数2.7 向上调整(小堆)2.8 向下调整(小堆)2.9 堆插入2.10 堆删除2.11 //堆…

若依解决使用https上传文件返回http路径问题

若依通过HTTPS请求进行文件上传时却返回HTTP的文件链接地址&#xff0c;主要原因是使用了 request.getRequestURL 获取链接地址。 解决办法&#xff1a; 在nginx配置文件location处加上&#xff1a;proxy_set_header X-Forwarded-Scheme $scheme; 然后代码通过request.getHea…

【跳坑日记】暴力解决Ubuntu SSH报错: Failed to start OpenBSD Secure Shell server

报错环境说明&#xff1a; 服务器环境&#xff1a;Ubuntu 20.04 错误内容 最近服务器突然报错&#xff0c;提示如下图信息&#xff1a; 搜素了各种问答&#xff0c;国内的回答大多数是用 ssh-keygen -A命令来解决&#xff0c;但最终也无法登录服务器。 最终搜索到ask ubun…

比较kube-proxy模式:iptables还是IPVS?

kube-proxy是任何 Kubernetes 部署中的关键组件。它的作用是将流向服务&#xff08;通过集群 IP 和节点端口&#xff09;的流量负载均衡到正确的后端pod。kube-proxy可以运行在三种模式之一&#xff0c;每种模式都使用不同的数据平面技术来实现&#xff1a;userspace、iptables…

go-zero 实战(3)

引入 Redis 在之前的 user 微服务中引入 redis。 1. 修改 user/internal/config/config.go package configimport ("github.com/zeromicro/go-zero/core/stores/cache""github.com/zeromicro/go-zero/zrpc" )type Config struct {zrpc.RpcServerConfMys…