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

相关推荐
觉醒大王21 分钟前
哪些文章会被我拒稿?
论文阅读·笔记·深度学习·考研·自然语言处理·html·学习方法
大橙子额29 分钟前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
方安乐37 分钟前
科普:股票 vs 债券的区别
笔记
爱喝白开水a2 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
董世昌412 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
傻小胖2 小时前
22.ETH-智能合约-北大肖臻老师客堂笔记
笔记·区块链·智能合约
浅念-3 小时前
C++入门(2)
开发语言·c++·经验分享·笔记·学习
吃杠碰小鸡3 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone3 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09013 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js