ajax
简称:async Javascript And XML 异步的JavaScript和xml
是一项综合技术:主要使用XMLHttpRequest简称xhr与服务器交换数据,通过js与css实现无刷新更新页面数据
原生js的ajax请求的缺点我简单总结为:
用户等待时间长,页面加载慢,浪费时间和带宽
http 请求方法:
get 获取
post 发送
delete 删除
put 添加
options 选项
trace 回显
常用的有get和post
那么GET和POST又有什么区别呢?
post | get |
理论上是没有大小限制的 | 限制在2k |
在地址栏中不显示参数 | 在地址栏中显示参数 |
不会缓存 不能收藏书签 不能转发 | 会缓存 可以收藏书签 可以转发 |
通常向服务器修改添加 删除数据 | 通常向服务器中获取数据 |
get方法
//1.创建
var xhr=new XMLHttpRequest();
//2.比如用GET方式打开这个txt文件
xhr.open("GET","be.txt",true)
//3.然后发送请求
xhr.send()
//4.监听
xhr.onreadystatechange=function(){
if(xhr,readystate===400&&xhr.status==200){
//responseText就是获取的数据
alert(xhr.responseText)
}
}
post
// 01 创建xhr
var xhr = new XMLHttpRequest();
// 02 open打开
xhr.open('POST',url);
// 03 设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 04 发送数据
xhr.send();
// 05 监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
alert(xhr.responseText);
}
}
http请求过程:
1创建TCP连接(联网)
2.客户端发送请求与请求体
3.服务器端应答 响应头 响应体
4.关闭tcp连接
响应码:
1xx 各种准备
2xx 各种成功 200请求成功 201 添加成功
3xx重定向 303 301 临时重定向
4xx客户端错误 404找不到 403 没有权限
5xx服务器错误 500 服务器内部错误 505 服务器忙
readyState:
0 未初始化
1请求参数已准备,尚未发送请求
2 已经发送请求 尚未接受响应
3正在接受部分响应
4响应全部接受完毕
传统的ajax的xhr 将会被Fetch替代等下篇文章详细介绍~~~
~~故不登高山,不知天之高也;不临深溪,不知地之厚也;~~