HTTP请求封装:Ajax与RESTful API
一、HTTP请求
HTTP即超文本传输协议,用以进行HTML 文件、 图片文件、 查询结果等的网络传输。
- 一个完整的HTTP请求包括:请求行、请求头、空行和请求数据(请求数据可以为空)
- HTTP1.1标准请求方式有:GET, POST, PUT, HEAD, DELETE, CONNECT, TRACE, OPTIONS
请求行和请求头里包含URL、Request Method、Accept、Cookie、User Agent等等信息。实际使用中,即使只确定一个url,客户端也会发出完整的HTTP请求。服务端也会返回HTTP响应,包含响应正文以及Status Code、Content Type、Date等等信息。其中状态码(Status Code)常见的有:
- 200 请求成功
- 400 客户端请求的语法错误,服务器无法理解
- 401 权限错误,身份认证失败
- 404 请求的资源(网页等)不存在
- 500 内部服务器错误
二、Ajax
原始的网页开发方式是前后端合一的,代码写在一起,我请求一个地址,服务器就以相应正文的形式返回给我一个页面。Ajax的出现就改变了这一现象,我们可以借此获取所需的特定数据,在不重载整个页面的情况下进行数据更新。
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "/try/ajax/ajax_info.txt", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(fname=Henry&lname=Ford);
如上例所示,Ajax中最重要的就是XMLHttpRequest对象,它以多种属性和方法来定义HTTP请求、处理HTTP响应:
- open() -- 定义请求方式、URL、是否异步
- setRequestHeader() -- 添加请求头信息
- send() -- 发送请求,可附加请求数据
- onreadystatechange() -- readyState改变时触发
- readyState -- 标记请求状态,从 0 到 4 (请求未初始化-服务器连接已建立-请求已接收-请求处理中-请求已完成,且响应已就绪)
- status -- 响应的Status Code,200、404等等
- responseText/responseXML -- 响应正文,字符串或xml形式的数据
三、RESTful API
REST(REpresentational State Transfer)指的是一组架构约束条件和原则。满足REST的接口实现方式,就是RESTful API,表现为:用URL定位资源,用HTTP动词(GET,POST,DELETE,DETC)描述操作。
URL中只使用名词来指定资源,原则上不使用动词。“资源”是REST架构或者说整个网络处理的核心。用HTTP协议里的动词来实现资源的添加,修改,删除等操作。即通过HTTP动词来实现资源的状态扭转:
- GET 获取资源数据(一项或多项)
- POST 新建一个资源
- PUT 更新资源(提供完整资源数据)
- PATCH 更新资源(提供需要修改的资源数据)
- DELETE 删除资源
网上教程在解说ajax的时候,通常会比较GET和POST,而RESTful API依据功能规范了多种请求方式,其中PATCH并不在HTTP1.1标准请求方式中。前端要使用这些请求方式,首先浏览器要支持,其次服务端也要实现对应功能,进行正确的响应。假设http://api.xx.com/v1/friends是一个“我的好友”数据接口:
- DELETE http://api.xx.com/v1/friends 删除某个好友(在http参数中指定好友id)
- PATCH http://api.xx.com/v1/friends 添加某个好友(在http参数中附加改好友数据)
- PUT http://api.xx.com/v1/friends 更新个人好友数据(在http参数中附加所有好友数据)
RESTful API扩展了前后端的工作方式,Web端不再用之前典型的PHP或JSP架构,而是改为前端渲染和附带处理简单逻辑(比如AngularJS或者BackBone的一些样例)。Web端和服务端只使用API来传递数据和改变数据状态。格式一般是JSON。由此,Web,iOS,Android和第三方开发者变为平等的角色通过一套API来与服务端交互。
四、$.ajax实践RESTful API
$.ajax提供了一些很实用的属性设置:
- url :规定发送请求的 URL。默认是当前页面
- type :规定请求方式,默认GET
- data :规定要发送到服务器的数据
- contentType :发送数据到服务器时所使用的内容类型
- dataType :预期服务器返回的数据类型。默认根据 HTTP 包 MIME 信息来智能判断
回想下一个完整的HTTP请求包括那些东西呢?type设置的就是HTTP请求的Request Method,即请求方式、HTTP动词;date包含的就是请求数据,contentType/dataType即请求头中的Content-Type和Accept。对于ajax而言,应该还要设置请求成功和失败后对应的回调函数。注意,当设置"application/json"时,需要对传递的数据做JSON.stringify处理
var newFriend = {
name : "aaa",
age : 18
};
var config = {
url: "/api/vi/friend",
type: "PATCH",
data: JSON.stringify(newFriend),
contentType: "application/json",
dataType: "json",
success: function(data){
console.log(data)
},
error: function(err){
console.log("请求失败:"+err)
}
};
$.ajax(config);
HTTP请求封装:Ajax与RESTful API的更多相关文章
- uni-app(二)接口请求封装,全局输出api
在项目 main.js 同级创建 utils 文件夹, utils里创建 config.js文件,存储重要参数 // 获取平台信息 const { system, } = uni.getSystemI ...
- 使用WebApiClient请求和管理Restful Api
前言 本篇文章的内容是WebApiClient应用说明篇,如果你没有了解过WebApiClient,可以先阅读以下相关文章: WebApi client 的面向切面编程 我来给.Net设计一款Http ...
- iOS开发中使用Bmob RESTful API
简介 尽管Bmob已经提供了一套SDK供开发者使用,但有时候开发者可能希望能直接与Bmob后台进行直接交互,以达到某些特别的需求(直接操作_User表.同步网络请求等).而RESTful API可以使 ...
- flutter dio网络请求封装实现
flutter dio网络请求封装实现 文章友情链接: https://juejin.im/post/6844904098643312648 在Flutter项目中使用网络请求的方式大致可分为两种 ...
- 用 Flask 来写个轻博客 (35) — 使用 Flask-RESTful 来构建 RESTful API 之四
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 POST 请求 身份认证 测试 前文列表 用 Flask 来写个轻博客 ...
- 让python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE等请求
这两天在用python的bottle框架开发后台管理系统,接口约定使用RESTful风格请求,前端使用jquery ajax与接口进行交互,使用POST与GET请求时都正常,而Request Meth ...
- drf:restful概念,类继承关系,drf请求封装,drf请求流程,版本控制组件,认证组件(token),权限组件
1.restful规范 resfful规范的概念最重要: 是一套规范,规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的就是,以前写增删改查的时候需要些四个视图寒素,rest ...
- Django编写RESTful API(二):请求和响应
欢迎访问我的个人网站:www.comingnext.cn 前言 在上一篇文章,已经实现了访问指定URL就返回了指定的数据,这也体现了RESTful API的一个理念,每一个URL代表着一个资源.当然我 ...
- RESTful API终极版序列化封装
urls: from django.conf.urls import url from app01 import views urlpatterns = [ # url(r"comment/ ...
随机推荐
- Redis客户端使用
http://wenku.baidu.com/view/6ccd650af12d2af90242e63d.html 一.下载jedis 代码 jedis 代码地址:https://github.com ...
- Netty核心概念(8)之Netty线程模型
1.前言 第7节初步学习了一下Java原本的线程池是如何工作的,以及Future的为什么能够达到其效果,这些知识对于理解本章有很大的帮助,不了解的可以先看上一节. Netty为什么会高效?回答就是良好 ...
- Java之IO(十四)IO包中其它类
转载请注明出处:http://www.cnblogs.com/lighten/p/7267553.html 1.前言 此章介绍IO包中剩余未介绍的几个流和工具类,包括LineNumberReader. ...
- 18个HTML5和JavaScript游戏引擎库
1) Best HTML5 and javascript game engine Library- Impactjs 2) Best HTML5 and javascript game en ...
- sersync+rsync=实时异步备份
环境准备 服务器两台 rsync-server:192.168.1.8 (备份服务器) sersync-node1:192.168.1.9 (需要备份的服务器) 系统 CentOS7.4 关闭防火墙 ...
- centos7-windows10 双系统安装
win10默认, 然后压缩出来一个卷安装win7: http://www.techweb.com.cn/network/system/2016-12-21/2456741.shtml http://b ...
- C语言利用异或进行两个值的交换
异或有两个很重要的性质: 1. A^A = 0; 2.A^0 = A; 利用这两个性质,我们就能够利用异或进行两个值的交换. 代码如下: #include <stdio.h> int ma ...
- java 实现 PDF 加水印功能
使用java代码实现给PDF加水印的功能 首先导入所需要的依赖 <dependency> <groupId>com.itextpdf</groupId> <a ...
- Golang xorm工具,根据数据库自动生成 go 代码
使用 golang 操作数据库的同学都会遇到一个问题 —— 根据数据表结构创建对应的 struct 模型.因为 golang 的使用首字母控制可见范围,我们经常要设计 struct 字段名和数据库字段 ...
- CocoaPods管理第三方
之前听伟哥说用CocoaPods做第三方库的管理很方便,今天看了下自己做了下感觉确实不错.下面开始,Let's go!! 1.安装CocoaPods之前,先确保本地有Ruby环境,因为CocoaPod ...