Ajax技术简述_ajax技术是什么-程序员宅基地

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
// 定义/first路由
app.get('/first', (req, res) => {
  res.send('Hello, Ajax');
});
app.listen(3000);
console.log('服务器启动成功');

2.配置Ajax对象

首先创建Ajax对象，然后使用open()方法来配置Ajax对象，最后使用send()方法发送请求：
语法格式为：

var xhr = new XMLHttpRequest();
xhr.open('请求方式', '请求地址');
xhr.send();

3、获取服务器的响应

1）通过onload事件的方式获取服务器端响应到客户端的数据。

xhr.onload = function () {};

（2）通过onreadystatechange事件的方式获取服务器端响应到客户端的数据。

xhr.onreadystatechange = function () {};

（3）Ajax状态码

Ajax状态码	说明
0	请求未初始化（还没有调用open方法）
1	请求已经建立，但是还没有发送（还没有调用send方法）
2	请求已经发送
3	请求正在处理中，通常响应中已经有部分数据可以用了
4	响应已经完成，可以获取并使用服务器的响应了

三、get请求

设置open()方法中的第1个参数为“get”，表示设置get请求方式。
语法格式为：

xhr.open('get','http://localhost:3000/demo.html?username=diluc&age=18');
xhr.send();

其中问号后面的username=diluc&age=18表示GET请求参数，多个参数间需要&符号连接。
如下所示：
（1）创建一个新项目，在home.js文件中创建服务器，并去app.js文件中导入，如下：

const express = require('express')
const router = express.Router()
router.get('/first',(req,res)=>{
    res.send('Hello Ajax')
})
module.exports = router;

打开postman工具进行测试

2）创建客户端，获取客户端的响应。
a.新建一个html文件，创建xhr对象，并使用open()方法配置xhr对象.如下：

 <script>
        const xhr = new XMLHttpRequest()
        console.log('请求前的状态码是:',xhr.readyState)//0
        xhr.open('get','http://localhost:3000/home/first')
        console.log('请求后的状态码是:',xhr.readyState)//1
    </script>

说明请求已经建立，但是还没有发送（还没有调用send方法）
b.在html文件中，监听onload事件，并使用send()方法发送请求,如下

xhr.onload = function(){
 	console.log('发送请求后的状态码是:',xhr.readyState)
    console.log('服务器响应的数据为:',xhr.responseText)
}
xhr.send()//向服务器端发送请求

响应已经完成，可以获取并使用服务器的响应了。
c.在html文件，添加一个按钮，将onload事件修改为onreadystatechange事件，从而实现服务器响应的数据传送到页面，如下：

<h2 id = 'pt'></h2>

 xhr.onreadystatechange = function(){
   if(xhr.readyState === 4 && xhr.status === 200){
        document.getElementById('pt').innerHTML = xhr.responseText;
    }
}

本文链接：https://blog.csdn.net/m0_53644435/article/details/123490314

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

程序员API百宝箱，含各类热门好用的API-程序员宅基地

文章浏览阅读744次，点赞21次，收藏27次。程序员API百宝箱，含各类热门好用的API

文章浏览阅读3.3k次，点赞4次，收藏12次。数据蕴含丰富的信息，数据就是资源。不同的语言，由于各自的语法特点，对sql数据库的连接操作有些小区别。但有一点，那就是，对sql数据库的操作语句sql语句大体是一样的。这段时间正进行VB.NET的学习，说实话，在最开始的时候，确实会感觉到比较难下手。在此之前，学习的是C#，从C#到VB.NET，弯不大，但有点急。现将一些VB.NET中sql数据库的增、删、改、查

解决Crystal Report XI R2不能在64操作系统正常工作的问题-web程序-程序员宅基地

文章浏览阅读285次。解决Crystal Report XI R2不能在64操作系统正常工作的问题-web程序原文:[原创]解决Crystal Report XI R2不能在64操作系统正常工作的问题-web程序我更换了新的电脑，操作系统也从原来32位的windows 2003 R2升级到windows 2008 R2 x64, 由于客户的原因我们的报表部分..._32位水晶报表在64位服务器

