来补习ajax知识了这个月一定要学完ajax node.js  夸夸黑马课程的老师讲课非常细致

上网的目的

上网的本质目的：通过互联网的行还是来获取和消费资源

服务器

上网过程中，负责存放和对外提供资源的电脑，叫做服务器

 

客户端

上网过程中，负责获取和消费资源的电脑，叫做客户端

 

URL地址的概念

URL中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问对应的资源

常见URL举例，百度官网、淘宝、京东等

url地址的组成部分

URL地址一般由三部组成：

• 客户端与服务器之间的通信协议

• 存有该资源的服务器名称

• 资源在服务器上具体的存放位置

 

图解客户端与服务器的通信过程

 

注意：

1. 客户端与服务器之间的通信过程，分为请求-处理-相应三个步骤

2. 网页中的每一个资源，都是通过 请求-处理-相应的方式从服务器获取回来的

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

1. 打开chrome 浏览器

2. ctrl+shift+i 打开chrome的开发者工具

3. 切换到network 面板

4. 选中doc 页签

5. 刷新页面，分析客户端与服务器的通信过程

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

列举网页中常见的资源

 

数据也是资源

网页中的数据，也是服务器对外提供的一种资源，例如股票数据、各行业排行榜等

数据是网页的灵魂

HTML是网页的骨架

CSS是网页的颜值

javascript是网页的行为

数据，则是网页的灵魂

网页中如何请求数据

数据，也是 服务器对外提供的一种资源，只要柿子园，比如要通过骑牛-处理-相应的方式进行获取

如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象

XMLHttpRequest （简称xhr）是浏览器提供的js成员，通过它，可以请求服务器上的数据资源

最简单的用法 var xhrObj = new XMLHttprequest()

资源请求方式

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

• get 请求通常用于获取服务器资源（向服务器要资源）

  例如：根据URL地址，从服务器获取HTML文件、CSS文件、JS文件、图片文件、数据资源等

• post 请求通常用于向服务器提交数据（往服务器发送资源）

  例如：登录时向服务器提交的登录信息、注册时向服务器提交注册信息、添加用户时向服务器的提交用户信息等各种数据提交操作

了解Ajax

什么是Ajax

通俗 理解：在网页中利用XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax

为什么要学Ajax

之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但是Ajax能轻松实现网页与服务器之间的数据交互

Ajax的典型应用场景

用户名检测：注册用户时，通过ajax的形式，动态检测用户名是否被占用

搜索提示：当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表

数据分页显示：当点击页码值的时候，通过ajax的形式，根据页码值动态刷新表单的数据

数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过ajax的形式，来实现数据的交互

jQuery中的Ajax

浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度

jQuery中发起Ajax请求最常见的三个方法如下：

• $.get()

• $.post()

• $.ajax()

$.get()函数的语法

jQuery中$.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用

$.get(url, [data], [callback])

 

$.get() 发起不带参数的请求

使用$.get()函数发起不带参数的请求时，直接提供请求的URL地址和请求成功之后的回调函数即可，示例代码如下：

<br class="Apple-interchange-newline"><div></div>

$.get('http://www.liulongbin.top:306/api/getbooks', function() {

    console.log(res)  //这里的res是服务器返回的数据

})

$.get()发起带参数的请求

示例代码如下:

$.get('http://www.liulongbin.top:3006/api.getbooks', {id : 1}, function(res) {
   console.log(res)
})

$.post()函数的语法

jQuery中 $.post()函数的功能单一，专门用来发起post请求，从而向服务器提交数据

语法如下：

$.post(url, [data], [callback])

 

$.post()向服务器提交数据

$.post (
   'http://www.liulongbin.top:3006/api/getbooks', //请求URL地址
   {bookname: '水浒传'， author: '施耐庵'， publisher: '上海图书出版社'}， //提交的数据
   function(res) {
      console.log(res)
   }

)

$.ajax()函数的语法

相比于$.get() 和 $.post() 函数，jQuery中提供的$.ajax()函数，是一个功能比较综合的函数，它允许对Ajax请求进行更详细的配置

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

使用$.ajax() 发起GET请求

使用$.ajax()发起请求时，只需要将type属性的值设置为'GET' 即可

$.ajax({
   type:'GET', //请求的方式
   url: 'http://www.liulongbin.top:3006/api/getbooks', //请求的URL地址
   data:{id： 1}, //这次请求要携带的数据
   success: function(res) { //请求成功之后的回调函数
   console.log(res)
   }  
})

 

使用$.ajax() 发起POST请求

使用$.ajax()发起请求时，只需要将type属性的值设置为'POST' 即可

<br class="Apple-interchange-newline"><div></div>

$.ajax({

   type:'POST', //请求的方式

   url: 'http://www.liulongbin.top:3006/api/addbooks', //请求的URL地址

   data:{      //要提交给服务器的数据

      bookname: '水浒传',

      author: '施耐庵',

      pulisher: '上海图书出版社'

   }, 

   success: function(res) { //请求成功之后的回调函数

   console.log(res)

   }  

})

接口

概念：使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式

例如：

http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口（GET请求）

http://www.liulongbin.top:3006/api/addbook 添加图书列表的接口（POST请求）

通过GET方式请求接口的过程

 

通过POST方式请求接口的过程