AJAX（一）：初识AJAX、http协议、配置环境、发送AJAX请求、请求时的问题

于 2022-08-26 22:35:16 发布
阅读量1.5k 收藏 6
点赞数 3
分类专栏： AJAX 文章标签： ajax http 前端 json javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42044763/article/details/126533380
版权

AJAX学习笔记

一、什么是AJAX？

1.原生AJAX

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

2.XML

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

3.AJAX的优缺点

优点：
（1）可以无需刷新页面而与服务器端进行通信。
（2）允许你根据用户事件来更新部分页面内容。
缺点：
（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.安装express

之前脚手架的时候配置过node环境，所以这里的安装非常顺利，没有任何报错。只需要在vscode => 终端 => 当前目录中 => 输入npm i express就欧了。如果出错了去翻我的配置Vue脚手架笔记。

其实这里也可以安装到全局，也就是安到node.js的根目录里，好像是npm i express -g

2.创建一个服务端

在当前目录新建个js文件（不一定非要在express安装的根目录噢），然后在终端 => 当前目录下 => 输入node 文件名就可以启动服务

在这里插入图片描述

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

网页打开：
在这里插入图片描述
端口释放：Ctrl+c

3.nodemon实现保存自动重启服务

终端运行npm install -g nodemon安装nodemon，这样每次保存就会自动重启服务，比较方便(副作用是所有html都无法保存时自动调整格式)，使用时还是在当前目录nodemon+文件名 ，如nodemon server.js（之前是node server.js）

四、发送AJAX请求

1.发送GET请求

点击按钮div中呈现响应体：点击按钮发送AJAX请求给服务器，然后把响应体拿过来放到div中。
没见过这些东西，照着敲的，仔细看我写的注释

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

//获取button元素
const btn = document.querySelector('button');
const result = document.querySelector('#result');
btn.addEventListener('click', function() {
    //1.创建对象
    const xhr = new XMLHttpRequest();
    //2.初始化，设置请求的方法和url
    xhr.open('GET','http://127.0.0.1:8000/server?a=1&b=2&c=3');
    //3.发送
    xhr.send();

    //4.事件绑定，处理服务端返回的结果
    //on 当……的时候
    //readyState是xhr对象中的属性,表示状态0 1 2 3 4 
    //其中0-未初始化 1-open调用完毕 2-send调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果
    //change 改变
    xhr.onreadystatechange = function () {
        //判断服务端是否返回了所有结果
        if(xhr.readyState === 4) {
            //判断响应状态码 200 404 403 401 500
            // 2xx ,2开头都表示成功
            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;
            }
        }
    }
})

设置url参数：用？隔开，=赋值，&分隔
例如：http://127.0.0.1:8000/server?a=1&b=2&c=3

看不懂的服务端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请求

鼠标经过div发送AJAX请求，然后拿回来响应体放在div中

<div id="result"></div>

仔细对比GET和POST的不同，好像这个传参在send中写，类型随便？？
还有就是可以xhr.setRequestHeader设置请求头，仔细看看注释

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('a:1&b:2&c:3'); 
   // xhr.send('1232142412421312');
   //4.绑定事件
   xhr.onreadystatechange = function() {
       //判断服务端是否返回所有结果
       if(xhr.readyState === 4) {
           //判断响应是否成功
           if(xhr.status >=200 && xhr.status<300) {
               //处理服务端返回的结果
               result.innerHTML = xhr.response;
           }
       }
   }
})

server.js

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

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

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

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

3.JSON响应

服务端响应体也可以设置为一个数据发送过去，但是不能直接写，要通过JSON.stringify(数据)把数据转换为JSON字符串

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

页面在拿到JSON字符串响应体的时候，是无法识别的，所以需要把JSON字符串转换为js对象，有两种方式：

（1）手动把JSON字符串转换为js对象

借助JSON.parse(xhr.response)

let data = JSON.parse(xhr.response);
console.log(data);  //js对象：{ name: 'ht' }
result.innerHTML = data.name;

（2）自动把JSON字符串转换为js对象

借助 xhr.responseType = 'json';

xhr.responseType = 'json';
......
console.log(xhr.response); //js对象：{ name: 'ht' }
result.innerHTML = xhr.response.name;

五、AJAX请求的几个问题

1.IE缓存问题

//IE缓存问题
app.get('/ie', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO IE 666');
})

恶心的IE当你响应体改变时，它不会更新，而是走缓存，想要解决这个问题，就要让每次请求的url都不一样，那么我们在后面传个参数，值为时间戳，就可以解决改变响应体时IE走缓存不更新的问题

 xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());//获取当前的时间戳

2.AJAX请求超时与网络异常处理

服务端写个定时器，2秒后发送响应体过去

app.get('/delay', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    setTimeout(() => {
        response.send('HELLO 我延迟响应啦');
    }, 2000);
})

