【Ajax】(一）ajax简介、HTTP协议、ajax的准备工作、发送ajax请求、nodemon自动重启工具

已于 2023-01-14 20:50:45 修改
阅读量133 收藏
点赞数
分类专栏： ajax 文章标签： ajax http javascript
于 2023-01-14 15:40:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/matmacchiato/article/details/128683485
版权

Ajax学习笔记

一、ajax简介

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

1、XML简介

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

2、ajax的特点

ajax的优点

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

ajax的缺点

（1）没有浏览历史，不能回退
（2）存在啊跨域问题（同源）
（3）SEO不友好

二、HTTP协议

HTTP全称为hypertext transport protocol 协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

重点格式与参数：

1、请求报文

行：POST /URL HTTP 协议版本
头： Host:值 Cookie: 值 Content-type:值 User-Agent:值等等
空行：
体：如果是GET请求体为空，如果是POST可以不为空

2、响应报文

行：HTTP协议版本 响应状态码 响应状态字符串
头： Content-type:值 Content-length:值 Content-encoding:值等等
空行：
体：HTML语法内容

三、ajax的准备工作

1、安装node.js

这一步无脑安装就可以了

2、安装express

打开文件点击终端，输入npm iexpress

3、创建一个服务端

（1）创建一个JS文件，编写四个步骤，然后在终端输入node 文件名.js 就可以启动服务

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

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

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

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

在这里插入图片描述
（2）然后就可以在网站上输入本机地址:8000进行访问
在这里插入图片描述
（3）端口释放：Ctrl+C

四、发送Ajax请求

1、发送GET请求

要编写两个文件，一个是前端页面的准备，一个是服务端代码的准备

前端我们设置一个按钮，点击按钮可以发送ajax请求给服务器，把请求体放到div里

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

//获取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://192.168.0.102:8000/server');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on when 当...的时候
            // readystate 是 xhr 对象中的属性，表示状态 0 1 2 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);// 状态码
                        console.log('状态字符串：' + xhr.statusText);// 状态字符串
                        console.log('所有响应头：' + xhr.getAllResponseHeaders());//所有响应头
                        console.log('响应体：' + xhr.response);//响应体

                        // 设置 result 的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }

        }

服务端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');
});

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

2、发送POST请求

POST请求这里跟GET请求不同的是，设置参数是在send方法里面设置的，可以是任意类型

const result = document.querySelector('#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'); 
   //3.发送请求，在这里传参，任意类型都可以
   xhr.send('a=1&b=2&c=3');
   // xhr.send('12241312312');
   //4.绑定事件
   xhr.onreadystatechange = function() {
       //判断服务端是否返回所有结果
       if(xhr.readyState === 4) {
           //判断响应是否成功
           if(xhr.status >=200 && xhr.status<300) {
               //处理服务端返回的结果
               result.innerHTML = xhr.response;
           }
       }
   }
})

服务端server.js是要设置post请求

//1. 引入express
const express = require('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端口监听中....");
});

##/3、设置请求头信息
在open方法后面,send方法前，添加xhr.setRequestHeader()方法

xhr.open('GET', 'http://192.168.0.102:8000/server');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-ww-form-urlencoded');
//3. 发送
xhr.send();

3、响应JSON数据

假设服务端server.js有一个data数据，因为send方法里面只能接收字符串，所以我们要对data数据进行字符串转换

app.all('/json-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应数据
    const data = {
        name: '你好zh'
    };
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

页面文件我们设置一个

const result = document.getElementById("result");
        //绑定键盘按下事件
        window.onkeydown = function () {
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://192.168.0.102:8000/json-server');
            //3. 发送
            xhr.send();
            // 事件绑定
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.response);
                        result.innerHTML = xhr.response; 
                    }
                }
            }
        }

在这里插入图片描述
我们可以看到已经拿到了这个data数据，但是它还是一个JSON格式的字符串，现在我们要把它提取出来，一共有两种方法：
（1）手动对数据进行转换

xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response; 
                        let data = JSON.parse(xhr.response);
                        console.log(data);
                        result.innerHTML = data.name;
                    }
                }
            }

（2）自动转换

const result = document.getElementById("result");
        window.onkeydown = function () {
            const xhr = new XMLHttpRequest();
            // 设置响应体数据的类型
            xhr.responseType = 'json';
            xhr.open('GET', 'http://192.168.0.102:8000/json-server');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }

在这里插入图片描述

4、Ajax请求存在的问题

（1）IE缓存问题

在IE浏览器中，他不会随着响应体的更新而更新，解决的方法就是在url后面加一个时间戳，让他知道这是不同时间发送的不同的响应体，这样问题就解决了

const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定键盘按下事件
        btn.addEventListener('click', function () {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://192.168.0.102:8000/ie' + Date.now());
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })

服务端server.js

