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下载官网网址:Download Postman | Get Started for Free

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.导入并使用自定的模版引擎 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

​​​​​​​ 

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