Ajax初体验

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

• 背景
  • 在了解Ajax之前，可以简单的认为“JavaScript能力有限”，因此在此之前web平台提供所有的API都只停留在“单机”的阶段
  • 这样就造成了一些无法实现的功能，例如：
    • 无法在实现用户登录功能时，当用户输入邮箱地址显示用户对应的头像
    • 无法在实现用户注册功能时，当用户输入邮箱或者用户名就提示是否存在
    • 无法在实现留言板功能时，实时看到最新的用户留言
  • 归结为一个问题：数据存放在服务端，无法通过已知的API获取
  • 已知发送请求的方式：
    • 地址栏输入地址，回车，刷新
    • 特定元素的href或src属性
    • 表单提交
    • 这些方案都是无法通过或者很难通过代码的方式进行编程操作的，都是通过浏览器实现的
  • 需求：
    • 对服务端发出请求并且接受服务端返回的响应
    • 如果我们通过JavaScript直接发送网络请求，那web的可能就会更多，随之能够实现的功能也会更多，至少不再是只能开发“单机游戏”
• Google Suggest
  • Ajax（Asynchronous JavaScript and XML），最早出现在2005年的Google Suggest
  • 它不像HTML、JavaScript或CSS这样的一种“正式的”技术
  • 它是在浏览器端进行网络编程（发送请求、接收响应）的技术方案
  • 它使我们可以通过JavaScript直接获取服务器最新的内容而不必重新加载页面
  • 让web更能接近桌面应用的用户体验
• Ajax到底是什么（Asynchronous（异步） JavaScript And XML）
  • Ajax就是浏览器提供的一套API，可以通过JavaScript调用，从而实现通过代码控制请求与响应，实现通过JavaScript进行网络编程
  • XML：最早在客户端与服务端之间传递数据时所采用的的数据格式
• 应用场景
  • 按需获取数据
  • 对用户数据校验
  • 自动更新页面内容
  • 提升用户体验，无刷新的体验
• 体验Ajax
  • jsonplaceholder.typicode.com/
• 原生Ajax请求步骤
  • 创建XMLHTTPRequest类型的对象（相当于打开了一个浏览器）var xhr = new XMLHttpRequest()
• 准备发送，打开一个网址之间的链接（相当于在地址栏输入地址） xhr.open("GET", "<https://jsonplaceholder.typicode.com/users>")
  • 执行发送动作（相当于点击回车或超链接） xhr.send(null)
  • 指定xhr状态变化处理函数 xhr.onreadystatechange = function () {

        xhr.onreadystatechange = function () {

      // 通过判断xhr的readyState,确定此次请求是否完成

      if(this.readyState === 4) {

        console.log(this.responseText)

      }
    }