本质上说，我们上网冲浪，都是获取、消费互联网上的各种资源，而这些资源并不在我们电脑的本地，所以我们需要利用互联网进行获取。
基本概念
客户端与服务器
要谈数据交互、获取网络资源，必定离不开两个基本概念：
- 服务器
- 客户端
服务器，就是用户在上网过程中，那些负责存放和对外提供资源的电脑。
服务器本质上也是一台计算机（电脑），只不过它的性能比较高。
客户端，就是用户上网过程中，负责获取和消费资源的电脑。比如个人电脑。在个人电脑中，可以通过浏览器方式获取网络资源。
URL地址
URL，中文名为统一资源定位符，标识互联网上每一个资源的唯一存放位置。浏览器只有通过URL地址才能正确地定位资源存放位置。
组成
一般，URL地址由三部分组成：
- 客户端与服务器之间的通信协议
- 存有该资源的服务器名称
- 资源在服务器上的具体存放位置
http://www.cnblogs.com/luoshanheblogs/p/51581266.html
客户端与服务器的通信
一般可以分为三步：
- 客户端请求服务器
- 服务器处理本次请求
- 服务器响应客户端
数据是网页的灵魂
在服务器对外提供的诸多资源中，最重要也是最根本的，就是数据。
客户端与服务器之间的数据通信
通常，客户端向服务器发起数据请求的步骤也分为三步：
- 客户端请求数据资源
- 服务器处理这次数据请求
- 服务器将数据响应给客户端
此外，浏览器还提供了一个XMLHttpRequest对象（简称xhr），可以通过它来请求服务器上的数据资源。
资源的请求方式
客户端请求服务器时，请求方式有多种，最常见的两种为get和post请求。
- get
通常用于获取服务端资源
例如，根据URL地址，从服务器获取各种资源 - post
通常用于向服务器提交资源
例如，登录时向服务器提交登陆信息等
Ajax
Ajax即异步Javascript和XML，通俗理解就是，在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就叫做Ajax。
Ajax的功能
此前学习的前端三件套HTML，CSS和Javascript，都只能将网页做的美观漂亮、交互多样，但是缺乏与服务器之间的数据交互。Ajax可以做到这一点。
jQuery中的Ajax
$.get()函数
在jQuery中，$.get()函数功能单一，专门用来发起get请求，语法如下：$.get(url, [data], [callback])
url(string): 要请求的资源地址
data(object): 请求资源期间要携带的参数
callback(function): 请求成功时的回调函数
若不带参数发起请求，直接提供url与callback即可。
// 发起不带参数的请求
$.get('https://www.liulongbin.top:3006/api/getbooks', function(res) {
// res是服务器响应的数据
console.log(res);
}),
// 发起带参数的请求
$.get('https://www.liulongbin.top:3006/api/getbooks',{
id: 1
}, function(res) {
console.log(res);
})接口
使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口），同时，每一个接口必须有请求方式。
接口文档
说明了每一个接口的用法，在前后端开发过程中是一个很重要的文档，包含：
- 接口名称：标识各个接口的简单说明，如登录接口
- 接口URL：接口的调用地址
- 调用方式：GET/POST
- 参数格式：接口需要传递的参数，每一个参数都应该包含四项说明内容：
- 参数名称
- 参数类型
- 是否必选
- 参数说明
- 响应格式：接口返回值的详细描述，一般包含三项内容：
- 数据名称
- 数据类型
- 说明
- 返回示例
数据交换格式
数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式，在前端领域，包含两种格式：XML和JSON。这里重点介绍JSON。
XML简介
XML，即可扩展标记语言，与HTML类似，也是一种标记语言。
HTML被设计用来描述网页上的内容，是网页内容的载体。
XML被设计用来传输和存储数据，是数据的载体。由于其无关代码较多，体积臃肿，在javascript中解析XML较为麻烦。
JSON
英文全称为JavaScript Object Notation，即JavaScript对象表示法，也就是说，JSON是javascript对象和数组的字符串表示法，其本质就是字符串。同时，它也是一种轻量级的文本数据交换格式。
对于JSON表示的对象、数组两种数据结构，里面的数据类型只能是数字、字符串、布尔值、null、数组、对象六种类型。
注意事项：
- 属性名必须用双引号
- JSON中不允许使用单引号表示字符串
- JSON中不允许写注释
- 不能使用undefined作为值
JSON与JS对象
JSON是JS对象的字符串表示方法。
JSON字符串转化为JS对象，可以使用JSON.parse()方法。
var obj = JSON.parse('{"a": "Hello", "b": "World"}')
// 结果是
/*
{
a: 'Hello',
b: 'World'
}
*/JS对象转化为JSON字符串，可以使用JSON.stringify()方法。
var obj = {
a: 'Hello',
b: 'World'
}
var str = JSON.stringify(obj)
// 结果是
/*
{
"a": "Hello",
"b": "World"
}
*/同源策略与跨域
同源
首先，需要了解什么是同源。
如果两个页面的协议、域名和端口都相同，则两个页面具有相同的源。
比如如下页面url：
http://www.test.com/index.html
协议是http，域名是www.test.com，端口没有标出，默认是80，那么与之同源的页面url的协议、域名、端口均与之相同，即
http://www.test.com:80/...
同源策略
同源策略是浏览器提供的一个安全功能。
它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制。
也就是说，浏览器规定：某一个网站的JavaScript不允许与非同源的网站之间进行资源交互。
跨域
同源的对立面，就是跨域。
比如，当前网页url是http://www.test.com/index.html
而接口的url是http://www.api.com/userlist
此时，出现了跨域问题。
跨域问题的解决
最主要有两种方案，分别是
- JSONP：临时解决方案，只支持GET请求
- CORS：W3C标准，是一种跨域Ajax请求的根本解决方案，支持GET和POST。
JSONP
JSONP的实现原理是，利用script标签不受浏览器同源策略的影响这一特点，用过src属性，请求非同源的js脚本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自己实现简单的JSONP数据请求</title>
</head>
<body>
<script>
// 定义一个success函数，相当于Ajax中的第三个callback参数
function success(data) {
console.log("JSONP响应回来的数据是：");
console.log(data);
}
</script>
<!-- 字符串查询，希望服务器返回一个success函数的调用callback=success -->
<script src="http://ajax.fronted.itheima.net:3006/api/jsonp?callback=success&name=ls&age=30">
</script>
</body>
</html>注意，JSONP与Ajax没有关系。
