AJAX学习笔记

最新推荐文章于 2024-04-03 18:23:44 发布

okay_ing

最新推荐文章于 2024-04-03 18:23:44 发布

阅读量173

点赞数 1

分类专栏：前端文章标签： ajax 学习 javascript

本文链接：https://blog.csdn.net/okay_ing/article/details/126280409

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、AJAX 概述

AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML
通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

二、XML 简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据：
name = “孙悟空” ; age = 18 ; gender = “男” ;
用XML 表示：

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

现在已经被JSON 取代了

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

三、AJAX 的特点

AJAX 的优点

可以无需刷新页面而与服务器端进行通信
允许你根据用户事件来更新部分页面内容

AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO 不友好

四、HTTP相关问题

1、是什么

HTTP（hypertext transport protocol）协议「超文本传输议」，协议详细规定了浏览器和万维网服务器之间互相通信的规则

2、HTTP 请求报文

在这里插入图片描述

请求由以下元素组成：

请求头：

Method：GET/POST/ DELETE /PUT
Path：请求路径
Version：http版本号 HTTP/1.1

多个请求头：

Host: www.baidu.com
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706
Content-Type: application/x-www-form-urlencoded 或者application/json

空格：固定格式，必须有

请求体：（GET请求没有）

{“username”: “admin”, “pwd”: 123}
username=admin&pwd=123

不同类型的请求及其作用

GET: 从服务器端读取数据（查）
POST: 向服务器端添加新数据（增）
PUT: 更新服务器端已经数据（改）
DELETE: 删除服务器端数据（删）

3、HTTP 响应报文

在这里插入图片描述

响应报文包含了下面的元素：

HTTP 协议版本号。
一个状态码（status code），来告知对应请求执行成功或失败，以及失败的原因。
一个状态信息，这个信息是非权威的状态码描述信息，可以由服务端自行设定。
HTTP headers，与请求头部类似。
可选项，比起请求报文，响应报文中更常见地包含获取的资源 body。

常见的响应状态码

2xx 成功
3xx 重定向
4xx 客户给错误
5xx 服务端错误

五、原生AJAX

1、准备工作

安装node.js

安装express（服务端框架）

初始化环境

npm init --yes

下载express包

npm install express --save

编写js代码

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request,response)=>{
    //设置响应
    // request.log();
    response.send('HELLO EXPRESS');
});

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

运行服务

node .\express使用.js

2、Ajax发送GET请求

创建对象

const xhr = new XMLHttpRequest();

初始化设置请求方法和url

xhr.open('GET','http://localhost:8000/server');

发送

xhr.send();

事件绑定，处理服务器端返回的结果

xhr.onreadystatechange = function () {...}

status：状态码
statusText：状态字符串
getAllResponseHeaders()：响应头
response：响应体
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET请求</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<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://localhost:8000/server');
            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果

            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status === 200){
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态状态字符串
                        console.log(xhr.getAllResponseHeaders);//所有响应头
                        console.log(xhr.response);//响应体
                        //设置result文本
                        result.innerHTML = xhr.response;
                    }else{
                        console.log(1);
                    }
                }
            }     
        }
    </script>
</body>
</html>

GET 设置请求行

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

3、AJAX 发送 POST 请求

我们对之前发送GET请求代码稍微修改，将GET改POST即可

//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('POST','http://localhost:8000/server');
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function(){...}

POST 设置请求体

只需要服务器有与之相对应的数据方法则可以设置任意类型、任意格式的数据（一般使用JSON）

xhr.send('a=100&b=200&c=300');

4、AJAX 设置请求头信息

预定义的请求头

在初始之后，发送请求之前，可以设置请求头信息

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

在这里插入图片描述

自定义的请求头

除了可以设置上述预定义的请求头信息，也可以设置自定义的请求头信息

xhr.setRequestHeader('name', 'xxxxx');

5、服务器响应JSON数据

手动转换数据

因为我们服务端返回的是json字符串内容，所以response的内容类型也是字符串

这个时候使用JSON工具方法，可以将json字符串转换为json对象

完整代码如下：

