前端框架前置学习(1) AJAX

一. 什么是Ajax

 定义:ajax是异步的JavaScript和xml。简单点说,就是使用xmlhttprequest对象与服务器通信。他可以使用json,xml,html和text文本等格式发送和接收数据。ajax最吸引人的就是它的“异步”特性,也就是说它可以摘不重复刷新页面的情况下余服务器通信,交换数据,或更新页面。

概念:AJAX是浏览器与服务器进行数据通信的技术,动态数据交互

二.怎么学习Ajax

        先掌握axios使用

        再了解XMLHttoReques原理

2.1 axios体验步骤

       引入axios库

 

        使用axios语法

 axios({

        url: 'http://hmajax.itheima.net/api/province'

        // 目标资源地址

    }).then(result => {

        console.log(result.data.list)

         // 对服务器返回数据做后续处理

    })

2.2 什么是url

定义:统一资源定位符(Uniform Resource Locator,缩写:URL,或称为统一资源定位符,定位地址,url地址等),俗称网址,是因特网上标准的资源的地址(Address),如同在网络上的门牌号。

概念:URL就是统一资源定位符,简称网址,用于访问网络上的资源

URL组成:

       前端框架前置学习(1) AJAX_第1张图片

        http协议:超文本传输协议,规定浏览器和服务器之间传输数据的格式

        资源路径:标记资源在服务器下的具体位置

        域名:标记服务器在互联网中的方位

2.3 查询参数

axios-查询参数

语法:使用axios提供的params选项

注意:axios在运行时把参数名和值,会拼接到url?参数名=值

前端框架前置学习(1) AJAX_第2张图片

2.4 常用的请求方法

请求方法:对服务器资源要执行的操作

请求方法 操作
GET 获取数据
POST

提交数据

PUT 修改数据(全部)
DELETE 删除数据
PATCH 修改数据(部分)

2.5 axios请求配置

url:请求的URL网址

method:请求的方法,GET可以省略(不区分大小写)

data:提交数据

axios({

        url:'目标资源地址',

        method:' 请求方法',

        data:{

               参数名:值

        }

}).then((reslut)=>{

        // 对服务器返回的数据做后续处理

})

2.6 axios的核心配置项

  • url:请求URL网址
  • method:请求方式,GET可以忽略
  • params:查询参数
  • data:提交数据

2.7 错误处理

axios错误处理

场景:再次注册相同的账号是,会遇到报错信息

语法:在then方法的后面,通过点语法调用catch方法,传入回调函数并定义形参

axios({

        url:'目标资源地址',

       method:' 请求方法',

        //从服务器中查询值

        params:{

                参数:值

        }

        //向服务器中提交元素

        

        data:{

               参数名:值

        }

}).then((reslut)=>{

        // 对服务器返回的数据做后续处理

}).catch(error =>{

        console.log('1',error)

})

2.8 HTTP协议-请求报文

        Http协议:规定了浏览器发送及服务器返回内容的格式

        请求报文:浏览器按照HTTP协议要求的格式,发送给服务器的内容

        请求报文的组成部分有:

        1.请求行:请求方法,URL,协议等

        2.请求头:以键值对的格式携带的附加信息,比如:Content-Type

        3.空行:分隔请求头,空行之后的是发送给服务器的资源

        4.请求体:发送的资源

可以通过请求报文对代码进行错误排查

前端框架前置学习(1) AJAX_第3张图片

2.9 HTTP协议-响应报文

HTTP协议:规定了浏览器发送及服务器返回内容的格式

响应报文:服务器按照HTTP协议要求的格式,返回给浏览器的内容

  • 响应行(状态行):协议,HTTP响应状态码,状态信息
  • 响应头:以键值对的格式携带的附加信息,比如:Content-Type
  • 空行:分隔响应头,空行之后的是服务器返回的资源
  • 响应体:返回的资源
  • 前端框架前置学习(1) AJAX_第4张图片

3.0 接口文档

接口文档:描述接口的文章(后端)

接口:使用AJAX和服务器通讯时,使用URL,请求方法,以及参数

前端框架前置学习(1) AJAX_第5张图片

3.1form-serilize插件

作用:快速收集表单元素的值

   

 

 

你可能感兴趣的:(前端框架,ajax,前端)