然后点击按钮发送请求时，可以设置超时xhr.timeout和超时回调xhr.ontimeout，还有网络异常回调xhr.onerror

const xhr = new XMLHttpRequest();
//超时设置,1s还没收到响应体，就取消请求
xhr.timeout = 1000;
//超时回调
xhr.ontimeout = function() {
    alert('请求超时baby!');
}
//网络异常回调
xhr.onerror = function () {
    alert('你的网络似乎开小差了！！'); 
}

Chorme浏览器可以手动断网
在这里插入图片描述

3.AJAX手动取消请求

还是搞个定时器发送响应体

app.get('/cancel', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    setTimeout(() => {
        response.send('HELLO 我请求被取消了，没法发过去了');
    }, 2000);
})

整俩按钮

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

取消请求，用xhr.abort()方法，abort中文意思是中止
这里边儿有个作用域的问题，解决方法是把xhr定义在外边给个null，然后赋值xhr实例，再调用方法。（重复赋值不要用const噢，能用const就用const，不能const就let，反正别var揍中了）

const send = document.querySelectorAll('button')[0];
const cancel = document.querySelectorAll('button')[1];

let xhr = null;
//发送请求
send.onclick = function() {
    xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:8000/cancel');
    xhr.send();  //不用拿响应体，所以后边儿不写了
}
//取消请求，abort方法
cancel.addEventListener('click', function() {
    xhr.abort(); //先点send再点cancel不会报错，先点cancel报错
    console.log(xhr);  //先点send再点cancel是xhr实例，先点cancel报错
})

4.AJAX请求重复发送问题

服务端还是用的前面的定时器，这里重复请求写个逻辑，如果没处在请求中,就创建新的请求;如果已经请求了,就废掉,再重新创建请求。具体看代码和注释吧，这块儿听的不是很清晰，先简单了解下，还有啊，作用域回头得补补，这块儿太不熟了

const send = document.querySelector('button');

