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

相关推荐
孟陬1 分钟前
国外技术周刊 #1:Paul Graham 重新分享最受欢迎的文章《创作者的品味》、本周被划线最多 YouTube《如何在 19 分钟内学会 AI》、为何我不
java·前端·后端
BER_c2 分钟前
前端权限校验最佳实践:一个健壮的柯里化工具函数
前端·javascript
兆子龙5 分钟前
别再用 useState / data 管 Tabs 的 activeKey 了:和 URL 绑定才香
前端·架构
sudo_jin5 分钟前
前端包管理器演进史:为什么 npm 之后,Yarn 和 pnpm 成了新宠?
前端·npm
叁两1 小时前
用opencode打造全自动公众号写作流水线,AI 代笔太香了!
前端·人工智能·agent
golang学习记1 小时前
GitLens 十大神技:彻底改变你在 VS Code 中的 Git 工作流
前端·后端·visual studio code
SuperEugene1 小时前
后台权限与菜单渲染:基于路由和后端返回的几种实现方式
前端·javascript·vue.js
兆子龙1 小时前
WebSocket 入门:是什么、有什么用、脚本能帮你做什么
前端·架构
是一碗螺丝粉1 小时前
LangChain 链(Chains)完全指南:从线性流程到智能路由
前端·langchain·aigc
月弦笙音1 小时前
【浏览器】这几点必须懂
前端