不同场景下发送AJAX请求

已于 2023-03-15 02:41:37 修改
阅读量925 收藏 18
点赞数 1
文章标签： 前端 ajax jquery
于 2022-07-02 18:09:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46914264/article/details/125568384
版权

🧑‍🎓 个人主页：花棉袄

📖 本章内容：【不同场景下发送AJAX请求】

一、AJAX简介

1.1【AJAX简介】

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

1.2【AJAX特点】

💟 AJAX 的优点

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

💟 AJAX 的缺点

  • 🌟 没有浏览历史，不能回退
  • 🌟 存在跨域问题（同源）
  • 🌟 SEO（Search Engine Optimization，搜索引擎优化）不友好，爬虫无法爬取

二、HTTP协议

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

2.1【请求报文】

💟 请求行

  • ⏰ 请求类型：GET/POST/PUT/DELETE/PATCH
  • ⏰ URL 路径：s?ie=utf-8
  • ⏰ HTTP 协议版本：HTTP/1.1

💟 请求头

  • ⏰ Host: atguigu.com
  • ⏰ Cookie: name=guigu
  • ⏰ Content-type: application/x-www-form-urlencoded
  • ⏰ User-Agent: chrome 83
  • ⏰ …

在这里插入图片描述

💟 请求空行：固定格式，必须有

💟 请求体：GET请求，请求体为空；POST请求，请求体可以不为空

  • ⏰ username=admin&password=admin

在这里插入图片描述

2.2【响应报文】

💟 响应行

  • ⏰ HTTP 协议版本：HTTP/1.1
  • ⏰ 响应状态码：200/404/500
  • ⏰ 响应状态字符串：OK/Not Found/Internal Server Error，与响应状态码对应

💟 响应头

  • ⏰ Content-Type: text/html;charset=utf-8
  • ⏰ Content-length: 2048
  • ⏰ Content-encoding: gzip
  • ⏰ …

在这里插入图片描述

💟 响应空行 ：固定格式，必须有

💟 响应体

在这里插入图片描述

2.3【状态码】

  • ⏰1xx：Informational(信息性状态码) 请求正在处理
  • ⏰2xx：Success(成功状态码) 请求正常处理完毕
  • ⏰3xx：Redirection(重定向) 需要进行附加操作以完成请求
  • ⏰4xx：Client error(客户端错误) 客户端请求出错
  • ⏰5xx：Server Error(服务器错误) 服务器处理请求出错

2.4【响应状态码】

  • ⏰ 200 OK 请求成功
  • ⏰ 302 Found 请求资源的 URL 被暂时修改到 Location 提供的 URL
  • ⏰ 304 Not Modified 资源未变更
  • ⏰ 308 Permanent Redirect 永久重定向
  • ⏰ 400 Bad Request 请求语法有问题，服务器无法识别
  • ⏰ 401 UnAuthorized 客户端未授权该请求
  • ⏰ 403 Forbidden 服务器拒绝响应
  • ⏰ 404 Not Found URL 无效或者 URL 有效但是没有资源
  • ⏰ 500 Internal Server Error 服务器内部错误
  • ⏰ 502 Bad Gateway 服务器作为网关使用时，收到上游服务器返回的无效响应
  • ⏰ 503 Service Unavailable 无法服务，一般发生在因维护而停机或者服务过载
  • ⏰ 504 Gateway Timeout 网关超时
  • ⏰ 505 Http Version Not Supported 发出的请求http版本服务器不支持

四、使用Express

💟 安装 Node.js

4.1【使用Express】

# 初始化
npm init --yes
# 安装express框架
npm i express

// 1、引入express
// const express = require('express');
import express from 'express';

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

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

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

💟 键入命令 node js文件名
💟 出现服务已经启动，8000 端口监听中…字样，说明启动成功
💟 我们打开浏览器，访问 http://127.0.0.1:8000，出现Hello Express字样

4.2【简单案例】

<!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>Document</title>
</head>
<body>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
    </style>

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

4.3【发送 GET 请求】

// 1、引入express
// const express = require('express');
import express from 'express';

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

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

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

💟 创建对象

const xhr = new XMLHttpRequest();

💟 初始化

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

💟 发送

xhr.send();

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

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

<!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>
</head>
<body>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
    </style>
    <button>点击发送</button>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        const button = document.getElementsByTagName("button")[0];
        button.onclick = function () {
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            // 3、发送
            xhr.send();
            // 4、事件绑定，处理服务器端返回的结果
            xhr.onreadystatechange = function () {
                // 服务端返回所有结果
                if (this.readyState === 4) {
                    // 2xx 成功
                    if (this.status >= 200 && this.status < 300) {
                        // 状态码、状态字符串
                        console.log("status：" + this.status); // 200
                        console.log("statusText：" + this.statusText); // OK
                        // 响应头
                        console.log("Headers：" + this.getAllResponseHeaders()); // content-length: 13  content-type: text/html; charset=utf-8
                        // 响应体
                        console.log("response：" + this.response); // Hello Express
                        // 将响应体内容设置为文本
                        result.innerHTML = this.response;
                    }
                }
            }
        };
    </script>
