Ajax
啥是Ajax?
JS 语言 和 服务端 交互的手段。
全称:Asynchronous JavaScript and XML
ajax 的特点
- 不需要插件的支持,原生 js 就可以使用
- 用户体验好(不需要刷新页面就可以更新数据)
- 减轻服务端和带宽的负担
- 缺点: 搜索引擎的支持度不够,因为数据都不在页面上,搜索引擎搜索不到
- 前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会记录前后页面)
创建一个ajax请求
// 1. 创建 ajax 对象
//IE9以上
let xhr = new XMLHttpRequest()
//IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
// 2. 配置请求信息
xhr.open(‘GET’, ‘./test.php’, true)
// 3. 发送请求
xhr.send()
// 4. 接受响应
xhr.onload = function () {
console.log(xhr.responseText)
}
ajax状态码
0 => 创建 ajax 对象成功
1 => 配置请求信息成功
2 => 响应已经回到浏览器
3 => 浏览器正在解析响应体
4 => 响应体解析完毕可以使用了
HTTP响应状态码
100 ~ 199表示连接继续
200 ~ 299各种成功
300 ~ 399重定向
400 ~ 499客户端错误
500 ~ 599服务端错误
常见的HTTP请求
GET – 向服务器获取
POST – 向服务器传递
PUT – 向服务器传递,并让服务器添加
DELETE – 让服务器删除
HEAD – 只是用于获取响应头
PACTH – 和 PUT 类似, 只不过更倾向于更新局部数据
CONNECT – 预留方式, 管道连接更改为代理连接使用
OPTIONS – 允许客户端查看服务端性能
GET 和 POST 的区别
- 语义化不一样:GET 倾向于从服务器获取数据;POST 倾向于向服务器提交数据。
- 传递参数的方式:GET 请求直接在地址栏后面拼接;POST 请求在请求体里面传递。
- 参数的大小限制:GET 请求一般不大于 2KB;POST 请求理论上没有上限。
- 缓存能力:GET 会被浏览器主动缓存;POST 不会被浏览器主动缓存。
- 安全性能:GET 请求相对安全性比较低;POST 请求相对安全性比较高。
GET 和 POST发送数据
get:
将数据在,url后,拼接即可
post:
将数据放在send的参数内,但是提前要设置发送数据的格式:
ajax对象.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax的兼容处理
//创建
// 标准浏览器
let xhr = new XMLHttpRequest()
// IE 低版本
let xhr = new ActiveXObject(‘Microsoft.XMLHTTP’)
//接收响应
// 标准浏览器
xhr.onload = function () {
console.log(xhr.responseText)
}
// IE 低版本
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
发送一个带有参数的 get 请求
-
get 请求的参数就直接在 url 后面进行拼接就可以
const xhr = new XMLHttpRequest() // 直接在地址后面加一个 ?,然后以 key=value 的形式传递 // 两个数据之间以 & 分割 xhr.open('get', './data.php?a=100&b=200') xhr.send()
- 这样服务端就能接受到两个参数
- 一个是 a,值是 100
- 一个是 b,值是 200
发送一个带有参数的 post 请求
-
post 请求的参数是携带在请求体中的,所以不需要再 url 后面拼接
const xhr = new XMLHttpRequest() xhr.open('get', './data.php') // 如果是用 ajax 对象发送 post 请求,必须要先设置一下请求头中的 content-type // 告诉一下服务端我给你的是一个什么样子的数据格式 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') // 请求体直接再 send 的时候写在 () 里面就行 // 不需要问号,直接就是 'key=value&key=value' 的形式 xhr.send('a=100&b=200')
application/x-www-form-urlencoded
表示的数据格式就是key=value&key=value
ajax环境
- 在服务器环境下运行
- 异步请求数据:同时执行,效率高,当前请求不会影响其它程序;可以在不中断浏览器其他任务的情况下加载新数据,即无刷新加载数据;提高用户体验;减轻服务端和带宽的负担。
- 由此引出JS的执行机制:1.js自身是一个单线程的编程语言;2.上一行代码没有执行完,下一行代码必然不能执行,执行速度慢;3.利用异步模拟了多线程的执行过程。
异步
- 事件产生的异步
①var a=10; document.οnclick=function(){a=20; }console.log(a); 此时打印的a为10;
原因:绑定事件的过程执行了,但是只是执行了绑定事件,绑定事件的函数没有被执行 - 计时器,延时器产生的异步
②var a=10; setTimeout(()=>{a=20;},100);console.log(a);
计时器自身是同步执行了的,只是内部的回调函数没有执行在等待;内部的回调函数与外部代码之间是异步:会有一瞬间在进程中同时存在 - ajax请求结束
- 异步产生的问题
1.异步表示将来
2.当前无法获取将来
3.只能将来获取将来
封装Ajax
function ajax(ops){
ops.type = ops.type || "get";
ops.data = ops.data || "";
// ops.url = ops.type=="get" ? ops.url + "?" + ops.data : ops.url;
if(ops.type=="get"){
// 在get请求时,使用时间戳避免,缓存问题
let t = new Date().getTime();
ops.url = ops.url + "?__qft="+ t + "&" + ops.data;
}
var xhr = new XMLHttpRequest();
xhr.open(ops.type, ops.url);
if(ops.type == "get"){
xhr.send();
}else{
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(ops.data);
}
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
ops.success(xhr.responseText);
}
}
}