AJAX学习笔记上(学习自用)
创始人
2025-01-15 13:06:01
0

AJAX

原生AJAX

1.1AJAX简介

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

1.2XML简介

XML可扩展标记语言。
XML被设计用来传输和存储数据。
XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来标傲世一些数据。

 	John 	18  

现在已经被JSON取代了。

{"name":"John","age":18} 

1.3AJAX的特点

1.3.1AJAX的优点

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

1.3.2AJAX的缺点

1)没有浏览历史,不能回退
2)存在跨域问题(同源)
3)SEO不友好(网页内容无法爬虫)

1.4HTTP

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

1.4.1请求报文

重点是格式和参数

行	GET  /s?ie=utf-8  HTTP/1.1 头	Host: atguigu.com 	Cookie: name=guigu 	Content-type: application/x-www-form-urlencoded 	user-Agent: chrome 83 空行 体	username=admin&password=admin 
1.4.2响应报文
行	HTTP/1.1  200  OK 头	Content-Type: text/html;charset=utf-8 	 Content-length: 2048 	 Content-encoding: gzip 空行 体	 		 		 		 			

HHHHello

注:

发送GET请求:在页面检查里面打开网络,刷新页面,发出请求、接收响应,打开最上面的请求,Header中有Response Headers和Request Headers,还有Query String Parameters。Query String Parameters中是对请求的url中的内容做的解析结果,Request Headers中是请求行和请求头的位置,Response Headers是响应行和响应头,点击Response是响应体。

发送POST请求:Headers中的Query String Parameters,会变成其他的。

xhr是XMLHttpRequest的首字母,在网页检查的网络中的XHR是对AJAX请求的筛选。

AJAX发送GET请求在url中携带参数,先用问号分割,然后直接写,用&连接

http:127.0.0.1:8080/server?a=100&b=200&c=300 

AJAX发送GET请求在xhr.send()中携带参数

//3.发送 xhr.send('a=100&b=200&c=300'); xhr.send('a:100&b:200&c:300'); xhr.send('1231212313'); 

AJAX发送GET请求

                 AJAX GET 请求                 

AJAX发送POST请求

                 AJAX POST 请求            

对应的后端server.js

const express=require('express')  //创建应用对象 const app=express()  //创建路由规则 //req是对请求报文的封装 //res是对响应报文的封装 app.get('/server',(req,res)=>{     //设置响应头,设置允许跨域     res.setHeader('Access-Control-Allow-Origin','*');     //设置响应体     res.send('ok'); })  app.post('/server',(req,res)=>{     //设置响应头,设置允许跨域     res.setHeader('Access-Control-Allow-Origin','*');     //设置响应体     res.send('okkkk'); })  //监听端口启动服务 app.listen(8000,()=>{     console.log("服务已经启动,8000端口启动中。。。") }) 

自定义请求头

//自定义请求头,需要在后端设置好,否则会报错 xhr.setRequestHeader('name','hhhhhh') 

对应的后端设置

//可以接收任意类型的请求 app.all('/server',(req,res)=>{     //设置响应头,设置允许跨域     res.setHeader('Access-Control-Allow-Origin','*');     //响应体     res.setHeader('Access-Control-Allow-Headers','*');     //设置响应体     res.send('okkkk'); }) 

首先res.setHeader(‘Access-Control-Allow-Headers’,‘*’);设置接收所有响应头,接着app.all,表示接收任意类型的请求,因为会传回options类型的请求,无法得到回应,所以改成all接收。

服务端响应JSON数据

app.all('/json-server',(req,res)=>{     //设置响应头,设置允许跨域     res.setHeader('Access-Control-Allow-Origin','*');     //响应头     res.setHeader('Access-Control-Allow-Headers','*');     //响应一个数据     const data={         name:'hoshi'     };     //对对象进行字符串转换     let str=JSON.stringify(data);     //设置响应体     res.send(str) }) 

响应体中只能是字符串或buffer,所以要转换类型。
客户端接收到的是字符串,可以转换为JSON对象,有两种方式,一种是自动转换,一种是手动转换。
手动转换:

const data=JSON.parse(xhr.response) result.innerHTML=data.name; 

自动转换:

 //设置响应体数的类型 xhr.responseType='json'; result.innerHTML=xhr.response.name; 

上一篇:LLaMA 模型

下一篇:数据结构练习

相关内容

热门资讯

专业讨论!德扑之星真破解套路(... 专业讨论!德扑之星真破解套路(辅助挂)软件透明挂(有挂了解)-哔哩哔哩;人气非常高,ai更新快且高清...
每日必看!智星德州菠萝外挂检测... 每日必看!智星德州菠萝外挂检测(辅助挂)软件透明挂(有挂教学)-哔哩哔哩1、玩家可以在智星德州菠萝外...
透视透明挂!轰趴十三水有后台(... 轰趴十三水有后台赢率提升策略‌;透视透明挂!轰趴十三水有后台(辅助挂)软件透明挂(有挂详情)-哔哩哔...
发现玩家!德扑ai助手软件(辅... 发现玩家!德扑ai助手软件(辅助挂)透视辅助(有挂教学)-哔哩哔哩;玩家在德扑ai助手软件中需先进行...
一分钟了解!x-poker辅助... 一分钟了解!x-poker辅助软件(辅助挂)辅助透视(有挂攻略)-哔哩哔哩1、每一步都需要思考,不同...
一分钟揭秘!德州最新辅助器(辅... 一分钟揭秘!德州最新辅助器(辅助挂)透视辅助(有挂攻略)-哔哩哔哩;德州最新辅助器最新版本免费下载安...
玩家攻略推荐!德州辅助(辅助挂... 玩家攻略推荐!德州辅助(辅助挂)辅助透视(有挂了解)-哔哩哔哩是由北京得德州辅助黑科技有限公司精心研...
揭秘真相!pokernow德州... 《揭秘真相!pokernow德州(辅助挂)辅助透视(有挂介绍)-哔哩哔哩》 pokernow德州软件...
五分钟了解!德州之星辅助器(辅... 五分钟了解!德州之星辅助器(辅助挂)辅助透视(有挂透明)-哔哩哔哩1、很好的工具软件,可以解锁游戏的...
推荐一款!pokermaste... 1、推荐一款!pokermaster有外挂(辅助挂)透视辅助(有挂教学)-哔哩哔哩;详细教程。2、p...