app.get('/ie', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('hello ie -1');
});
//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000端口监听中....");
});

（2）Ajax请求超时与网络异常处理

在服务端写一个延时器，等过两秒在发送响应体

app.get('/delay', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    setTimeout(() => {
        response.send('演示响应');
    }, 3000)
});

设置超时xhr.timeout，超时回调xhr.ontimeout，网络异常回调xhr.onerror

const xhr = new XMLHttpRequest();
//超时设置 2s 设置
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){
      alert("网络异常，请稍后再试！！");
}
// 网络异常回调
xhr.onerror = function(){
      alert("你的网络似乎除了一些问题！");
}

怎么体现出网络异常回调呢？
我们可以用浏览器中的手动断网
在这里插入图片描述

（3）Ajax取消请求

还是在服务端设置延时器

app.get('/delay', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    setTimeout(() => {
        response.send('演示响应');
    }, 3000)
});

设置两个按钮

<button>点击发送</button>
<button>点击取消</button>

用abort()方法设置取消请求

const btns = document.querySelectorAll('button');

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

//abort
btns[1].onclick = function () {
     x.abort();
}

（3）Ajax重复请求

当重复点击发送ajax请求时，服务器的压力会很大，解决的办法就是定义一个标识变量，设置为false，当点击了发送ajax请求时，把标识变量设置为true，当readyState等于4的时候，再把标识变量变回true

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://192.168.0.102:8000/delay");
     x.send();
     x.onreadystatechange = function () {
         if (x.readyState === 4) {
         // 修改标识变量
         isSending = false;
         }
     }
}

在这里插入图片描述

五、nodemon自动重启工具

当我们每一次修改服务端代码时，总是要执行node 文件名.js命令来重启，安装nodemon工具就可以去掉这个操作，它会自动重启服务，非常的便捷
在终端先执行npm install -g nodemon，然后执行nodemon server.js命令安装nodemon即可