</body>
</html>

在这里插入图片描述

💟 GET 设置请求行

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

4.4【发送 POST 请求】

// 1、引入express
// const express = require('express');
import express from 'express';

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

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

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

    <script>
        const result = document.getElementById('result');
        result.addEventListener('mouseover', function () {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (this.readyState === 4 && this.status >= 200 && this.status < 300) {
                    result.innerHTML = this.response;
                }
            };
        });
    </script>

在这里插入图片描述

💟 POST 设置请求体

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

4.5【设置请求头信息】

💟 设置请求头信息

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

💟 自定义的请求头

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

app.all('/server', (request, response) => {
    // 设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应头，允许任意类型的头信息
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    response.send('Hello Express');
});

4.6【响应 JSON 数据】

const data = {
    name:'Hello Ajax'
}
let str = JSON.stringify(data);
response.send(str);

在这里插入图片描述

💟 手动转换数据

let response = this.response;
console.log(typeof response); // string
data = JSON.parse(response);
result.innerHTML = data.name;

在这里插入图片描述

五、自动重启工具

💟 官网地址：https://www.npmjs.com/package/nodemon
💟 安装命令：npm install -g nodemon
💟 启动命令：nodemon xxx.js替代node xxx.js
💟 优点：修改服务端代码不用每次手动shutdown重启

在这里插入图片描述

5.1【请求超时】

# js文件
setTimeout(() =>{
    response.send('Hello Ajax');
}, 2000);

# html文件
// 设置超时时间
xhr.timeout = 1000;
// 设置超时回调
xhr.ontimeout = () => {
    alert('请求超时！');
};

5.2【网络异常】

# html 文件
// 设置网络异常回调
xhr.onerror = () => {
    alert("网络异常");
};

5.3【手动取消请求】

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

const btns = document.getElementsByTagName('button');
const btn1 = btns[0];
const btn2 = btns[1];

let xhr = null;
btn1.addEventListener('click', () => {
    xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:8000/server-timeout');
    xhr.send();
});
btn2.addEventListener('click', () => {
    xhr.abort();
});

5.4【请求重复发送】

💟 如果服务器响应相对比较慢，而用户因为得不到响应而频繁地点击按钮
💟 浏览器短时间内会向服务器发起大量重复的请求
💟 服务器就要对这些请求进行频繁的处理
💟 服务器端的压力就会非常的大

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

在这里插入图片描述

六、JQuery发送AJAX请求

💟 jQuery 脚本

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

💟 bootstrp 脚本

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.css" rel="stylesheet">

6.1【GET 请求】

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

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

btns.eq(0).click(() => {
    $.get('http://127.0.0.1:8000/server-jquery', { a: 100, b: 200 }, (data) => {
        console.log(typeof data, data); // object {name: "Hello jquery"}
    }, 'json');
});

6.2【POST请求】

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

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

btns.eq(1).click(() => {
    $.post('http://127.0.0.1:8000/server-jquery', { a: 100, b: 200 }, (data) => {
        console.log(typeof data, data); // string {name: "Hello jquery"}
    },"json");
});

6.3【通用方法】

$.ajax({
    // 请求地址
    url: 'http://127.0.0.1:8000/server-jquery',
    // 请求参数
    data: { a: 100, b: 200 },
    // 请求类型
    type: 'GET',
    // 响应体类型
    dataType: 'json',
    // 成功回调
    success: data => {
        console.log(typeof data, data); // string {name: "Hello jquery"}  开启dataType后：object {name: "Hello jquery"}
    },
    // 超时时间
    timeout: 1000,
    // 失败的回调
    error: () => {
        alert('出错了');
    },
    // 头信息
    headers: {
        c: 300,
        d: 400
    }
});

七、Axios发送AJAX请求

7.1【GET 请求】

 axios.get(url[,config])
  • 函数返回结果是一个promise对象，用then回调处理
axios.defaults.baseURL = 'http://127.0.0.1:8000/';
axios.get('/server-axios', {
    // 请求参数
    params: {
        a: 100,
        b: 200
    },
    // 请求头
    headers: {
        c: 300,
        d: 400
    }
}).then(value => {
    console.log(value);
});

7.2【POST 请求】

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

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

7.3【通用方法】

