ajax简单介绍及代码格式

一、 什么是ajax ？
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
简：Ajax 就是JS 这个语言和 服务端 交互的手段
也是js 这个语言里面的一个方法(能力)
ajax 拆分解释：
=> a: async 异步
=> j: javascript
=> a: and 和
=> x: xml 是一个文本格式(类似于 html)
=> 异步的 js 和后端交互的手段(方式)

1. Ajax请求的步骤
   (1)创建Ajax对象,
   new XMLHttpRequest()
   (2) 配置请求信息；
   使用Ajax对象.open(请求方式, 请求地址, 是否异步)
   (3)发送请求；
   使用 ajax对象.send() 方法
   (4)接受后端的响应；
   ajax对象.onload = function() {}

2. readyState状态码
   0：请求以初始化
   1：服务器连接已建立
   2：请求已接收
   3：请求处理中
   4：请求已完成，且响应已就绪

3. .http状态码（status）
   200：（成功）
   403：（禁止）服务器拒绝请求
   404：（未找到）服务器找不到请求的页面
   408：（请求超时）服务器等候请求发生超时
   500：（服务器内部错误）服务器遇到错误，无法完成请求

Ajax优缺点：
优
1、不需要插件支持
2、优秀的用户体验
3、提高web程序的性能
4、减轻服务器和带宽的负担
缺
1、浏览器对XMLHttpRequest对象的支持度不足
2、破坏浏览器前进、后退按钮的功能
3、对搜索引擎支持不足
4、开发和调试工具缺乏

二、 Ajax应用场景哪些场景？
1.检查用户名是否已被注册：
很多站点的注册页面都具被自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器进行数据交换，查询用户输入的用户名是否存在数据库。
2.省市级联下拉框联动：
很多站点都存在输入用户地址的操作，在完成地址输入时，用户所在的省份是下拉框，当选择不同的省份时会出现不同市区的选择，这就是最常见的省市联动效果。
3.内容自动补全：
不管时专注于搜索的百度，还是站点内商品搜索的淘宝，都有搜索的功能，在i搜索框输入查询关键字时，整个页面没有刷新，但会根据关键字显示相关查询字条，这个过程是异步的。

三、 ajax同步与异步的区别

1.同步方式发送请求：xhr.open(请求方式， 请求地址， false)

含义：发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会一直处于等待过程中。
代码的书写顺序必须是： 1 -> 2 -> 4 -> 3

2.异步方式发送请求：xhr.open(请求方式，请求地址，true)默认异步，可以省略不写

含义：发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。
代码的书写顺序：1 -> 2 -> 3 -> 4 或 1-> 2 -> 4 -> 3
☆结论: 不管是发送同步请求还是异步请求
代码书写顺序都是 1 -> 2 -> 4 -> 3

 // 1. 创建 ajax 对象
    var xhr = new XMLHttpRequest()

    // 2. 配置本次请求的信息
    xhr.open('GET', './server/ajax.php')

    // 4. 接受响应
    xhr.onload = function () {
      // 打印响应内容
      console.log(xhr.responseText)
    }

    // 3. 发送请求
    xhr.send()

 // 发送一个带get请求的ajax
    // 1. 创建 ajax 对象
    var xhr = new XMLHttpRequest()

    // 2. 配置请求信息
    //    本次请求携带了三个参数, a 和 b 和 c
    xhr.open('GET', './server/get.php?a=100&b=200&c=300')

    // 3. 接受响应
    xhr.onload = function () {
      console.log(xhr.responseText)
    }

    // 4. 发送请求
    xhr.send(`http://jx.xuzhixiang.top/ap/api/login.php`)

/ 发送一个带POST请求的ajax
    // 1. 创建 ajax 对象
    var xhr = new XMLHttpRequest()

    // 2. 配置请求信息
    xhr.open('POST', './server/post.php')

    // 3. 接受响应
    xhr.onload = function () {
      console.log(xhr.responseText)
    }

    // 4-0. 发送请求之前, 设置一下请求头
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

    // 4. 发送请求
    xhr.send('d=400&e=500') // 携带了两个参数, d 和 e

    //ajax简单封装
    function getSend(url, cb) {
      // 函数里面接受形参
      //   url => 接受的就是第一个实参, 也就是那个地址
      //   cb => 接受的就是第二个实参, 也就是那个函数
      //     将来我写 cb() 的时候, 就是在调用传递进来的那个函数

      // 1. 创建 ajax 对象
      var xhr = new XMLHttpRequest()

      // 2. 配置请求信息
      xhr.open('GET', url)

      // 3. 接受响应
      xhr.onload = function () {
        // 这里的代码会在请求成功的时候执行
        // 在这里能拿到响应体 xhr.responseText
        cb(xhr.responseText) //=> 在调用传递进来的那个函数
      }

      // 4. 发送请求
      xhr.send()

    }
    
    //   这里我传递进去的函数会在请求成功的时候被调用
    getSend('./xxx.php', function (res) { // 函数定义阶段
      // 这里的代码会在请求成功的时候执行
      // res 接受到的就是响应体
      console.log(res)
    }) // 函数调用