Ajax学习目标：
企业网站定制开发能够知道和服务器相关企业网站定制开发的基本概念；企业网站定制开发知道客户端和服务器通信的过程；什么是Ajax企业网站定制开发以及应用场景，企业网站定制开发知道接口和的概念。
1.企业网站定制开发客户端和服务器概念：
企业网站定制开发上网的本质目的：企业网站定制开发通过互联网的形式来获企业网站定制开发取和消费资源；
服务器：企业网站定制开发上网过程中，负责存放和对外提供资源的电脑叫做服务器；
客户端：上网过程中，负责获取和消费资源的电脑；
2.URL地址的概念：
URL（UniformResourceLocator）统一资源定位符，用于标识互联网上的每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
常见的URL例子：
http://www.baidu.com
http://www.taobao.com
2.1-URL地址的组成部分：
1.客户端与服务器之间的-；
2.存有改资源的-服务器名称；
3.资源在服务器上-具体的存放位置
3.客户端与服务器的通信过程：分为请求-处理-响应的三个步骤（网页中的每一个资源都是同各国这个方式从服务器获取回来的）
3.1基于浏览器的分析通信过程：
1.打开Chrome浏览器；
2.打开Chrome的开发者工具（Mac option+command+i）；
3.切换到NetWork面板；
4.选中Doc标签；
5.刷新页面，分析客户端与服务器的通信过程
4.服务器对外提供了哪些资源
4.1服务器对外提供的资源有文字，图片，音频，视频等等，视频也是一种资源
【数据是网页的灵魂】
HTML是网页的骨架； CSS是网页的颜值； JavaScript是网页的行为； 数据是网页的灵魂。骨架、颜值、行为皆为数据服务数据，在网页中无处不在。
4.2网页中如何请求数据
数据也是服务器对外提供的一种资源，只要是资源，必然要通过请求-处理-响应的方式进行获取；
如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest对象。
XMLHttpRequest（简称xhr）是浏览器提供的js成员，通过它，可以请求服务器上的数据资源。
简单用法(new一个实例) var xhrObj=new XMLHttpRequest()
4.3资源的请求方式 两种 post get
客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式为get和post请求。
get请求通常用于获取服务端资源（向服务器要资源）；
例如：根据URL地址，从服务器获取HTML文件，CSS文件，js文件，图片文件，数据资源等；
post请求通常用于向服务器提交数据（往服务器发送资源）；
例如：登陆时向服务器提交的登陆信息，注册时向服务器提交的注册信息，添加用户时向服务器提交的用户信息等各种数据提交操作；
5.Ajax（Asynchronous JavaScript And XML）--异步JavaScript和XML
通俗理解：在网页中用到XMLHttpRequest（简称xhr）对象了就是Ajax，
是为了和服务器之间进行数据交互（传输）的
为什么要学习Ajax：之前所学的技术，只能把页面做的更美观漂亮，或添加一些动画效果，但是Ajax能让我们轻松实现网页与服务器之间的数据交互
5.1Ajax的典型应用场景：
第一种：用户名检测：注册用户时，通过Ajax的形式，动态检测用户名是否被占用
第二种：搜索提示：当输入搜索关键字时，通过Ajax的形式，跟动态加载搜索提示列表
第三种：数据分页显示：当点击页码值的时候，通过Ajax的形式，根据页码值动态刷新表格的数据
第四种：数据的增删改查：数据的添加、删除、修改、查询操作，都要通过Ajax的形式，来实现数据的交互
只要网页和服务器之间要传输了都要用到Ajax，所以这个应用场景非常广泛
6.JQuery中的Ajax
6.1. $.get() 函数的语法
$.get()发起不带参数的请求
被中括号包括的代表的是可选的，可以写也可以不写
<button id="btnGET">发起不带参数的GET请求</button>
<script>
//$.get(url,[data],[callback])[data],[callback]可选择
(function() {
('#btnGET').on('click', function() {
$.get('http: //www.liulongbin.top:3006/api/getbooks', function(res) {
console.log(res);
})
})
})
</script>
<button id="btnGETTINFO">发起带参数的GET请求</button>
<script>
(function() {
('#btnGETTINFO').on('click', function() {
$.get('http: //www.liulongbin.top:3006/api/getbooks', {
id: 1
}, function(res) {
console.log(res);
})
})
})
</script>
6.1. $.post()
<button id="btnGET">发起GET请求</button>
<script>
(function() {
$('btnGET').on('click', function() {
$.ajax({
type: 'GET',
url: 'http: //www.liulongbin.top:3006/api/getbooks',
data: {
id: 1
},
success: function(res) {
console.log(res);
}
})
})
})
7接口的概念
使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口），同时，每个接口必须有请求方式。
7.1分析接口的请求过程
1.通过GET方式请求接口的过程
2.通过POST方式请求接口的过程
7.2接口测试工具 ：为了验证接口能否被正常访问，我们常常需要使用接口测试工具，来对数据接口进行检测。
好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。
PostMan下载官网网址：
8.1使用PostMan测试GET接口
步骤：1.选择请求的方式；2.填写请求的URL地址；3.填写请求的参数；4.点击Send按钮发起GET请求；5.查看服务器响应的结果
8.2使用PostMan测试POST接口
8.3 接口文档：接口的说明文档，好的接口文档包含了对接口URL，参数以及输出内容的说明，参照接口文档就能方便的知道接口的作用，以及接口如何使用调用。
form表单的基本使用：
1.2表单的组成部分
1.表单标签：<form></form>
2.表单域（包含了文本框，密码框，隐藏域等）
3.表单按钮 button
1.3form标签的属性
action和target用到是最多的，记住
target作用就是规定了是在新窗口打开页面还是原先的窗口打开新页面。
get会在URL中显示用户名密码，会存在密码泄漏的情况。
4.模版引擎
模版引擎不用手动添加字符串了
实现简易的模版引擎
1.定义模版结构
2.预调用模版引擎
3.封装template函数
4.导入并使用自定的模版引擎