主页

知识铺垫


铺垫知识

URL地址概念

URL(全称是Uniform Resouce Locator)中文名统一资源定位符,用于标识互联网上的每一个资源的唯一存放位置;浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源

URL地址一般由三部分组成:

  1. 客户端与服务器之间的通信协议
  2. 存有该资源的服务器的名称
  3. 资源在服务器上具体的存放位置

URL

网页中如何请求数据

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


如果要在网页中请求服务器上的数据资源,则需要用到 XMLHttpRequest 对象
XMLHttpRequest (简称xhr)是浏览器提供的JS成员,通过它可以请求服务器上的数据资源
最简单的用法 var xhrObj = new XMLHttpRequest()

资源的请求方式

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

  • get 请求通常用于获取服务端资源(向服务器索要资源)
例如:根据URL地址,从服务器获取HTML文件、CSS文件、JS文件、图片文件、数据资源等
  • post 请求通常用于向服务器提交数据(往服务器发送资源)
例如:登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

什么是Ajax

Ajax的全程是Asynchronous Javascript And XML(异步JavaScript和XML)

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

Ajax作用

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

Ajax典型应用场景

  1. 用户名检测:注册用户时,通过ajax的形式,动态检测用户名是否被占用
  2. 搜索提升:当输入搜索关键字时,通过ajax的形式,动态加载搜索提示列表
  3. 数据分页显示:当点击页码值的时候,通过ajax的形式,根据页码值动态刷新表格数据
  4. 数据的增删改查:数据的添加、修改、删除、查询操作,都需要通过ajax的形式来实现数据的交互

jQuery中的Ajax


jQuery中的Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂,所以jQuery对XMLHttpRequest进行了封装,提供了一系列Ajax相关的函数,极大的降低了Ajax的使用难度
jQuery中发起Ajax请求最常用的三个方法:

  • $.get()
  • $.post()
  • $.ajax()

$.get() 函数的语法

$.get(url, [data], [callback])
参数名参数类型是否必选说明
urlstring要请求的资源地址
dataobject请求资源期间要携带的参数
callbackfunction请求成功时的回调函数

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

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

    $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
        console.log(res) // 这里的 res 是服务器返回的数据
    })

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

    $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) {
        console.log(res) // 这里的 res 是服务器返回的数据
    })

$.post() 专门原来发起post请求,从而向服务器提交数据

$.post(url, [data], [callback])
参数名参数类型是否必选说明
urlstring提交数据的地址
dataobject要提交的数据
callbackfunction数据提交成功时的回调函数

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

    $.post('http://www.liulongbin.top:3006/api/addbooks', // 请求的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', // 请求的方式
        url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的URL地址
        data: { // 这次请求要携带的数据
            id: 1 
        }, 
        success: function(res) { // 请求成功之后的回调函数 
            console.log(res)
        }
    })

使用 $.ajax() 发起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地址,就叫做数据接口(简称接口);同时每个接口必须有请求方式

接口的请求过程

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

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

接口测试工具Postman

为了验证接口是否能被正常访问,我们常常需要使用接口测试工具,来对数据接口进行检测

好处:接口测试工具能让我们在不写任何代码的情况下,对接口进行调用和测试

form 标签属性


form标签属性

属性描述
actionURL地址规定当提交表单时,向何处发送表单数据
methodget或post规定以何种方式把表单数据提交到 action URL
enctypeapplication/x-www.form-urlencoded和multipart/form-data和text/plain规定在发送表单数据之前如何对其进行编码
target_blank和_Self和_parent和_top和_framename规定在何处打开 action URL

enctype

描述
application/x-www.form-urlencodedURL地址
method在发送前编码所有字符串(默认)
multipart/form-data不对字符编码;在使用包含文件上传控件的表单时,必须使用该值
text/plain空格转换为 "+" 加号,但不对特殊字符编码
在涉及到文件上传的操作时,必须将 enctype 的值设置为 multipart/form-data

表单的同步提交及缺点

通过点击 submit 按钮,触发表单提交操作,从而使页面跳转到 action URL 的行为,叫做表单的同步提交

缺点

① form 表单同步提交后,整个页面会发生跳转,跳转到 action URL 所指向的地址,用户体验很差
② 表单同步提交后,页面之前的状态和数据会丢失

解决方法

表单只负责采集数据,Ajax负责将数据提交到服务器


Ajax

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0

目录

来自 《Ajax-基本概念》
评论

Joe

博主很懒,啥都没有
175 文章数
14 评论量
3 分类数
178 页面数
已在风雨中度过 1年61天10小时30分