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 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code2 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript
爱吃青椒不爱吃西红柿‍️9 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
一棵开花的树,枝芽无限靠近你12 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜15 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑23 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX25 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
小行星12534 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12541 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun0011 小时前
[less] Operation on an invalid type
前端·vue·less·sass·scss