前端Ajax-Day29

URL由三部分组成：

① 客户端和服务器之间的通信协议

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

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

 

客户端与服务器之间通信：请求-处理-响应

 

 

 

网页获取服务器数据：利用XMLHttpRequest对象进行请求处理！

通过xhr(简称)请求服务器上的数据资源。

 

资源的请求方式：get和post

① get请求通常用于获取服务器资源

② post通常用于向服务器发送资源

 

Ajax（Asynchronous Javascript And XML）

在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是ajax，利用ajax实现网页和服务器的数据交互。

 

jQuery中的Ajax：

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

$.post()：向服务器获取数据

$.ajax()：既可以获取又可以提交

 

 

$.get()用法：参数为：(url，[data]，[callback])

url：必选，代表请求的资源地址。

data：可选，代表请求期间携带的参数。

callback：可选，请求成功的回调函数。

 

不带参数请求：只提供url和回调函数

$(() => {
            $('#btnGet').on('click', () => $.get('http://www.liulongbin.top:3006/api/getbooks', res => console.log(res)));
            // res是服务器返回的数据
   })

 

带参数请求：提供url、参数和回调函数。

$(()=>{
       $('#btn').on('click', () => $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, res => console.log(res)))
            // 第二个参数是指定获取的参数范围，例如这里只请求id=1的数据
     })

 

$.post()用法：参数为（url，[data]，[callback]）与get类似

url：必选，代表提交数据的地址。

data：可选，代表要提交的数据。

callback：可选，提交成功的回调函数。

 

 

$.ajax()用法：综合性函数，允许对Ajax请求进行更详细的配置。

以对象格式传入四个数据：① type：请求的方式get/post  ② url：请求的url地址  ③ data：请求携带的数据  ④ success：成功后的回调函数。

 

利用$.ajax发起get请求：将type属性设置为get即可

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

利用$.ajax发起post请求：

$(() => {
            $('#btn').on('click', () =>
                $.ajax({
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: {
                        bookname: 'abc',
                        author: 'lwh',
                        publisher: '123123'
                    },
                    success: res => console.log(res)
                }));
        })

 

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