前端学习之Ajax

---

一、客户端与服务器

1.概念

上网的本质目的：通过互联网的形式来获取和消费资源
上网的过程中，负责存放和对外提供资源的电脑，叫做服务器。
上网过程中，负责获取和消费资源的电脑，叫做客户端。

二、URL地址

1.概念

Url中文叫统一资源定位符，用于表示互联网上每个资源的唯一存放位置。
浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
常见的url举例:www.baidu.com

2.URL地址的组成部分

url地址一般由三部分组成：
①客户端与服务器之间的通信协议
②存放该资源的服务器名称
③资源再服务器上具体的存放位置
http://www.cnblogs.com/liulongbinblogs/p/11649393.html
http:通信协议
www.cnblogs.com服务器名称
liulongbinblogs/p/11649393.html资源在服务器上具体的存放位置

三、分析网页的打开过程

1.理解客户端和服务器的通信过程

1. 客户打开浏览器
2. 输入要访问的网站地址
3. 回车，向服务器发起资源请求
4. 服务器接受到客户端发来的资源请求
5. 服务器在内部处理这次请求，找到相关的资源
6. 服务器将找到的资源响应客户端
   注意：
   ①客户端与服务器之间的通信过程，分为请求-处理-响应三个步骤
   ②网页中的每一个资源，都是通过请求-处理-响应的方式从服务器获取回来的

2.基于浏览器的开发者工具分析通信过程

1. 打开chrome浏览器
2. ctrl+shift+I大家chrome的开发者工具
3. 切换到network面板
4. 选中doc页签
5. 刷新页面

四、服务器对外提供了哪些资源

1.网页常见的资源

文字、图片、音频、、、、

2.数据也是资源

3.网页中如何请求数据

• 客户端发起请求数据资源
• 服务器处理这次的数据请求
• 把数据响应给客户端
  如果要在网页中请求服务器上的数据资源，则需要用到XMLHttpRequest对象
  XMLHttpRequest对象简称xhr是浏览器提供的js成员，通过它，可以请求服务器上的数据资源

4.资源的请求方式

客户端要请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为get和post请求

• get请求通常用于获取服务端资源（向服务端要资源)
  例如：根据URL地址，从服务器获取html文件、css文件、、
• post请求通常用于向服务器提交数据(往服务器发送资源)
  例如，登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

五、了解Ajax

1.概念

Ajax全称asynchronous Javascript And xml(异步javascript和xml)
通俗的理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax

2.Ajax用处

Ajax能让我们轻松实现网页与服务器之间的数据交互

3.Ajax典型应用场景

1. 用户名检测：注册用户时，通过Ajax的形式，动态检测用户名是否被占用
2. 搜索提示：当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表
   数据的增删改查都需要通过ajax的形式，来实现数据的交互

六、jQuery中的Ajax

1. jquery中发起Ajax请求最常用的方法：
   $.get();从服务器拿数据
   $.post();向服务器提交数据
   $.ajax();既可以从服务器拿数据，也可以提交数据
2. $.get()
   专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。
   $.get(url, [data], [callbacl]);
   url：要请求的资源地址，必选
   data:请求资源期间要携带的参数，可选
   callback:请求成功时的回调函数，可选
   不带参数的请求使用：

$.get('http://www.liulongbin.top:3006/api/getbooks', function(res){
	console.log(res)；  //这里的res是服务器返回的数据
}）

带参数的请求：

$.get(('http://www.liulongbin.top:3006/api/getbooks',{id : 1}, function(res){
	console.log(res)；  //这里的res是服务器返回的数据
}）

3. $.post()
$.post(url, [data], [callback])
4. $.ajax()

$.ajax({
	type:'', //请求的方式，GET或POST
	url:'',  //请求的url地址
	data:{},  //这次请求要携带的数据
	success:function(res){} //请求成功之后的回调函数
})

七、接口

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口，同时，每个接口必须有请求方式

1.接口的请求过程

1. 通过get方式请求接口的过程
2. 通过post方式请求接口的过程

2.接口测试工具

1. 为了验证接口能否被正常访问，我们常常需要使用接口测试工具，来对数据接口进行检测。
2. 好处：接口测试工具能够让我们在不写任何代码的情况下，对接口进行测试和调用。
3. 常用的测试工具postman

3.接口文档

就是接口的说明文档，是我们调用接口的一句。好的接口文档包含了对接口url,参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用以及接口如何进行调用。
一个合格的结构文档应该包含：

1. 接口名称
2. 接口url
3. 调用方式
4. 参数格式
5. 响应格式
6. 返回示例（可选)

---