Ajax学习（一）

常见的请求方式

• 标签的href和src(无法由用户进行控制)

• 在浏览器地址栏输入网址回车

• location.href

  • 如果请求服务端的某个页面，记得设置http://部分

• form标签

  • form的action表示表单提交给那个地址处理
  • 表单元素必须设置name属性，否则数据无法正常提交
  • 提交按钮的使用：
    • input[type=submit] 提交按钮
    • button[type=submit] 提交按钮 （默认type就是submit，设置时可以不写）
    • button[type=button] 普通按钮
    • input[type=button] 普通

• 小结：

  • 统一的特点：页面会发生跳转。

同步和异步

• 单线程

  • js是单线程的语言。（只有一个人执行操作，同时只能做一件事）

  • js在后期也引入了多线程的概念，但是还是只有一个主线程。

    • 其他线程只能用于辅助操作，无法进行核心功能操作（DOM）

• 同步和异步

  • 同步任务：
    • 特点：按照顺序一个一个任务执行。
  • 异步任务：
    • 特点：异步任务都比较耗时或执行时间不确定
    • 常见的异步任务有哪些：
      • 定时器， 事件 ，Ajax
      • 特点：异步任务的执行一定晚于同步任务

Ajax简介

• 为什么要学习ajax

  • 网页中的很多功能需要发送请求，同时不能跳转，这时传统的请求方式就无法满足要求了。
  • 就可以通过ajax来进行处理

• 什么是ajax

  • ajax是一种js进行请求响应处理的方式

  • 特点：不会造成页面刷新

  • 浏览器中的实现方式：

    • 采用了内置对象的设置方式：
      • new XMLHttpRequest();

  • 名称全拼：Asynchronous JavaScript And Xml 异步的js和XML

    • XML是早期使用的一种数据交互格式，现在都使用json进行操作

    // 下面是json格式 (现在的常用格式)
    {
      "name": "jack",
      "age": 18
    }
    
    // 下面是XML格式
    <jieke>
      <name>jack</name>
      <age>18</age>
    </jieke>
    

• ajax如何使用

  • jQuery中的ajax使用
  • 原生的ajax使用方式，以及功能的封装
  • axios库

服务端功能使用

• 数据接口的相关内容：
  • 含义：
    • 可以提供数据的一个地址，通过请求这个地址，可以得到一些数据，这个地址就称为数据接口。
    • 接口的使用一定要严格按照接口文档操作！！！
    • 如果在工作中按照文档使用接口有问题，直接找后端的同事解决。

jQuery的ajax使用

• $.ajax()的基本使用

如果响应的数据是JSON格式，jQuery会自动将JSON转换为js对象结构

$.ajax({
	url: 'http://..', // 要请求的接口地址, 必须从接口文档中复制地址
    success: function (res) { // 当响应成功的接收完毕，success会被执行
    // res 表示响应的数据内容
  }
});