<div id="result"></div>
<script>
    const result = document.getElementById('result');
    window.onkeydown = function () {
        const xhr = new XMLHttpRequest();
        //xhr.responseType = "json";
        xhr.open('GET', 'http://localhost:8000/json-server');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    console.log(xhr.response);
                    let data = JSON.parse(xhr.response);
                    console.log(data);
                    result.innerHTML = data.name;
                    console.log(xhr.response);
                }
            }
        }
    }
</script>

app.all('/json-server',(request,response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应一个数据
    const  data = {
        name:'nobita'
    }
    let str = JSON.stringify(data);
    response.send(str);
});

自动转换数据

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

6、手动取消请求

abort()方法：手动取消请求

<button>点击发送请求</button>
<button>点击取消请求</button>
<script>
    const btns = document.querySelectorAll('button');
    let x = null;

    btns[0].onclick = function () {
        console.log(1);
        x = new XMLHttpRequest();
        x.open("GET",'http://localhost:8000/delay');
        x.send();
    }
    //abort
    btns[1].onclick = function(){
        x.abort();
    }
</script>

7、请求重复发送

如果服务器响应比较慢，用户频繁提交网络请求，那么浏览器会向服务器提交大量请求导致服务器压力过大

那么有什么办法可以解决请求重复发送的问题呢？

思路：发送一个请求之前，查询之前是否有正在进行处理的相同请求，如果有，则取消之前的相同请求，发送一个新的请求。这样保证同一个请求同一时间内只会有一个，这样服务器的压力就会小一些

const btns = document.getElementsByTagName('button');
let xhr = null;
// 标识是否正在发送 AJAX 请求
let isSending = false;
btns[0].addEventListener('click', () => {
    // 若上一个请求尚未完成，则手动取消请求
    if (isSending) {
        xhr.abort();
    }
    xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:8000/servertimeout');
    xhr.send();
    xhr.onreadystatechange = () => {
        // 请求响应完毕后，修改变量标识
        if (xhr.readyState === 4) {
            isSending = true;
        }
    };
});

六、jQuery发送AJAX 请求

jQuery 脚本

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

bootstrp 脚本

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

API文档

https://jquery.cuishifeng.cn/

GET请求

$.get(url,[data],[callback],[type])

url：请求的 URL 地址
data：请求携带的参数
callback：载入成功时回调函数
type：设置返回内容格式，xml，html，script，ison，text，_default

$('button').eq(0).click(function(){
    $.get('http://localhost:8000/jQuery-server',{a:100},function(data){
        console.log(data);
    },'json');
})

POST请求

$.post(url,[data],[callback],[type])

url：请求的 URL 地址
data：请求携带的参数
callback：载入成功时回调函数
type：设置返回内容格式，xml，html，script，ison，text，_default

$('button').eq(1).click(function(){
    $.post('http://localhost:8000/jQuery-server',{a:100},function(data){
        console.log(data);
    })
})

通用方法

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

七、axios 发送 AJAX 请求

官方文档

https://www.npmjs.com/package/axios

API文档

https://github.com/axios/axios

GET请求

axios.get(url[,config])
函数返回结果是一个promise对象，用then回调处理

axios.defaults.baseURL = 'http://localhost:8000/';
axios.get('axios-server', {
    // 请求参数
    params: {
        a: 100,
        b: 200
    },
    // 请求头
    Headers: {
        c: 300,
        d: 400
    }
}).then(value => {
    console.log(value);
});

POST 请求

axios.post(url[,data[,config]])

axios.post('axios-server', {
    // 请求体
    e: 500,
    f: 600
}, {
    // 请求参数
    params: {
        a: 100,
        b: 200
    },
    // 请求头
    Headers: {
        c: 300,
        d: 400
    }
}).then(value => {
    console.log(value);
});

通用方法

axios(url[, config])

axios({
    method: 'POST',
    url: 'axios-server',
    // 请求参数
    params: {
        a: 100,
        b: 200
    },
    // 请求头
    Headers: {
        c: 300,
        d: 400
    },
    // 请求体
    data: {
        e: 500,
        f: 600
    },
    // 响应体类型
    dataType: 'json'
}).then(response => {
    console.log(response.status); // 200
    console.log(response.statusText); // OK
    console.log(response.headers); // {content-length: "22", content-type: "text/html; charset=utf-8"}
    console.log(typeof response.data, response.data); // object {name: "Hello axios"}
});

