一、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安装成功。
(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