码迷,mamicode.com
首页 > Web开发 > 详细

Ajax学习(一)

时间:2019-10-22 12:49:32      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:页面   异步   需要   按钮   一个人   通过   action   同步   new   

常见的请求方式

  • 标签的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 表示响应的数据内容
  }
});

Ajax学习(一)

标签:页面   异步   需要   按钮   一个人   通过   action   同步   new   

原文地址:https://www.cnblogs.com/itxcr/p/11718956.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!