AJAX 的使用

最新推荐文章于 2022-05-04 09:33:04 发布
最新推荐文章于 2022-05-04 09:33:04 发布
阅读量70 收藏
点赞数
分类专栏： # AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zeroheitao/article/details/116357550
版权

本文使用了 express 框架，需要先安装 nodejs，然后 npm i express

文章目录

1、使用步骤

核心对象：XMLHttpRequest（AJAX 的所有操作都是通过该对象进行的）

  1. 创建 XMLHttpRequest 对象
var xhr = newXMLHttpRequest();
  1. 设置请求信息
xhr.open(method,url); 

//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  1. 发送请求
xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用
  1. 接收响应
//xhr.responseXML 接收 xml 格式的响应数据 
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function(){ 
	if(xhr.readyState == 4 && xhr.status == 200){ 
		vartext = xhr.responseText; 
		console.log(text); 
	} 
}

2、GET 请求

不重新加载页面实现数据显示。

创建 server.js

//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 端口监听中....");
});

启动服务：node server.js
在这里插入图片描述
创建页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </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?a=100&b=200&c=300');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function(){
                //判断 (服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }
        }
    </script>
</body>
</html>

在这里插入图片描述
运行效果：
在这里插入图片描述
在这里插入图片描述

3、POST 请求

鼠标移入就实现数据显示

创建 server.js 大致同上，只需改变路由规则：