八、fetch 函数发送 AJAX 请求

fetch('http://127.0.0.1:8000/fetch-server?a=100&b=100', {
    // 请求方法
    method: 'POST',
    // 请求头
    Headers: {
        c: 300,
        d: 400
    },
    // 请求体
    body: 'e=500&f=600'
    }).then(response => {
    console.log(response);
});

如果我们只想要响应体内容，可以修改then回调

...
.then(response => {
    return response.text();
}).then(response => {
    console.log(typeof response, response); // string {"name":"Hello fetch"}
});

如果明确响应体内容为 json 字符串，可以按如下修改，将会返回一个 object 对象

...
.then(response => {
    return response.json();
}).then(response => {
    console.log(typeof response, response); // object {"name":"Hello fetch"}
});

九、跨域问题

由于浏览器的同源策略，两个页面必须具有在相同的协议（protocol）、主机（host）。端口号（port）才能正常访问。同源策略是最核心也是最基本的安全功能，缺少同源策略浏览器的正常功能可能会受到影响。如果不同源的脚本进行交互就会受到同源策略的限制产生跨域问题

JSONP

JSONP （JSON with Padding），是一个非官方的跨域解决方案，只支持 get 请求

JSONP怎么用

在网页有一些标签天生具有跨域能力，比如：img link iframe script 比如我们之前引入外部CDN(jQuery、BooStrap等)

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

JSONP 就是利用 script 标签的跨域能力来发送请求的

JSONP实例(判断用户名是否存在)

完整代码如下：

    用户名：<input type="text" id="username">
    <p></p>
<script>
    //获取input 元素
    const input = document.querySelector('input');
    const p = document.querySelector('p');
    //绑定元素
    //声明handle函数
    function handle(data){
        input.style.border = "solid 1px #f00";
        p.innerHTML = data.msg;
    }
    input.onblur = function(){
         //获取用户输入值
         let username = this.value;
        //向服务端发送请求，监测用户名是否存在
        //1.创建script标签
        const script = document.createElement('script');
        //2.设置标签的src属性
        script.src = 'http://localhost:8000/check-username';
        //3. 将scrpit 插入文档中
        document.body.appendChild(script);
    }
</script>

服务端代码如下：

app.all('/check-username',(request,response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin','*');

    //响应一个数据
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    }
    let str = JSON.stringify(data);
    response.send(`handle(${str})`);
});

jQuery发送JSONP请求

$.getJSON(url,[data],[fn])

url：发送请求地址
data：待发送 key/value 参数
callback：载入成功时回调函数

完整代码如下：

   <button>点击发送jsonp</button>
    <div id="result">
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://localhost:8000/jquery-jsonp-server?callback=?',function(data){
                $('#result').html(`
                名称：${data.exist}<br>
                地址：${data.city}
                `)
            })
        })
    </script>

服务端代码如下：

app.all('/jquery-jsonp-server',(request,response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin','*');

    //接受callback参数
    let cb = request.query.callback;
    //响应一个数据
    const data = {
        exist: 'admin',
        city: ['北京','上海','福州']
    }
    let str = JSON.stringify(data);
    response.send(`${cb}(${str})`);
});

CORS跨域

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

CORS怎么工作的？

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

CORS怎么使用

在服务端设置响应头

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

常见响应头：

HTTP 响应首部字段	作用
`Access-Control-Allow-Origin`	指定了允许访问该资源的外域 URI
`Access-Control-Expose-Headers`	让服务器把允许浏览器访问的头放入白名单
`Access-Control-Max-Age`	指定了 preflight 请求的结果能够被缓存多久
`Access-Control-Allow-Credentials`	是否允许浏览器读取 response 的内容
`Access-Control-Allow-Methods`	指明了实际请求所允许使用的 HTTP 方法
`Access-Control-Allow-Headers`	指明了实际请求中允许携带的首部字段

okay_ing

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
AJAX学习笔记

AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式...
复制链接

扫一扫