restful请求ajax,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来与服务端交互。

4b7ac682328358fd39f7bba6a1e0ed36.png

四、$.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);

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 ...

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/ ...

随机推荐

龙哥库塔法or欧拉法求解微分方程matlab实现

举例:分别用欧拉法和龙哥库塔法求解下面的微分方程 我们知道的欧拉法(Euler)"思想是用先前的差商近似代替倒数",直白一些的编程说法即:f(i+1)=f(i)+h*f(x,y)其 ...

Java常用类库——Runtime

runtime运行时候,是封装了一个JVM进程的类,每一个JAVA程序实际上启动了一个JVM进程,那么每个JVM对应一个runtime实例.此实例是由JVM为其实例化. 本类的定义中没有构造方法,因为 ...

c++ string 与 char 互转 以及base64

c++ string 与 char 互转 很简单如下 ] = {'A','B','C','D','E'}; printf("%s\n",bts); //char to string ...

wpf依赖属性、绑定实现原理、附加属性学习

依赖属性和普通属性相比节省内存的原因:对于普通属性,每个对象有需要存储一个普通属性的值,即便是默认值.而依赖属性的默认值是静态的存储在类中的,所有对象都使用同一默认值,所以对于拥有大量属性的控件来说这 ...

jquery基础教程读书总结

最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

线段树模板(hdu1166)

#include #include #include #include #include &lt ...

【驱动】linux驱动程序开发及环境搭建

1.mystery引入 1)设备驱动程序对外提供如下的功能:        1)设备初始化:对硬件设备进行初始化操作        2)数据交换:数据交换包括由内核层向硬件层传送数据.从硬件层读取数据 ...

Hackintosh Power Management

Also, be aware that hibernation (suspend to disk or S4 sleep) is not supported on hackintosh. You sh ...

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值