let xhr = null;
let isSending = false;  //是否正在发送AJAX请求
//发送请求
send.onclick = function() {
    //如果没处在请求中,就创建新的请求;如果已经请求了,就废掉,再重新创建请求
    if(isSending) xhr.abort();    
    xhr = new XMLHttpRequest();
    isSending = true;
    xhr.open('GET', 'http://127.0.0.1:8000/delay');
    xhr.send();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            //有可能请求失败，所以这里不用再做判断，只要拿到结果，就算请求完成
            isSending = false;  //拿到服务器的全部结果后,置为false
        }
    }
}
DantinZhang
关注
专栏目录
《web开发： Ajax Http协议》
yexiangCSDN的专栏
01-29 264
一、通信协议 1 什么是通信 通信，就是信息的传递和交换。 通信三要素： 通信的主体 通信的内容 通信的方式 现实生活中的通信 案例：张三要把自己考上传智专修学院的好消息写信告诉自己的好朋友李四。 其中： 通信的主体是张三和李四； 通信的内容是考上传智专修学院； 通信的方式是写信； 互联网中的通信 案例：服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器。 其中， 通信的主体是服务器和客户端浏览器； 通信的内容是传智专修学院的简介； 通信的方式是响应； 2 什么是通信协议 通信协议（
Ajax的运行环境搭建
寒雪痕的专栏
11-29 9642
Ajax的运行环境搭建 l         安装Tomcat服务器 配置Tomca的服务器端口：server.xml文件中找到第67行代码处 l         Tomcat用户管理：tomcat-users.xml文件 l         部署Web应用 在Tomcat安装目录下的conf目录下新建  Catalina/localhost 目录，在此目录下新建一个app
AJAX通讯协议
Eric的博客
11-04 5734
和通常了解的不同，AJAX和xml没有什么必然联系，虽然调用的对象名字是XmlHttp。XmlHttp的通讯协议格式仅仅是HTTP协议。 请求格式：GET / HTTP/1.1/r/nAccept: */*/r/nUser-Agent: Mozilla/4.0 (compatible; Win32; WinHttp.WinHttpRequest.5)/r/nHost: localhos
AJAX-初学AJAX本地环境配置
weixin_33744141的博客
12-01 297
1、前段时间学习headfirst AJAX，发现有些概念比较陌生，理解起来比较困难，等看完了半本的JavaScript高级程序设计，再回头看这本AJAX，发现轻松了很多，但是遇到了一个问题，AJAX请求php后，返回的竟然是整个php代码，按书上的说法，应该是返回echo的内容才是啊，虽然之前学习第一章的时候，也遇到了这个问题，当时并没有在意，以为是书的内容毕竟不太新了，可能是哪里出了问题，但是...
ajax协议
05-31 150
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初级教程之初识AJAX
10-24
HTTP协议是网络上应用最为广泛的一种网络协议，对于AJAX来说，理解HTTP的请求头和响应头，以及POST和GET方法至关重要。GET方法用于从服务器获取数据，数据附在URL后面；POST方法则将数据封装在请求体中，适用于传递...
初识Ajax: 异步请求简介
Ajax（Asynchronous JavaScript and XML）是一种在Web应用中使用的一种异步请求技术。它能实现在不刷新页面的情况下，通过向服务器发送异步请求，获取数据并动态更新页面内容。相比传统的同步请求方式，Ajax能够提升...
01_服务器的基本概念与初识Ajax
06-16
服务器的基本概念与初识Ajax 本资源摘要信息将对服务器的基本概念、URL地址、客户端与服务器的通信过程、服务器对外提供的资源和Ajax技术进行详细的阐述。 一、客户端与服务器 在互联网时代，用户通过客户端（如...
Ajax基础教程：从初识到精通
理解请求和响应的生命周期，包括打开连接、发送请求、接收响应和处理返回的数据，是掌握Ajax的关键。 此外，了解如何处理异步性是另一个重要方面，因为Ajax的“异步”特性意味着用户可以继续浏览网页，而不必等待...
http ajax请求
lipeiwen1998的博客
08-01 571
简介 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 应用场景： 当我们在百度中输入一个“传”字后，会马上出现一个下拉列表！列表中显示的是包含“传”字的10个关键字。 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网、
ajax环境webconfig配置
12-11
<system.web> <pages> <controls> <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </controls> </pages> </system.web>
Ajax基础及环境搭建
06-15
学习ajax必不可少的文档加深对ajax的理解
Ajax之HTTp请求
weixin_34194359的博客
02-23 83
71、Ajax的基础概念 *运用html和css来实现页面表达信息 *运用XMLHttpRequest和web服务器进行数据的异步交换 *运用JavaScript操作DOM来实现动态局部刷新 2、在运用XMLHttpRequest对象之前必须先实例化该对象 var request = new XMLHttpRequest();//IE7+ 在IE5和IE6中不兼容XMLHttpRequest...
使用Ajax发送http请求（get&post请求）
weubiwube的博客
12-20 605
使用Ajax发送http请求（get&post请求） 同步和异步的概念： 同步：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。 异步：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。 1.同步：必须等待前面的任务完成，才能继续后面的任务。 2.异步：不受当前任务的影响。 流程比较：普通B/S模式（同步）AJAX技术（异步） 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处
Ajax-Http请求
汉堡请不要欺负面条
10-16 311
一.什么是HTTP? 1.是计算机通过网络进行通信的规则； 2.web浏览器向web服务器发送请求命令 3.是一种无状态协议（不建立持久的链接） 二.一个完成的http的请求过程，通常有以下7步骤： 1. 建立TCP连接 2.Web浏览器向Web服务器发送请求命令 3.Web浏览器发送请求头信息 4.Web服务器应答 5.Web服务器发送应答头信息 6.Web服务器
Ajax——HTTP请求
糖长老莫小贝的博客
03-27 668
关于Ajax，我们先了解一下HTTP。 http是计算机通过网络进行通信的规则，他是一种无状态协议（不建立持久的连接）。 一个完整的HTTP请求通常有下面7个步骤： 建立TCP连接 Web浏览器向Web服务器发送请求命令 Web浏览器发送请求头消息 Web服务器应答 Web服务器发送应答头消息 Web服务器向浏览器发送数据 Web服务器关闭TCP连接 一个HTTP请求一般由四部分组成： ...
Ajax - Http请求
fifthThirteen-- A Rookie Web Front-end development
12-19 242
http:是不保留相关信息的一种无状态协议。 http请求： 1.建立TCP链接 2.Web游览器向Web服务器发送请求命令 3.Web游览器发送请求头信息 4.Web服务器应答 5.Web服务器发送应答头信息 6.Web服务器向游览器发送数据 7.Web服务器关闭TCP连接 一个HTTP请求一般由四部分组成： 1.HTTP请求的方法或动作，比如是GET或POST请求
Ajax 学习手扎(一)Ajax 的环境配置
最求最饱满的数据，记录最真实的梦想
03-09 1320
 1,下载 dwr.jar包放到Web-Info/lib/下2,修改web.xml配置       dwr-invoker       uk.ltd.getahead.dwr.DWRServlet                                                          debug                 tr
Ajax HTTP协议
QIU的博客
07-26 166
概念: HTTP（HyperText Transfer Protocol，超文本传输协议）最早就是计算机与计算机之间沟通的一种标准协议 随着时代的发展，技术的变迁，这种协议现在广泛的应用在各种领域，也不仅仅局限于计算机与计算机之间 手机、电视等各种智能设备很多时候都在使用这种协议通讯，所以一般现在称 HTTP 为端与端之间的通讯协议 这种协议规范了通讯内容的格式以及各项内容的含义。 HTTP协议分为请求 和响应 两个部分组成: 请求 请求行 协议及版本 请求的地址 [请求的参数] 请求的方式 请求头
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值