matmacchiato
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node.js+ajax基础学习（1）—node.js的安装及基础使用
weixin_41667361的博客
02-02 325
1、在node.js官网下载node.js，下载到电脑本地后根据提示默认安装（安装过程不用修改其他项，一直下一步安装即可），安装完成后，在系统命令行中（cmd）检查安装情况，在命令行输入node -v回车即可看到node.js版本号。 2、node.js安装后，npm也会默认一同安装在电脑上，在命令行输入npm -v回车后可以看到npm版本 3、在电脑上创建自己的项目文件夹，创建后通过命令行进入到...
node搭建Ajax环境
owenc1的博客
12-12 665
#搭建可以的运行Ajax的node服务器 首先我们需要先安装node.js 这里推荐教程Node.js安装及环境配置之Windows篇 - 刘奇云 - 博客园 安装完毕后随便创建一个服务器文件夹（名字随意） 以管理员身份运行cmd，然后进入到服务器文件夹输入以下代码: 创建package.json文件: 1 npm init --yes 创建package-lock.json文件 和 node_modules 文件夹: .
NodeJs中Ajax使用
热门推荐
Science Explorer
08-25 2万+
（异步JavaScript和XML）Asynchronous JavaScript + XML, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model,...
AJAX【随手记】
m0_63139310的博客
05-06 342
AJAX可以在不加载整个页面的情况下与服务器交换数据并更新部分网页内容，即异步更新（无刷新获取数据）。例如百度搜索词条下面会出现其他相关的词条或者在浏览 网页时快滚到底部时页面显示更多内容就是用AJAX实现。 AJAX是异步的js和xml（xml的作用是传输和存储数据）（异步是指客户端不需要等待服务器响应，在服务器处理请求时客户端可以进行其他操作）。 XML 是可拓展标记语言，用来传输和存储数据。和html不同的是没有预定义标签，全都是自定义标签，用来表示数据。例如要显示名字就直接定义标签为<n
HTTP协议、Ajax请求
weixin_30697239的博客
05-13 185
　　今天这篇文章呢，主要讲的就是关于HTTP协议、Ajax请求以及一些相关的小知识点。虽然内容不算多，可是是很重点的东西~ HTTP协议 1. http:超文本传输协议。简单、快速、灵活、无状态、无连接。2. url:统一资源定位符。 组成部分：协议名://主机名(主机ip):端口号/项目资源地址?传递参数的键值对#锚点 eg: http://192.168.5.151:808...
AJAX、http传输协议、响应状态码、请求方式
02-06
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在...
在Web关闭页面时发送Ajax请求的实现方法
10-17
主要给大家介绍了关于如何在Web关闭页面时发送Ajax请求的实现方法，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
什么是Ajax?Ajax如何发送请求（详）源码
07-18
Ajax如何发送请求？ 原文章: https://blog.csdn.net/weixin_52203618/article/details/131324686 Ajax 是 Asynchronous Javascript And XML 的缩写，它是异步的 Javascript 和 XML技术，是由 Javascript 、 XML 、...
jquery跨域请求示例分享(jquery发送ajax请求)
10-26
主要介绍了jquery跨域请求示例(jquery发送ajax请求),需要的朋友可以参考下
django ajax发送post请求的两种方法
09-18
主要介绍了django ajax发送post请求的两种方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
ajax协议
05-31 125
localhost/r/nConnection: Keep-Alive/r/n/r/n 应答格式：HTTP/1.1 200 OK/r/n/r/n&lt;br&gt;&lt;br&gt;hello ajax&lt;br&gt; 说明：http协议规定请求和应答都必须有http header，header必须指明HTTP版本。http header以两个换行"/r/n/r/n"作为结束标志。     然后说明一下server端如何影
ajax-请求协议设定
leo628的博客
05-05 805
翻译：URL意外结束时无法识别请求格式由于ASP.NET WEB默认开启 HttpSoap 和 Documentation 协议，HttpPost和HttpGet需要手动在配置文件进行配置，因此需要修改web.config当web server 发送post请求，提示格式错误，需要在web.config中加上一下配置信息&lt;system.web&gt;        &lt;webServic...
某数据泄露防护(DLP)系统NetSecConfigAjax接口SQL注入漏洞复现 [附POC]
薛定谔嘚喵博客
07-23 335
某数据泄露防护(DLP)系统是一款综合性的数据安全产品，旨在通过多种先进技术手段保护企业的敏感数据，防止数据泄露。某数据泄露防护(DLP)系统存在SQL注入漏洞，攻击者可通过该漏洞获取数据库敏感数据。
HTTP 协议浅析
yimeixiaolangzai的博客
07-23 617
HTTP 是一种无状态的、基于请求和响应模式的应用层协议。无状态意味着每次请求都是独立的，不依赖于前后的请求。客户端（通常是浏览器）发起请求，服务器处理请求并返回响应。
https和http区别
qq_39495959的博客
07-18 1716
HTTP信息是明文传输，而HTTPS则通过SSL/TLS协议进行加密传输，确保数据传输的安全性。HTTPS可以验证服务器身份，防止中间人攻击，保护数据的完整性和保密性。HTTPS是在HTTP基础上加入SSL构建的，支持加密传输和身份认证。由于HTTPS在传输层增加了加密处理，页面加载速度可能会比HTTP慢，且对服务器资源消耗更大。HTTPS需要向CA（证书颁发机构）申请证书，这通常涉及一定的费用，而HTTP不需要。HTTPS的URL以"https://“开头，而HTTP则是"http://”。
HTTP模块(二）
最新发布
weixin_45780818的博客
07-24 427
不仅可以接收字符串作为参数，发送文本数据给客户端，还能够接收 Buffer 对象来发送二进制数据，如图片、音频或视频文件等，需要注意的是使用 Buffer 时，确保你的内容类型（Content-Type）设置与实际数据类型相匹配，以便浏览器或客户端能够正确处理。这是由于响应报文均返回html所导致。会发现css样式和js点击功能失效。当结构为资源都在响应文件夹下时。
哪种SSL证书可以快速签发保护http安全访问？
2301_81852320的博客
07-19 581
SSL证书不同的证书类型，申请、签发、部署的时间周期有所不同，哪种SSL证书可以快速签发呢？
【HTTP 与 HTTPS 介绍与区别】
武帝为此的博客
07-20 440
HTTP（HyperText Transfer Protocol，超文本传输协议）是用于传输超文本的应用层协议。它是无状态的，其每个请求都是独立的，不会记住之前的请求信息。HTTPS（HyperText Transfer Protocol Secure，超文本传输协议安全版）是HTTP的安全版，它在HTTP的基础上增加了SSL/TLS（Secure Sockets Layer/Transport Layer Security）协议，用于加密数据传输，确保数据的机密性和完整性。
JDK HttpClient - Java 11 可用的 JDK 内置的 HTTP 客户端
成富的专栏
07-22 811
在 Java 应用的开发中，发送 HTTP 请求是一个常见的需求。应用在开发时，通常会使用流行的开源第三方库作为 HTTP 客户端，如 Apache HttpClient 或 OkHttp 等。这里介绍的是 JDK 自带的 HttpClient 实现，Java 11 可用。说到这里，还在用 Java 8 的朋友不用着急划走，Java 8 的下一个 LTS 版本就是 Java 11 了，没准什么时候...
原生Ajax基础教程：创建与发送Ajax请求详解
原生Ajax是前端开发中实现异步数据交互的一种核心技术，它允许Web应用程序在不刷新整个页面的情况下与服务器进行通信。这篇笔记主要介绍了如何使用JavaScript的原生XMLHttpRequest对象来构建AJAX请求的四个关键步骤...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值