AJAX(一)

本文详细介绍了AJAX的基本概念、优缺点、HTTP协议、XML与JSON的对比,以及AJAX在实际应用中的各种操作,如设置请求参数、处理超时与异常,并探讨了AJAX请求重复发送的问题。通过实例讲解了使用node.js和Express搭建服务端框架,以及如何响应JSON数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、AJAX简介


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

页面出现新内容但是页面没有进行刷新即为异步。
四种方式发送ajax:原生、jQuery、fetch、axios

AJAX的示例如下所示:

1.

其中输入abcd而引起的相关的关键字并不是本地生成的,而是通过向服务器发送请求,数据从服务器返回回来的。

2.

注册的时候报错的提醒即为AJAX,将注册账号发送给服务器,服务器进行校验,然后返回对应结果。不可用即出现该提醒。

3.

 按需加载,利用率提升,页面的加载速度变快。

4.

 出现二级三级菜单,也是AJAX的体现,鼠标放上去之后才会向服务器发送请求,服务器响应后,然后返回结果。

5.

当滚动条滚到底以后,会向服务器发送AJAX请求,从服务器返回新的数据。通过js将数据做一个处理,在页面当中动态创建新的节点,将整个内容做一个填充。

1.XML的认识和初识JSON: 

XML:可扩展标记语言
XML被设计用来传输和存储数据(通过网络以XML的形式返给客户端,客户端就可以使用)而HTML在网页当中呈现数据。
XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来表示一些数据。

比如说有一个学生数据:

name="孙悟空“;age=18;gender="男”;

用XML表示:

<student>
<age>18</age>
<name>孙悟空</name>
<gender>男</gender>
</student>

最开始AJAX在进行数据交换的时候所使用的格式就是XML,服务器端给客户端浏览器返回结果时返回的就是XML格式的一个字符串,前端js在接到这个结果以后,对这个内容做一个解析。把数据提取出来,对数据做一个处理。现在已经被JSON取代。比起XML,JSON更加简洁,在数据转换也更加容易。可以直接借助JSON的一些API的方法,快速将字符串转成js对象。灵活度远胜于XML
{"name":"孙悟空”,"age":18,"gender":"男"}

2.AJAX的优缺点:

AJAX的优点:
可以无需刷新页面而与服务器端进行通信
允许你根据用户事件来更新部分页面内容。
AJAX的缺点:
没有浏览历史,不能回退
存在跨域问题(不可以向a.com向b.com发送AJAX请求)
SEO(搜索引擎优化)不友好,网页中的内容爬虫是爬取不到的。

我们在源码里面进行搜索的时候:

发现里面并没有。 因为这些内容都是通过AJAX异步请求的方式来得到的结果。

源代码结果里面是没有商品信息的,源代码是响应体(HTTP响应的一部分)。

通过AJAX向服务端发送请求,服务端返还结果,然后通过js动态的创建到页面当中去的。爬虫的话爬不到商品的数据。

3.HTTP协议:

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

协议就是一种约定,规则。

我按一种规则发送请求,你按一种规则返回结果。

(1)请求报文

重点是格式与参数

请求行 :请求类型(GET、POST、DELETE、PUT)/URL的路径  HTTP的版本/1.1

请求头:

Host: rgf.com

Cookie: name=woer

Content-type: application/x-www-form-urlencoded(告诉服务器请求体是什么类型)

User-Agent: chrome 83

名字+:+空格+值

请求空行

请求体(GET请求:请求体是空的,POST请求:请求体可以不为空。)

完整的HTTP请求报文:username=admin&password=admin

(2)响应报文

响应行:协议版本  HTTP/1.1    响应状态码  200  响应状态字符串  OK

响应头:

Content-Type:text/html;charset=utf-8

Content-length:2048

Content-encoding:gzip

响应空行

响应体(主要的返回结果):

<html>
   <head>
     </head>
         <body>
         <h1>响应体</h1>
        </body>
</html>

在向服务端发送请求的时候,服务端给浏览器返回的结果包括这四部分,而html内容在响应体这块,浏览器在接到结果之后,会把响应体结果提取出来,对内容做一个解析,在页面做一个渲染和显示。

(3) GET请求演示:

请求行和请求头信息: 

对URL参数做一个解析之后的结果:(请求参数)

 可以看到参数有没有发送过去。

即可查看HTTP协议版本:

响应行和响应头信息: 

响应体信息:

preview是一个预览 ,对响应体解析之后的查看界面:

 (4)POST请求:

 原始的请求体的内容:

表单点击提交按钮之后,浏览器会帮助我们去把HTTP的报文给封装好,封装好后发送到目标服务器的指定端口,去做一个请求。 

4.node.js和 Express服务端框架::

node.js可以用来解析js代码,通过js代码对计算机资源做一个操作。ajax应用当中需要一个服务端。

下载 | Node.js 中文网 (nodejs.cn)

安装成功。

我们进行检测是否安装成功:

node.js安装成功。

(1) Express服务端框架:

Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网 (expressjs.com.cn)

AJAX需要给服务端发送请求,需要一个服务端。

Express,基于Node.js平台,快速、开放、极简的Web开发框架。

npm是一个包管理工具,是node.js平台下的一个包管理工具

npm init --yes,该命令进行一个初始化。

npm i express,该命令进行安装:

 express基本使用.js:

//1.引入express
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/',(request,response)=>{
//设置响应
response.send('HELLO EXPRESS')
});
/*function chan(){
  return console.log("服务已经启动,8000端口监听中...");
}
可以用如下方法,也可以采用function定义的方法
*/
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动,8000端口监听中...");
    })

/*其中
()=>{
console.log("服务已经启动,8000端口监听中...");
}
相当于:
function ajax(){
  return console.log("服务已经启动,8000端口监听中...");
}
*/

在命令行中输入node 文件名,即可启动服务器:

我们进入如下网站:

 向8000端口发送请求:

  向8000端口响应请求:响应行和响应头

 响应体:

 在node终端,ctrl+c可以关闭端口。结束服务。

5.ajax案例准备:

GET.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>AJAX GET 请求</title>
        <style>
           #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
           }
        </style>
    </head>
    <body>
       <button>点击发送请求</button>
       <div id="result"></div>
    </body>
</html>

meta标签详解:HTML <meta> 标签 (w3school.com.cn) 

border的属性及写法:

属性 含义
solid 实线
dotted 点线
dashed 虚线
double 双线

service.js:

//1.引入express
const express=require('express');
//2.创建应用对象
co
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

一直再追梦

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

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

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

打赏作者

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

抵扣说明:

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

余额充值