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);