Ajax 笔记 01

01 ajax的基本使用

ajax五步骤:

1.构建异步请求对象

2.调用open方法 传入请求方式 服务器地址等参数

3.调用send方法 发起网络请求

4.注册请求对象的状态改变事件

5.在状态改变事件里面 判断当前状态 并取得返回值

02 get方式向服务器发送数据

ajax的get方式向服务器提交数据:

ajax.open('请求方式','服务器地址?键1=值1&键2=值2.....')

03 ajax的post方式向服务器发送数据

ajax的post方式向服务器发送数据:

ajax对象.send('键1=值1&键2=值2.....')

前提是ajax必须设置一个请求头 才能使得post数据提交成功

设置请求头:

ajax对象.setRequestHeader("键","值");

ajax对象.setRequestHeader("Content-type","application/x-www-form-urlencoded")

ajax对象.setRequestHeader("Content-type","multipart/form-data")

ajax对象.setRequestHeader("Content-type","application/json")

响应:

响应码:

200 'ok'

404 'not found'

304 '从缓存中读取'

302 转发

500 'internal error' 服务器内部错误

请求头:

包含本次请求的一些相关信息

比如 请求的地址

当前网页的数据的地址

提交数据内容的类型

提交的数据的长度

数据的格式

数据的编码格式

响应头:

服务器版本

服务器语言类型

服务器返回的数据类型

数据长度

GET与POST的区别:

GET:

提交的参数在请求地址的后面拼接

参数大小限制3~4k

get偏向于数据获取

get相对速度快

get相对不安全

get请求可以被加入收藏夹 有历史记录 会被加入书签

POST:

提交的数据在send里面(隐式传递)

参数的大小没有限制

(体积大的数据可以使用mulltipart/form-data格式进行二进制流 分段进行传递)

post偏向于提交数据

post相对速度慢

post相对安全

post请求不可以被加入收藏夹 没有历史记录

04 JQ中ajax的使用

jq的ajax方法 可以进行全配置 的访问服务器

$.ajax(option对象)

option对象的常用属性:

url 服务器地址

type 请求方式(get/post)

data:{ } 提交的参数

success : function(){ } 成功的回调

error : function(){ } 失败的回调

timeout:3000 请求的超时时间

headers : { } 设置自定义请求头

dataType : " " 返回数据类型的预处理

不常用属性:

beforeSend:function(xhr){ } 网络请求发起之前

跨域属性:

jsonp

jsonpCallback

相关推荐
数据掘金10 分钟前
百度统计后台页面数据异常?从手动调用时机开始排查
前端
hunteritself11 分钟前
10 层 4K 实时剪辑,国产工作站进入广电制作核心
大数据·前端·人工智能·深度学习·transformer
踩着两条虫12 分钟前
我在浏览器里“盖”了一个村:Vue + Three.js 大屏开发踩坑记
前端·vue.js·three.js
Go Work16 分钟前
2026 Cadence SPB 24.1中文版安装图文详解(附安装包)
经验分享·笔记
mbshqqb17 分钟前
TypeScript基础教程之同步生成器
前端·javascript·typescript
嘟嘟同学和妮妮同学35 分钟前
【升级】一个中国历史可视化站:皇帝时间线梳理、古代思想流派、诗词鉴赏 (2)
前端·html
ACP广源盛1392462567339 分钟前
HDMI2.0 转 DP1.4 桥接方案评估:国产 GSV2125C@ACP 芯片选型笔记
笔记·硬件架构·hdmi·type-c·国产芯片
暗夜行者之光1 小时前
LangGraph + MCP 实战:构建"自然语言查数据"的 ChatBI Agent
前端·后端
一tiao咸鱼1 小时前
还在手动海投?我做了个 AI 求职助手,自动筛选 BOSS 职位再精准投递
前端·后端·面试
尤水就下1 小时前
🔥预热:在线文档的 block 架构是如何实现的(未完待续...)
前端·javascript·架构