axios(url[, config])

axios({
    method: 'POST',
    url: '/server-axios',
    // 请求参数
    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/server-fetch?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"}
});

九、跨域问题

9.1【同源策略】

  • 同源：协议、域名、端口号必须完全相同，违背同源策略就是跨域

9.2【JSONP的使用】

<!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>Document</title>
</head>

<body>
    <style>
       
    </style>
    <button>点击发送</button>
    <div id="result"></div>
    用户名：<input type="text" id="username">
    <p></p>
    <script>
        //声明handle函数
        function handle(data) {
            var input = document.querySelector('input');
            input.style.border = "solid 1px #f00";
            //修改p标签的提示文本
            var p = document.querySelector('p');
            p.innerHTML = data.msg;
        }
    </script>
    <script>
        const input = document.querySelector('input');
        input.onblur = () => {
            let username = this.username;
            // 1、创建一个 script 标签
            var script = document.createElement('script');
            // 2、设置 src 属性
            script.src = 'http://127.0.0.1:8000/check-username';
            // 3、将 script 插入文档中
            document.body.appendChild(script);
        };
    </script>
</body>

</html>

// 1、引入express
// const express = require('express');
import express from 'express';

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

// 3、创建路由规则
// request 请求报文的封装
// response 响应报文的封装
app.all('/check-username', (request, response) => {
  const data = {
      exist: 1,
      msg:'用户名已存在'
  };
  let str = JSON.stringify(data);
  response.end(`handle(${str})`); 
});

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

在这里插入图片描述

9.3【JQuery发送JSONP请求】

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

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

<button>点击发送请求</button><br><br>
<div id="result"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $('button').eq(0).click(() => {
        $.getJSON('http://127.0.0.1:8000/server-jsonp-jquery?callback=?', data => {
            $('#result').html(data.msg);
        });
    });
</script>

app.all('/server-jsonp-jquery', (request, response) => {
    const data = {
        exist: 1,
        msg:'用户名已存在'
    };
    let str = JSON.stringify(data);
    response.end(`(${str})`);
});
  • 此时并没有任何输出，但是请求参数中自动生成了一个callback的参数
    在这里插入图片描述
// 接收callback参数
var cb = request.query.callback;
response.end(`${cb}(${str})`);

在这里插入图片描述

9.4【跨域资源共享】

  • 我们要想进行跨域请求，必须在服务端返回结果时设置允许跨域的响应头
// 设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');

9.5【响应首部字段】

💟 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 指明了实际请求中允许携带的首部字段

  • 一般使用，允许跨域、带有自定义头部信息、任意方法
response.setHeader("Access-Control-Allow-Origin", "*"); 
response.setHeader("Access-Control-Allow-Headers", "*"); 
response.setHeader("Access-Control-A1low-Method", "*");
🌟如果文章对你有帮助【关注👍点赞❤️收藏⭐】一起努力！
Silence Lamb
关注
【AJAX 学习笔记】多种方式发送AJAX请求（原生AJAX、jQuery、axios、fetch）
w的博客
08-14 1700
Ajax 学习笔记 1 AJAX相关概述 1.1 AJAX简介 AJAX 全称为Asynchronous JavaScript And XML ，就是异步的 JS 和 XML 。 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 1.2 XML简介 XML 可扩展标记语言。 XML 被设计用来传输和存储数据。（而HTML是用来呈现数据）。 XML 和 HTML 类似，不同的
Ajax应用场景
weixin_34310127的博客
08-21 473
Ajax不是万能的，在适合的场合使用Ajax，才能充分发挥它的长处，改善系统性能和用户体验，绝不可以为了技术而滥用。Ajax的特点在于异步交互，动态更新web页面，因此它的适用范围是交互较多，频繁读取数据的web应用。现在来看几个Ajax的应用实例，读者可以了解如何使用Ajax技术改进现有的web应用系统。场景1.数据验证在填写表单内容时，需要保证数据的唯一性（例如新用户注册填写的用户名），因此必...
第 3 章：发送AJAX请求的几种方式
最新发布
2203_75300307的博客
09-05 977
便捷选get和post请求，如果自定义性比较强选择通用方法发送请求使用Axios发送Ajax请求居多。
ajax发送请求
qzcrystal的博客
02-05 183
ajax.js 向服务器发送请求 //对象转字符串 function objToStr(obj){ obj.t = new Date().getTime(); var res = []; for (var key in obj) { //防止url中出现中文，如果有中文，需要转码 //调用encodeURIComponent()方法 //URL中只能出现字母、数字、下划线、...
面试题11：jquery中$.get()提交和$.post()提交有区别吗？
jiangjuanjaun的博客
05-16 6219
相同点：都是异步请求的方式来获取服务端的数据；异同点：1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而P...
AJAX发送请求
Guido_GT的专栏
05-13 707
AJAX - 向服务器发送请求 XMLHttpRequest 对象用于和服务器交换数据。 向服务器发送请求 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法： xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); 方法 描述
防止重复发送 Ajax 请求
08-31
总的来说，防止重复发送Ajax请求是优化Web应用程序性能和用户体验的关键策略。根据应用场景选择合适的方法，可以有效地避免服务器过载，同时提升用户交互的响应性和效率。开发者应当熟悉这些技术，并在实际项目中...
Javascript发送AJAX请求实例代码
10-21
在JavaScript中发送AJAX请求通常涉及以下步骤： 1. 创建XMLHttpRequest对象：这是AJAX请求的基础。不同浏览器对XMLHttpRequest的支持有所不同，因此代码中会使用浏览器兼容性处理。 2. 初始化一个AJAX请求：使用`...
防止重复发送Ajax请求的解决方案
10-23
防止重复发送Ajax请求是Web开发中常见的需求，尤其是在用户快速点击按钮或页面加载过程中可能出现的多次请求。这可能导致服务器负载增加，甚至导致不正确的数据处理。本文将详细讲解两种主要的解决方案。 首先，...
四步轻松实现ajax发送异步请求
10-19
在介绍如何实现Ajax发送异步请求的详细知识点之前，首先要明白什么是Ajax。Ajax代表Asynchronous JavaScript and XML，是一种无需重新加载整个页面的情况下，能够更新部分网页的技术。它允许用户通过在后台与服务器...
java模拟发送ajax请求,Java实现发送HTTP的POST请求，返回数据以及请求状态
weixin_29337389的博客
08-06 1464
/*** @param url:请求url* @param content: 请求体(参数)* @return errorStr:错误信息;status:状态码，response：返回数据*/public Map request(String url, String content) {Map result = new HashMap();String errorStr = "";String s...
AJAX使用场景分析
05-31
　1.表单驱动的交互 　　传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击submit按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷新的问题。
Ajax发送请求
weixin_44978043的博客
11-04 398
Ajax Ajax不是一个新技术，而是多种技术的集合 Ajax： Asynchronous Javascript And Xml 全称：异步的JavaScript和XML数据交互技术 注：原始的Ajax技术中使用XML标记语言完成数据交互，但是标记语言中包含了大量的无效数据（标签），所以后来使用JSON数据代替XML进行数据传递 Ajax技术的核心 异步JavaScript对象：XMLHttpRequest 数据交互实体：JSON对象 Ajax技术的实现 1.JavaScript Ajax 2.j
发送ajax请求
weixin_33937778的博客
12-12 241
一、发送get请求 1.创建异步对象 const ajax = new XMLHttpRequest 2.设置请求的url参数 xhr.open('get','url?data'+data) 3.onreadystatechange 状态改变就会调用 ajax.onload = function () { if (ajax.status==200) { 5. 回调响应 } 复制代码 }...
AJAX
wjp2960的博客
09-29 172
AJAX简介 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 回调函数 如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、s...
使用Ajax方式发送请求
you4580的专栏
03-22 320
为异步请求对象添加工作状态监听器，帮助开发人员确认何时从异步请求对象身上得到服务端返回响应数据。通知异步请求对象在工作期间，浏览器是否要等他[同步请求，异步请求]在浏览器内存中，创建一个脚本对象，这个脚本对象就是异步请求对象。通知异步请求对象采用何种方式发送请求协议包。通知异步请求对象本次要访问的资源文件地址。命令通知异步请求对象代替浏览器发送请求。如何命令异步请求对象代替浏览器发送请求。如何为异步请求对象绑定工作监听状态。如何创建一个异步请求对象。如何初始化异步请求对象。创建Ajax核心对象。
ajax发送请求的方式
wwwpbx的专栏
02-04 337
1 var param = {}; param.itemType = 2; param.date = ticketObj.attr('showDate')+" "+ticketObj.attr('showTime')+":00"; param.itemId = ticketObj.attr('policyid'); param.couponId = certObj.couponid; var
ajax的应用场景
Orange_Sheep的博客
08-19 832
创建对象 这里是引用XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 // 1.创建 ajax请求 依赖一个对象xhr对象 var xhr; if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera,
Ajax异步请求详解：属性、步骤与应用场景
readyState属性是AJAX请求生命周期的关键，它有五个状态：0（未初始化）、1（正在加载）、2（已接收到响应头）、3（响应体正在下载）和4（已完成，且响应已就绪）。当readyState变为4时，意味着请求成功并获得了所有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Silence Lamb

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值