• [Ajax]初始Ajax


    一、服务器

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

    二、URL地址

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

            1、URL地址的组成部分

            URL地址一般由三部组成:

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

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

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

            http://        通信协议

            www.cnblogs.com/        服务器名称

            liulongbinblogs/p/11649393.html        资源在服务器上具体的存放位置

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

            客户端请求服务器-->服务器处理这次请求-->服务器响应客户端

            用户的电脑:

                    ①打开浏览器

                    ②输入要访问的网站地址

                    ③回车,向服务器发起资源请求

            服务器:

                    ①服务器收到客户端发来的资源请求

                    ②服务器在内部处理这次请求,找到相关的资源

                    ③服务器把找到的资源,响应(发送)给客户端

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

            1、常见的资源

            文字内容、图片、音频、视频、数据and so on...

            2、网页中如何请求数据

            数据,也是服务器对外提供的一种资源。只要是资源,必须通过请求-处理-响应的方式进行获取。

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

            XMLHttpRequest是浏览器提供的js成员,通过它,可以请求服务器上的数据资源。

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

            3、资源的请求方式

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

            get请求通常用于获取服务端资源(向服务器要资源)

            例如:根据URL地址,从服务器获取HTML文件、css文件、js文件、图片文件、数据资源等。

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

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

    四、了解Ajax

            Ajax的全称是Asynchronous Javascript And XML(一部JavaScript和XML)

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

            Ajax能让我们轻松实现网页服务器之间的数据交互。

            1、Ajax的典型应用场景

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

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

            数据分页显示:当点击页码值的时候,通过ajax的形式,根据页码值动态刷新表格的数据。

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

    五、了解jQuery中的Ajax

            1、了解jQuery中的Ajax

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

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

            $.get()

            $.post()

            $.ajax()

            2、$.get()函数的语法

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

            $.get()函数的语法如下:

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

    参数名参数类型是否必选说明
    urlstring要请求的资源地址
    dataobject请求资源期间要携带的参数
    callbackfunction请求成功时的回调函数

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

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

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

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

            })

            3、$.post()函数的语法

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

            $.post()函数的语法如下:

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

            其中,三个参数各自代表的含义如下:

    参数名参数类型是否必选说明
    urlstring提交数据的地址
    dataobject要提交的数据
    callbackfunction

    数据提交成功时的回调函数

            使用$.post()向服务器提交数据的示例代码如下:

            $.post(

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

                    {bookname:'水浒传',author:'施耐庵',publisher:'上海图书出版社'},        //提交的数据

                    function(res){        //回调函数

                            console.log(res)

                    }

            )

            3、$.ajax()函数的语法

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

            $.ajax()函数的语法如下:

            $.ajax({

                    type:'',        //请求的方式,例如GET或POST

                    url:'',        //请求的URL地址

                    data:{},        //这次请求要携带的数据

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

            })

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

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

            

            $.ajax({

                    type:'GET',        //请求的方式,例如GET或POST

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

                    data:{id:1},        //这次请求要携带的数据

                    success:function(res){

                            console.log(res)

                    }        //请求成功之后的回调函数

            })

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

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

            $.ajax({

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

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

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

                            bookname:'水浒传',

                            author:'施耐庵',

                            publisher:'上海图书出版社'

                    },

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

                            console.log(res)

                    }

            })

    六、接口的概念

            使用Ajax请求数据时,被请求的URL地址,就叫做数据接口。同时,每个接口必须有请求方式。

            1、接口文档

            接口文档,就是接口的说明文档,它是我们调用接口的依据。好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何调用。

            2、接口文档的组成部分

            接口名称:用来标识各个接口的简单说明,如登录接口,获取图书列表接口等。

            接口URL:接口的调用地址。

            调用方式:接口的调用方式,如GET或POST。

            参数格式:接口需要传递的参数,每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。

            响应格式:接口的返回值的详细描述,一般包含数据名称、数据类型、说明3项内容。

            返回示例(可选):通过对象的形式,例举服务器返回数据的结构。

  • 相关阅读:
    Mybatis-Plus 条件构造器
    为什么序列化要实现Serializable接口
    基于ssm+vue的邮票收藏鉴赏系统 elementui
    阿里云 Serverless 异步任务处理系统在数据分析领域的应用
    CDR和AI哪个软件更好用?
    【运维面试题】访问www.baidu.com背后发生了什么·dns解析过程·ping过程
    MAC版InDesign 2022 17.4(ID2022)已发布,原生支持Intel和M1/M2三系统,速度提升80%
    python之元组介绍
    Tuxera NTFS2024破解版本下载
    Jupyter Notebook(Anaconda)——两个环境分别修改默认打开目录(深度学习第一周番外篇)
  • 原文地址:https://blog.csdn.net/Lin_Yu_/article/details/127697354