URL地址

概念：URL被称为统一资源定位符，用于标识互联网上存放资源的唯一地址，浏览器只有通过URL地址，才可以获得准确的存放资源的位置，从而找到其资源，简单的来说就像我们的身份证。

URL的组成

URL地址一般由三部分组成：
1、客服端与服务器之间的通信协议
2、存有资源的服务器名称
3、资源在服务器上具体存放的位置

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

客户端

1. 打开浏览器
2. 输入要访问的网站地址
3. 回车，像服务器发起资源请求
   web服务器
4. 服务器接收到客户端发起的资源请求
5. 服务器在内部处理这次请求，并且找到相关资源
6. 服务器把找到的资源，相应(发送)给客户端
   注意：
7. 客户端与服务器之间的通讯过程,分为请求-处理-响应三个步骤
8. 网页中的每一个资源，都是通过请求-处理-响应的方式从服务器获取回来
   

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

1.打开谷歌浏览器
2.CTRL+SHIFT+J打开开发者工具
3.切换到Network面板
4.选中Doc页签
5.刷新页面，分析客服端和服务器的通讯过程

如何请求数据

XMLHttpRequest(简称xhr)浏览器提供给JS成员
var xhr=new XMLHttpRequest();

了解AJAX

在网页中利用XMLHttpRequest对象和服务器进行交互，ajax可以实现网页和服务器之间的数据传输交互

AJAX的应用场景

1.注册用户时通过ajax的形式进行查重提醒
2.动态加载搜索提示框
3.数据的分页显示，就比如一页就显示两条，根据页面值来进行数据的重新刷新
4.增删改查

jQuery中的AJAX

$.get() 从服务器中获取数据
$.post() 往服务器提交数据
$.ajax() 既可以从服务器中获取数据又可以提交数据

$.get() 从服务器中获取数据

jquery中的$.get()函数的功能单一，专门用来发起get请求，从而服务器上的资源请求到客户端来使用语法：$.get(url,[data],[callback])---->后面两个参数可选可不选

参数名	参数类型	是否必选	说明
url	string字符串类型	是	要请求的资源地址
data	Object对象类型	否	请求资源期间要携带的参数，这个data参数要发送到服务器
callback	function	否	请求参数成功时调用这个回调函数(从服务器中响应回来的参数)

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

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

 $(function(){
        $('#butGET').on('click',function(){
            $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){//res代表从服务器中访问回来的数据
               console.log(res);
            })
        })
    })

> 当我点击这个按钮后则发起无参数的GIT请求

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

      $(function(){
          $('#btnFETINFO').on('click',function(){
              $('http://www.liulongbin.top:3006/api/getbooks',{status:200},function(res){
                  console.log(res);
              })
          })
      })
      查找参数为status，参数值为200的数据

$post()往服务器提交数据

JQuery中 $pos()函数功能单一，专门用来发起post请求，从而向服务器提交数据， $post()语法如下：

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

参数名	参数类型	是否必选	说明
url	string字符串类型	是	提交数据地址
data	Object对象类型	否	要提交的数据
callback	function	否	请数据提交成功时的回调函数

  $(function(){
        $('#text').on('click',function(ev){
          $.post('http://www.liulongbin.top:3006/api/addbook',{bookname:'水浒传',author:'施耐庵',publisher:'北京出版社'},function(reg){
               console.log(reg);
          })
        })
    })

$.ajax()函数语法

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

$.ajax()的语法如下：

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

$.ajax()发起GIT请求

 $(function(){
          $('#text').on('click',function(){
              $.ajax({
                  type:'GET',
                  url:'http://www.liulongbin.top:3006/api/getbooks',
                  data:{
                      id:1
                  },
                  success:function(info){
                      console.log(info);
                  }
              })
          })
      })

$.ajax()发起POST请求

  $(function(){
          $('#text').on('click',function(){
              $.ajax({
                  type:'POST',
                  url:'http://www.liulongbin.top:3006/api/addbook',
                  data:{
                      bookname:'世纪',
                      author:'司马迁',
                      publisher:'上海'
                  },
                  success:function(info){
                      console.log(info);
                  }
              })
          })
      })