//可以接收任意类型的请求 
app.all('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});

启动服务：node server.js

创建页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        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');
            //设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','aaa');
            //3. 发送
            xhr.send('a=100&b=200&c=300');
            // xhr.send('a:100&b:200&c:300');
            // xhr.send('1233211234567');
            
            //4. 事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>
</body>
</html>

运行效果：
在这里插入图片描述

4、JSON 请求

键盘按下就实现数据显示

创建 server.js 大致同上，只需改变路由规则：

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

启动服务：node server.js

创建页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #89b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
            //发送请求
            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; 返回json格式
                        // 1. 手动对数据转化
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.name;
                        // 2. 自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

运行效果：
在这里插入图片描述
在这里插入图片描述

由于每次更改 server.js 后都需重新启动服务，手动启动次数多了就很麻烦，可以安装自动重启工具 nodemon，npm install -g nodemon 。

启动命令：nodemon server.js(文件名，自己写啥就是啥)
在这里插入图片描述
如果启动时报错禁止脚本之类的，管理员身份运行 powershell ，输入 set-ExecutionPolicy RemoteSigned，然后选 Y 就行了。
在这里插入图片描述
在这里插入图片描述

玳宸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
原生ajax使用
11-29
本代码是原生ajax使用demo，详情请查看博客 原生Ajax使用笔记
ThinkPHP中ajax使用实例教程
10-25
主要介绍了ThinkPHP中ajax使用, 是ThinkPHP开发中非常实用的技巧,需要的朋友可以参考下
Ajax（Ajax使用js包）
02-27
使用Ajax实现从服务器读取数据，包括Ajax实现的详细步骤
ajax使用实例
03-17
对于初学者而言学ajax是不错的资源
Ajax使用示例
12-07
Ajax使用示例完整项目代码，参考博客：http://blog.csdn.net/daijin888888/article/details/51208570
ajax使用
热门推荐
张永光的博客
01-25 2万+
1.ajax使用 $.ajax({ url: "http://10.2.4.113/CheckPointService/Check006.asmx/UpCheckReportMsg", method: "get", data: {}, async: false, success: function(res
ajax使用方法
阿鹏的博客
05-21 2万+
ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。 ajax需要在服务器环境下运行。 $.ajax使用方法 常用参数： 1、url 请求地址 2、type 请求方式，默认是’GET’，常...
【Python Web】Ajax 使用详解
风口IT猪的成长录
12-29 2781
Ajaxajax1. ajax的介绍2. ajax的使用3. 小结 ajax 1. ajax的介绍 ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以 让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是 实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住， 当前端页面想和后台服务器进行数据交互就可以使用ajax了。 这里
ajax 使用gbk编码格式,jQuery ajax提交中文编码(gbk)解决
weixin_39915204的博客
08-05 2721
jQuery ajax提交中文编码(gbk)解决1. jQuery ajax提交请求(GBK)。中文, IE下正常，FireFox下乱码. 这个问题让人很蛋疼, 解决方式也比较纠结,进行2次encodeURI, 然后后台再进行decode.如下: tagNames 是中文.var tagVal = encodeURI(document.getElementById("tagNames").valu...
Ajax的基本使用
weixin_67235801的博客
05-04 6588
Ajax的基本使用，无刷新登录，使用Ajax实现搜索自动提示
jQuery ajax使用方法
苍白的咏叹调的博客
05-13 4868
ajax使用方式 type： 默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET" url： 默认值: 当前页地址。发送请求的地址。 data： 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。 必须为 Key/Value 格式 contentType： 发送信息至服务器时内容编码类型。 dataType： 预期服务...
ajax使用params
第三世界的博客
10-19 1万+
给params赋值两种方式和alert显示params var params={}; params.name="object"; params["age"] =22; var key="keyhaha"; params[key]="keyValue";//!!! alert(params.keyhaha); var jas=JSON.stringify(obj);//!!! a
Ajax 如何使用
World11_的博客
04-26 2427
Ajax 如何使用 一个完整的 AJAX 请求包括五个步骤： 1、创建 XMLHTTPRequest 对象 2、使用 open 方法创建 http 请求，并设置请求地址 xhr.open（get/post，url，async，true（异步），false（同步）） 经常使用前三个参数 3、设置发送的数据，用 send 发送请求 4、注册事件（给 ajax 设置事件） 5、获取响应并更新页面 function Api ({url, method = 'GET', header = {}, callback
开源、易集成的人脸识别系统
最新发布
06-05
这个图人脸检测服务用于检测图像中的所有人脸。人脸验证可用于：当客户向您提供身份证或驾驶执照并且您需要验证这是否是他时、当用户将他的社交网络帐户连接到您的应用程序并且您想要验证这是否是他时。它能在图像上找到对应的人脸，可以用于收集有关您的商店在不同性别中受欢迎程度的统计数据、收集有关您的活动在哪些年龄段受欢迎的统计数据、获取地标信息以了解客户的视线、收集商店中有多少顾客的统计数据、识别所有顾客是否正确佩戴口罩。
实验3.circ（王龙建2310461170） (2).zip
06-05
实验3.circ（王龙建2310461170） (2).zip
stable diffusion提示词-人物系列
06-05
stable diffusion提示词人物系列，包含提示词和预览图，把提示词复制到stable diffusion里，即可使用。
2024-2030中国X射线光电子能谱仪(XPS)市场现状研究分析与发展前景预测报告 Sample.pdf
06-05
QYResearch是全球知名的大型咨询公司，行业涵盖各高科技行业产业链细分市场，横跨如半导体产业链（半导体设备及零部件、半导体材料、集成电路、制造、封测、分立器件、传感器、光电器件）、光伏产业链（设备、硅料/硅片、电池片、组件、辅料支架、逆变器、电站终端）、新能源汽车产业链（动力电池及材料、电驱电控、汽车半导体/电子、整车、充电桩）、通信产业链（通信系统设备、终端设备、电子元器件、射频前端、光模块、4G/5G/6G、宽带、IoT、数字经济、AI）、先进材料产业链（金属材料、高分子材料、陶瓷材料、纳米材料等）、机械制造产业链（数控机床、工程机械、电气机械、3C自动化、工业机器人、激光、工控、无人机）、食品药品、医疗器械、农业等。 邮箱：market@qyresearch.com
3ds Max 2018 - Simplified Chinese.lnk
06-05
3ds Max 2018 - Simplified Chinese.lnk
yolo开发相关基础讲解，包含相关文档说明，供大家学习使用！
06-05
yolo开发相关基础讲解，包含相关文档说明，供大家学习使用！
jquery ajax使用
05-16
使用jQuery Ajax，您可以使用JavaScript从Web服务器请求数据，而无需重新加载整个网页。 以下是使用jQuery Ajax的一些步骤： 1. 引入jQuery库：在HTML文档中，需要先引入jQuery库。 2. 准备请求：使用$.ajax()...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

玳宸

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

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

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

打赏作者

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

抵扣说明：

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

余额充值