接口开发规范、原生ajax以及jquery

路径	请求方式	参数	备注
/class	get	cla:班级名称、可选	查询班级信息
/class	post	cla:班级名称、teacher:班主任，必填	添加班级信息
/class	put	claid:班级id、必填，cla:班级名称、teacher:班主任	修改班级信息
/class	delete	claid:班级id、必填	删除班级信息

1.3.2返回的json数据如何规范

1.4 根据RESTful 进行接口开发

(1)使用express脚手架生成接口项目 express --view=ejs myapp

(2)进入myapp目录安装依赖 npm install

(3)创建student.js到routes目录中

(4)定义模块化路由代码

(5)在入口文件app.js中引入路由

(6)启动项目

二、原生ajax

2.1. 介绍

2.1.1 定义

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，它是利用客户端(浏览器的)XMLHttpRequest对象来发送http请求给服务端。

2.1.2 传统请求的问题

2.1.3 Ajax优势和作用

2.1.4 Ajax请求与传统请求的区别：

传统方式请求【同步】：

以同步方式发送请求给服务端，在没有收到服务端返回的响应之前什么事情都做不了，一直处于等待状态，用户体验不好。
ajax方式请求：

2.1.5 应用场景：

只要是页面中局部更新内容都可以使用ajax进行处理。

2.1.5.1 表单验证：

2.1.5.2 数据分页显示：

2.2. 原理

2.2.1 方法

2.2.1.1 XMLHttpRequest

语法：

 let xhr =new XMLHttpRequest();

描述：创建 ajax对象

2.2.1.2 open

语法：

xhr.open(method,url,async)

描述：规定请求的类型、URL 以及是否异步处理请求。

2.2.1.3 send

语法：

xhr.send(string)

描述：将请求发送到服务器。string：仅用于 POST 请求

2.2.2 属性

2.2.2.1 readyState

语法：

xhr.readyState

描述：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态值。

包含的状态值：

(1)0：请求未初始化，还没有调用open

(2)1：请求已经建立，但是还没有发送send

(3)2：请求已经发送

(4)3：请求正在处理中，通常响应中已经有部分数据可以用了

(5)4：响应已经完成，可以获取并使用服务器的响应

2.2.2.2 status

语法：

xhr.status

描述：无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成)

常见状态码：200，304，404，500

2.2.2.3 responseText

语法：

xhr.responseText

描述：获得来自服务器的响应

2.2.3 事件

语法：

xhr.onreadystatechange  = callback

描述：当请求被发送到服务器时，每当 readyState 改变时，就会触发 onreadystatechange 事件

2.3 实现步骤

(1)创建Ajax对象

(2)Ajax请求的地址与请求方式

(3)发送请求

(4)获取服务器响应给客户端的数据

(5)处理服务器响应数据JSON.parse和JSON.stringify

2.4. ajax的get和post传参

2.4.1 get

语法：

xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')

描述：get传参只需要在url地址后按照?key=value格式进行传递

代码案例：

2.4.2 post

语法1:

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
xhr.send('username=ujiuye&password=123456');

语法2：

xhr.setRequestHeader('Content-Type', 'application/json') 
let data = {username:'ujiuye',password:'123456'}
xhr.send(JSON.stringify(data))

描述：使用setRequestHeader设置响应头，并传递对应的post参数

代码案例：

三、Jquery之Ajax

3.1 get

语法：

$.get(URL,callback)

描述：发送get请求

3.2 post

语法：

$.post(URL,data,callback)

描述：发送post请求，data为请求时传递的参数

3.3 ajax

语法：

$.ajax({
   type: '',
   url: '',  
   data: { },
   success: function(res) { } 
})

描述：可以发送get和post请求

沁沁酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
接口开发规范、原生ajax以及jquery

目录一、接口开发规范(RESTful api)1.1 简介1.2 优点：1.3 常用方法规范1.4 根据RESTful 进行接口开发二、原生ajax2.1. 介绍2.1.1 定义2.1.2 传统请求的问题2.1.3 Ajax优势和作用2.1.4 Ajax请求与传统请求的区别：2.1.5 应用场景：2.2. 原理2.2.1 方法2.2.2 属性2.2.3 事件2.3 实现步骤完整案例2.4. ajax的get和post传参2.4.
复制链接

扫一扫