Ajax

啥是Ajax？

JS 语言 和 服务端 交互的手段。
全称：Asynchronous JavaScript and XML

ajax 的特点

1. 不需要插件的支持，原生 js 就可以使用
2. 用户体验好（不需要刷新页面就可以更新数据）
3. 减轻服务端和带宽的负担
4. 缺点： 搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到
5. 前进、后退的功能被破坏（因为 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 的区别

1. 语义化不一样：GET 倾向于从服务器获取数据；POST 倾向于向服务器提交数据。
2. 传递参数的方式：GET 请求直接在地址栏后面拼接；POST 请求在请求体里面传递。
3. 参数的大小限制：GET 请求一般不大于 2KB；POST 请求理论上没有上限。
4. 缓存能力：GET 会被浏览器主动缓存；POST 不会被浏览器主动缓存。
5. 安全性能：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环境

1. 在服务器环境下运行
2. 异步请求数据：同时执行，效率高，当前请求不会影响其它程序；可以在不中断浏览器其他任务的情况下加载新数据，即无刷新加载数据；提高用户体验；减轻服务端和带宽的负担。
3. 由此引出JS的执行机制：1.js自身是一个单线程的编程语言；2.上一行代码没有执行完，下一行代码必然不能执行，执行速度慢；3.利用异步模拟了多线程的执行过程。

异步

1. 事件产生的异步
   ①var a=10; document.οnclick=function(){a=20; }console.log(a); 此时打印的a为10；
   原因：绑定事件的过程执行了，但是只是执行了绑定事件，绑定事件的函数没有被执行
2. 计时器，延时器产生的异步
   ②var a=10; setTimeout(()=>{a=20;},100);console.log(a);
   计时器自身是同步执行了的，只是内部的回调函数没有执行在等待；内部的回调函数与外部代码之间是异步：会有一瞬间在进程中同时存在
3. ajax请求结束
4. 异步产生的问题
   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);
        }
    }
}