第8天_Ajax和BootStrap

第8天_Ajax和BootStrap

1. 学习目标

• Ajax介绍
• Ajax使用
• BootStrap

1. Ajax介绍

2.1 Ajax的概念

AJAX (阿贾克斯 Asynchronous Javascript And Xml ) 异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术, 可以访问服务器数据的局部刷新的技术. AJAX不是一种新的编程语言

2.2 Ajax的作用

允许客户端发送HTTP请求, 去异步请求服务器的数据来创建动态网页

2.3 前后端交互图

3.Ajax使用

3.1Ajax在JS中的使用

• Ajax的核心
  Ajax 技术核心是JavaScript对象XMLHttpRequest(简称XHR)

• 创建XHR对象
  var xhr = new XMLHttpRequest();
  console.log(xhr); // XMLHttpRequest

• XMLHttpRequest对象的属性和方法XHR提供的方法:

  open(): 准备好需要发送给服务器的内容.接收三个参数: 要发送的请求类型(get/post), 请求的URL和是否异步.如:
  xhr.open(‘get’, ‘demo.json’, true); //URL为demo.json的get请求, true表示异步.
• send(): 向服务器发送请求.
  如: xhr.send(null);

3.2 HTTP协议介绍

HTTP是一个属于应用层的面向对象的网络协议, 由于其简捷,快速的方式, 适用于分布式超媒体信息系统. HTTP协议的主要特点有:

• 支持客户端/服务端模式. 即请求(request)-响应(response)模式, 必须先请求才能得到响应， 服务器不能通过http协议直接发送数据给客户端
• 简单快速, 客户端向服务端发送请求时, 只需要传送请求方式和路径即可,所以简单, 由于HTTP协议简单, 使得HTTP服务器的程序规模小, 因而速度很快;
• 灵活, 传输数据类型种类多
• 无连接, 请求一次服务器后立刻断开连接, 即非长连接， 即短连接
• 无状态, HTTP协议对事务处理没有记忆能力;
• HTTP协议的常用请求方式: GET, POST
• HTTP包含: 请求头和请求体

3.3 jQuery实现Ajax发送异步请求

• 使用$.ajax()实现
  $.ajax({
  type: ‘GET’, // 请求方式， 默认是get
  url: “json/person.json”, // 接口url
  async: true, // 是否异步，默认是true,表示异步
  data: {}, // 参数

  // 请求成功后的回调函数
  success: function(res) {
  console.log(res)
  },
  // 请求失败后的回调函数
  error: function(e) {
  console.log(e)
  }
  })

• 使用$.get()实现
  // 方式一
  $.get(‘http://47.107.40.104/movies/?page=1’, function(res){
  console.log(res)
  })

  // 方式二
  $.get('http://47.107.40.104/movies/', {page: 1}, function(res){
  console.log(res)
  })

• 使用$.post()实现
  $.post(‘http://47.107.40.104/register/’, {name: “lisi345”, pwd: ‘123456’}, function(res){
  console.log(res)
  })

示例: 分页获取豆瓣电影：

接口URL:  http://47.107.40.104/movies/?page=1

参数说明： page为页码，从1开始

请求方式： GET

练习：

1. 实现注册功能：
   接口URL: http://47.107.40.104/register/
   参数说明:
   name=zhangsan, 用户名( 必须填写 )
   pwd=123456, 密码( 必须填写 )
   请求方式： POST

2. 实现登录功能：
   接口URL: http://47.107.40.104/login/
   参数说明:
   name=zhangsan, 用户名( 必须填写 )
   pwd=123456, 密码( 必须填写 )
   请求方式： POST

4.BootStrap

参考官方文档使用

• 点赞
• 收藏
• 分享
• 文章举报