如何使用PS修改图片背景_ps换背景图教程-程序员宅基地

文章浏览阅读2k次，点赞4次，收藏2次。PS使用技巧_ps换背景图教程

ABC_DQ：基于MATLAB Simulink的三相静止坐标系到两相静止坐标系（Clark变换）到两相旋转坐标系变换（Park变换）的仿真模型_park变换simulink建模-程序员宅基地

文章浏览阅读557次，点赞8次，收藏10次。结论：本文通过基于MATLAB Simulink的仿真模型展示了三相静止坐标系到两相静止坐标系（Clark变换）到两相旋转坐标系变换（Park变换）在电机控制系统中的应用。摘要：本文介绍了基于MATLAB Simulink的三相静止坐标系到两相静止坐标系（Clark变换）到两相旋转坐标系变换（Park变换）的仿真模型。ABC_DQ：基于MATLAB Simulink的三相静止坐标系到两相静止坐标系（Clark变换）到两相旋转坐标系变换（Park变换）的仿真模型。_park变换simulink建模

IDEA设置缩进-程序员宅基地

文章浏览阅读1.2w次，点赞2次，收藏2次。

随便推点

pta6-1 快速排序_给一个无序表,使用快速排序算法对它进行排序。函数接口定义: int partition(sqli-程序员宅基地

文章浏览阅读4.3k次，点赞4次，收藏12次。6-1 快速排序 (15分)给一个无序表，使用快速排序算法对它进行排序。函数接口定义：int Partition(SqList &L,int low,int high); void QuickSort(SqList &L, int low, int high);其中L是待排序表，low和high是排序的区间。裁判测试程序样例：#include <iostre..._给一个无序表,使用快速排序算法对它进行排序。函数接口定义: int partition(sqli

IDEA git操作技巧大全，持续更新中_idea上的git操作-程序员宅基地

文章浏览阅读4.5k次，点赞81次，收藏240次。IDEA git操作大全，cherry pick、revert、squash等等，持续更新中......_idea上的git操作

sublime text3 python找不到文件路径_Sublime text 3 集成python 3 环境配置-程序员宅基地

文章浏览阅读322次。介质版本:Python 3.6Sublime Text 3包括：sublime字体配置。常用插件：Package Control、SublimeCodeIntel、SublimeREPL、SublimeTmpl、ColorSublime、Anaconda、SublimeLinter1、sublime基本配置。配置python路径：击New Build System后，会生成一个空配置文件，在这个配..._sublime text 新建的配置文件找不到

vue常用插件_vue插件-程序员宅基地

文章浏览阅读5.8k次，点赞8次，收藏55次。element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素- 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端单页应用vue-blu - 帮助你轻松创建web应用。_vue插件

Python调用C++语言（DLL）_python使用c++ dll-程序员宅基地

文章浏览阅读5.2k次，点赞7次，收藏54次。前言：本文可结合Python调用C语言（DLL）使用，效果更佳。采用导出形式：_declspec(dllimport)创建DLL项目运行Python将参数进行传递给DLL，然后从DLL返回指针（包含多个变量）打开VisualStudio 创建DLL点击下一步命名为Dll1即可点击创建即可然后定义宏：在头文件中定义即可，宏的作用的是允许该函数能够被外部访问，并直接调用。如下：代码：// pch.h: 这是预编译标头文件。// 下方列出的文件仅编译一次，提高了将来生成的生成性_python使用c++ dll

anchor free dection简介_detic有anchor吗-程序员宅基地

文章浏览阅读299次。1. background目标检测从开始的two_stage时代到 one_stage时代，从anchor basic到anchor free，越来越精细化。从18年CornerNet开始，anchor free 论文喷颈式爆发，宣告开始进入anchor free时代。2. Network2.1 DenseBox本文工作：证明了单纯的FCN网络只要设计合理可以用来检测不同尺度和严重遮..._detic有anchor吗