Ajax额

原生Ajax

xml

已被json取代

http

请求方法+url+http版本号

network

谷歌浏览器查看请求报文和响应报文

F12

network

header里面有

请求头

响应头

点击view source

可以查看请求响应行

请求体在请求行头下面

get请求有url参数,请求体变为query String ,会对请求参数进行解析

响应体在response 栏中看

Preview预览效果查看

Nodejs

Nodejs就是一个应用程序可以解析js代码

express框架

基本使用

文件夹最外层启动终端

1.npm init --yes 进行初始化

2.npm i express

Ajax请求发送前的准备

前端页面的准备

服务端代码的准备

Ajax操作的基本步骤

XHR network选择文件时 XHR Ajax请求的筛选

获取元素btn

Ajax操作四步

Ajax中设置url参数

如何给url缀参数

用问号?分隔url

a=100 a:参数名,后面是参数值

如果有多个参数用&符分隔

Ajax post请求

服务端代码需要添加路由

post请求设置请求体

在Payload中查看

Ajax设置请求头信息

在Ajax设置中第二步进行

Content-Type设置请求体内容的类型

为其固定内容

通常来说,身份校验的信息会存在头信息里面,,被服务器端提取,进行校验

自定义请求头设置

自定义请求头因为浏览器的安全机制,会报错

需要在服务端代码中添加设置响应头

允许自定义头信息

2.使用自定义请求头,会自动发送options请求(全新的校验,检测头信息是否可用)

需要将端口 路由设置 接受改为all 可以接受任意类型的请求

设置请求头信息一般用于存储身份校验的信息

Ajax请求服务端响应Json

通常情况下,服务端返回结果绝大多数都是json格式的数据

服务端设置

服务端设置响应体数据

response.send()只能传入String和Buffer

ajax第四步设置

手动对传来的响应体数据进行转换

自动转换

第一步

nodemon

IE浏览器缓存问题

Date.now()时间戳

这时再发送请求 每次都是不同的请求,会发送新的请求,不会走浏览器本地缓存

请求超时控制和网络异常处理

/delay

取消请求

abort()

重复请求问题

jQuery中Ajax

用bootcdn时,在标签内 加 crossorigin="anonymous" 跨源请求的一个属性设置, 设置匿名后,向后面的资源发送请求时不会携带当前域名下的cookie 可以消除一个警告

第一个参数是给谁发;第二个参数是一个data参数对象用键值对的形式保存;第三个参数是一个回调函数

get请求下 date参数对象成为url字符串参数 post请求下 成为请求体

jQuery通用方法发送Ajax请求

axios Ajax工具库

axios 可以发送url参数,也可以发送请求头信息

get方法无法设置请求体,在post方法中才能设置请求体

get请求

.then方法返回的是一个Axios对象

用于设置回调函数

post请求

post方法ruguodiergecansh

axios 通用方法发送请求

method:post

后面添加.then 可以进行响应结果的处理

response

fetch函数发送Ajax请求

fetch函数属于全局对象,返回结果是Promise对象

第一个参数是URL,第二个参数是一个对象包含各种请求内容

跨域

同源策略

同源策略就是来自于同一个服务器内容

同源策略就是本页面和请求都来自于同一个服务端 server.js

jsonp解决跨域

script标签本身具有跨域特性,例如bootcdn的使用,使用远程资源进行Axios等的服务

open with liveServer (访问方式为http协议) 打开页面其中可以找到源文件 的http路径

将原本的url文件url换成完整的url

jsonp实现跨域原理

然后Script标签对里面的内容做解析处理

这里的js文件的请求是一个跨域请求

、、

这里用script标签的src引入这个服务 会发生错误 因为这个服务返回的是字符串,

script标签无法对其进行解析

、、

原理:script请求src过去后,需要回来的结果是一段js代码,这样浏览器才能解析和执行代码

返回结果的形式是一个函数调用,而函数的参数是我们想给客户端返回的结果数据

jsonp案例

案例实现目标:

失去焦点后,边框变红,并在下面显示'已存在'。

回调函数

返回结果

jQuery发送jsonp请求

注意:使用jQuery发送jsonp请求时,需要在url补一个参数

写的时候callback的值是? 实际发送请求时 有值 服务端会接收到callback参数值

需要callback参数的值作为函数调用的函数去拼接字符串

现在jQuery已经注册一个这样的callback函数

只要服务端返回结果是这个函数的调用,则前端会对这个代码数据进行处理

服务端返回结果设置

cors

常用

5.11.12

onreadyststechange

readystate 是xhr对象中的属性 有五个值

0:xhr未初始化

1:open方法调用完毕

2:send方法调用完毕

3:服务端返回部分结果

4:返回所有结果

xhr.status

响应状态码

响应行:http版本 响应状态码 状态字符串

xhr.statusText

响应头

空行

响应体

AJax请求基本操作

1.创建对象

const xhr = new XMLHttpRequest()

2.初始化 设置请求方法和url

xhr.open('GET','http://127.0.0.1:8000/server');

3.发送

xhr.send();

4.事件绑定 处理服务端返回的结果

xhr.onreadysatechange=function(){

}

报文样式

相关推荐
别拿曾经看以后~2 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死5 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试7 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人16 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人17 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR22 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香24 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969327 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai32 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc37 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter