Ajax学习笔记整理（下）

本文介绍: XMLHt t pReque s t（简称 xhr）是浏览器提供的 Jav a script 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQue ry 中的 Aja x 函数，就是基于 xhr 对象封装出来的。定义：查询字符串（URL参数）是指下URL的末尾加上用于向服务器发送信息的字符串（变量）格式：将英文的?放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用&符号进行分隔，以这个形式，可以将想要发送给服务器的数据添加到URL中。……

文章 目录

1.XMLHttpReque st的基本 使用

1.1 什么是XMLHttpReque st

XMLHttpReque st（简称 xhr）是浏览器提供的 Jav a script 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQue ry 中的 Aja x 函数，就是基于 xhr 对象封装出来的。

在这里插入图片描述

1.2使用 xhr发起get请求

步骤：

代码实例：

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
    if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

1.3了解xhr对象的read yState属性

XMLHttpReque st对象的read yState属性，用来表示当前 ajax请求所处的状态。每个 ajax请求必然处于一下状态中的一个：

值	状态	描述
0	UNSENT	XMLHttpRequest 对象已被创建，但尚未调用 open 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，响应头也已经被接收。
3	LOADING	数据接收中，此时 response 属性中已经包含部分数据。
4	DONE	Ajax 请求完成，这意味着数据传输已经彻底完成或失败。

1.4使用xh r对象发起带参数的GET请求

使用xh r对象发起带参数的GET请求时，只需在调用xh r.open期间，为URL地址制定参数即可：

// ...省略不必要的代码
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
// ...省略不必要的代码

这种在URL地址后面拼接的参数，叫做查询字符串

1.5查询 字符串

1.什么是查询字符串

定义：查询字符串（URL参数）是指下URL的末尾加上用于向服务器发送信息的字符串（变量）

格式：将英文的 ? 放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用 & 符号进行分隔，以这个形式，可以将想要发送给服务器的数据添加到URL中。

在这里插入图片描述

2.get请求携带参数的本质

无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xh r 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。

在这里插入图片描述

1.6URL编码与解码

1.什么是URL编码

URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符。

如果URL中需要包含中文这样的字符，则必须对中文字符进行编码（转义）

URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符

URL编码的原则的通俗理解：使用英文字符去表示非英文字符

在这里插入图片描述

2.如何对URL进行编码和解码

浏览器提供了URL编码与解码的API，分别是：

encodeURI()编码的函数
decodeURI()解码的函数

在这里插入图片描述

3.URL编码的注意事项

由于浏览器会自动对URL地址进行编码操作，因此，大多数情况下，程序员不需要关心URL地址的编码与解码操作

1.7使用xh r发起post请求

步骤：

创建xh r对象
调用xh r.open()函数
设置Content-Type 属性(固定写法)
调用xhr.send()函数，同时指定要发送的数据
监听xhr.readystatechange 事件

代码示例：

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&amp;author=施耐庵&amp;publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

2.数据交换 格式

2.1 什么是数据交换 格式

数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式

前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，所以，我们重点要学习的数据交换格式就是 JSON。

在这里插入图片描述

2.2 XML

1.什么是XML

XML 的英文全称是 EXtensi ble Mark up Lang ua ge，即可扩展标记语言。因此，XML 和 HTML 类似，也是一种标记语言。

2.XML和HTML的区别

XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。

HTML 被设计用来描述网页上的内容，是网页内容的载体
XML 被设计用来传输和存储数据，是数据的载体

3.XML的缺点

在这里插入图片描述

①XML 格式臃肿，和数据无关的代码多，体积大，传输效率低

②在 Javascript 中解析 XML 比较麻烦

2.3 JSON

1.什么是JSON

概念：JSON的全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。

作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。

现状：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。

2.JSON的两种结构

JSON就是用字符串来表示Javascript的对象和数组。所以，JSON中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构.

对象结构：对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

(必须为双引号)

数组结构：数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

3.JSON语法 注意事项

属性名必须使用双引号包裹
字符串类型的值必须使用双引号进行包裹
JSON中不允许使用单引号表示字符串
JSON中不能写注释
JSON的最外层必须是对象会数组格式
不能使用undefined或函数作为JSON的值

JSON的作用：在计算机和网络之间存储和传输数据

JSON的本质：用字符串来表示Javascript对象数据或数组数据

4.JSON和JS对象的关系

JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串，例如：

//这是一个对象
var obj = {a: 'Hello', b: 'World'}

//这是一个 JSON 字符串，本质是一个字符串
var json = '{"a": "Hello", "b": "World"}'

5.JSON和JS对象的相互转换

要实现从JSON字符串转换为JS对象，使用JSON.parse()方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}

要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'

6.序列化与反序列化

把数据对象转换为字符串的过程，叫做序列化，例如：调用JSON.stringify()函数的操作，叫做JSON序列化

把字符串转换为数据对象的过程，叫做反序列化，例如：调用JSON.parse()函数的操作，叫做JSON反序列化

3.封装 自己的Ajax函数

3.1要实现的效果

<!-- 1. 导入自定义的ajax函数库 --&gt;
<script src="./itheima.js"&gt;</script>

<script>
    // 2. 调用自定义的 itheima 函数，发起 Ajax 数据请求
    itheima({
        method: '请求类型',
        url: '请求地址',
        data: { /* 请求参数对象 */ },
        success: function(res) { // 成功的回调函数
            console.log(res)     // 打印数据
        }
    })
</script>

3.2定义 options参数选项

itheima()函数是我们自定义的Ajax函数，它接受一个配置对象作为参数，配置对象中可以配置如下属性：

method：请求的类型
url：请求的url地址
data：携带的参数
success：请求成功后的回调函数

3.3处理 data参数

需要把data对象，转换成查询字符串的格式，从而提交给服务器，因此提前定义resolveData函数如下：

/**
*处理data参数
*@param {data} 需要发送到服务器的数据
*@return {string} 返回拼接好的查询字符串name=zs&amp;age=10
*/
function resolveData(data) {
    let arr=[];
    for(let k in data) {
        arr.push(k+'='+data[k]);
    }
    return arr.join('&amp;')
}

3.4定义itheima函数

在itheima()函数中，需要创建xhr对象，并监听onre adystatechange 事件：

function itheima(options) {
    let xhr=new XMLHttpRequest();
    //拼接字符串
    let qs=resolveData(options.data);
    //监听请求状态改变的事件
    xhr.onreadystatechange=function() {
        if(xhr.readystate==4 &amp;&amp; xhr.status==200) {
            let result=JSON.parse(xhr.responseText);
            options.success(result);
        }
    }
}

3.5判断请求的类型

不同的请求类型，对应xhr对象的不同操作，因此需要对请求类型进行if…else…的判断：

if (options.method.toUpperCase() === 'GET') {
    // 发起 GET 请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    // 发起 POST 请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

4. XMLHttpRequest Level2的新特性

4.1认识XMLHttpRequest Level2

1.旧版XMLHttpRequest的缺点

只支持文本数据的传输，无法用来读取和上传文件
传送和接收数据时，没有进度信息，只能提示有没有完成

2.XMLHttpRequest Level2的新功能

可以设置HTTP请求的时限
可以使用FormData对象管理表单数据
可以上传文件
可以获得数据传输的进度信息

4.2设置HTTP请求时限

有时，Ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限：

xhr.timeout=3000

请求时限是个数值，单位是毫秒

上面的语句，将最长等待时间设为3000毫秒，过了这个时限，就自动停止HTTP请求，与之配套的还有一个 time out事件，用来指定回调函数：

 xhr.ontimeout = function(event){
     alert('请求超时！')
 }

4.3FromData对象管理 表单数据

Ajax操作往往用来提交表单数据。为了方便表单处理，HTML5新增了一个FormData对象，可以模拟表单操作：

// 1. 新建 FormData 对象
var fd = new FormData()
// 2. 为 FormData 添加表单项
fd.append('uname', 'zs')
fd.append('upwd', '123456')
// 3. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 4. 指定请求类型与URL地址
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
// 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
xhr.send(fd)

FormData对象也可以用来获取网页表单的值，示例代码如下：

// 获取表单元素
 var form = document.querySelector('#form1')
 // 监听表单元素的 submit 事件
 form.addEventListener('submit', function(e) {
    e.preventDefault()
     // 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
     var fd = new FormData(form)
     var xhr = new XMLHttpRequest()
     xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
     xhr.send(fd)
     xhr.onreadystatechange = function() {}
})

4.4上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。

实现步骤：

①定义 UI 结构

②验证是否选择了文件

③向 FormData 中追加文件

④使用 xhr 发起上传文件的请求

⑤监听 onreadystatechange 事件

1.定义UI结构

<!-- 1. 文件选择框 -->
<input type="file" id="file1" />
<!-- 2. 上传按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3. 显示上传到服务器上的图片 -->
<img src="" alt="" id="img" width="800" />

2.验证是否 选择了文件

// 1. 获取上传文件的按钮
 var btnUpload = document.querySelector('#btnUpload')
 // 2. 为按钮添加 click 事件监听
 btnUpload.addEventListener('click', function() {
     // 3. 获取到选择的文件列表
     var files = document.querySelector('#file1').files
     if (files.length <= 0) {
         return alert('请选择要上传的文件！')
     }
     // ...后续业务逻辑
 })

3.向FormData中追加文件

 // 1. 创建 FormData 对象
 var fd = new FormData()
 // 2. 向 FormData 中追加文件
 fd.append('avatar', files[0])

4.使用xhr发起上传文件的请求

//1.创建xhr对象
let xhr=new XMLHttpRequest();
//2.调用open函数，指定请求类型与URL地址，其中，请求类型必须为POST
xhr.open('POST','http://liulongbin.top:3006/api/upload/avatar');
//3.发起请求
xhr.send(fd);

5.监听onreadystatechange事件

xhr.onreadystatechange=function() {
    if(xhr.readyState===4) {
        if(xhr.status===200 || xhr.status===304) {
            let data=JSON.parse(xhr.responseText);
            // console.log(data);
            if(data.status===200) {
                //上传成功   显示时 必须加上前面的路径
                document.querySelector('#img').src='http://liulongbin.top:3006'+data.url;
            }
            else {
                //上传失败
                console.log('图片上传失败'+data.message);
            }
        }
    }
}

4.5显示文件的上传进度

新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度。

语法格式如下：

//创建XHR对象
let xhr=new XMLHttpRequest();
//监听xhr.upload的onprogress事件
xhr.upload.onprogress=function(e) {
    //e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度。只有当前为true时才能计算出上传进度
    if(e.lengthComputable) {
        //e.loaded已传输的字节
        //e.total需传输的总字节
        let percentComplete=Math.ceil((e.loaded/e.total)*100);
    }
}

1.上传需要的库

2.监听上传进度的事件

xhr.upload.onprogress=function(e) {
    if(e.lengthComputable) {
        //1.计算出当前进度的百分比
        let percentComplete=Math.ceil((e.loaded/e.total)*100);
        $('#percent')
            //2.设置进度条的宽度
            .attr('style','width:'+percentComplete+'%');
            //3.显示当前的上传进度百分比
            .html(percentComplete+'%');
    }
}

3.监听上传完成的事件

xhr.upload.onload=function() {
    $('#percent')
    //移除上传中的类样式
    .removeClass()
    //添加上传完成的类样式
    .addClass('progress-bar progress-bar-success');
}

5.jQuery 高级 用法

5.1jQuery实现文件上传

1.定义UI结构

<script src="lib/jquery.js"></script>
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.上传文件的按钮 -->
<button id="btnUpload">上传文件</button>

2.验证是否 选择了文件

$('#btnUpload').on('click',function() {
    //1.将jQuery对象转换为DOM对象，并获取选中的文件列表
    let files=$('#file1')[0].files;
    //2.判断是否选择了文件
    if(files.length<=0) {
        return alert('请选择文件后上传');
    }
    else {
        console.log('ok');
    }
})

3.向FormData中追加数据

//向FormData中追加数据
let fd=new FormData();
fd.append('avatar',files[0]);

4.发起上传文件的请求

//发起jQuery的Ajax请求，上传文件
$.ajax({
    type:'POST',
    url:'http://www.liulongbin.top:3006/api/upload/avatar',
    data:fd,
    //不对FormData中的数据进行url编码，而是将FormData数据原样发送到服务器
    processData:false,
    //不修改content-Type属性，使用FormData默认的Content-Type值
    contentType:false,
    success:function(res) {
        console.log(res);
    }
})

5.2jQuery实现loading效果

1.ajaxStart(callback)

Ajax请求开始时，执行 ajaxStart函数。可以在ajaxStart的callback中显示loading效果，示例代码如下：

//自jQuery版本1.8起，该方法只能被附加到文档
$(document).ajaxStart(function() {
    $('#loading').show();
})

注意：$(document).ajaxStart()函数会监听当前文档内所有的Ajax请求

2.ajaxStop(callback)

AJax请求结束时，执行 ajaxStop函数。可以在ajaxStop的callback中隐藏loading效果，示例代码如下：

//自jQuery版本1.8起，该方法只能被附加到文档
$(document).ajaxStop(function() {
    $('#loading').hide();
})

6.axios

6.1什么是axios

Axios是专注于网络数据请求的库。

相比于原生的XMLHttpRequest对象，axios简单易用。

相比于jQuery，axios更轻量化，只专注于网络数据请求。

6.2axios发起get请求

axios发起get请求的语法：

axios.get('url',{params:{/*参数*/}}).then(callback);

具体请求示例：

//请求的url地址
let url='http://www.liulongbin.top:3006/api/get';
//请求的参数对象
let paramsObj={name:'zs',age:20};
//调用ajax.get()发起GET请求
axios.get(url,{params:paramsObj}).then(function(res) {
    //res.data才是服务器响应回来的真正的数据
    console.log(res.data);
})

6.3axios发起post请求

axi os发起post请求的语法：

axios.post('url',{/*参数*/}).then(callback);

具体请求示例：

//请求的url地址
let url='http://www.liulongbin.top:3006/api/post';
//要提交到服务器的数据
let dataObj={name:'zs',age:20};
//调用ajax.post()发起POST请求
axios.post(url,dataObj).then(function(res) {
    //res.data才是服务器响应回来的真正的数据
    console.log(res.data);
})

6.4直接使用axi os发起请求

axi os也提供了类似于jQuery中$ajax()的函数，语法如下：

axios({
    method:'请求类型',
    url:'请求的URL地址',
    data:{/*post数据*/}，
    params:{/*get参数*/}
}).then(callback)

7.了解同源 策略和跨域

7.1同源 策略

1.什么是同源

如果两个页面的协议，域名和端口都相同，则这两个页面具有相同的源

例如，下表给出了相对于http://www.test.com/index.html 页面的同源检测：

(注意：如果没有 ” ：数字 ” ,则默认端口号为80)

URL	是否同源	原因
http://www.test.com/other.html	是	同源（协议、域名、端口相同）
https://www.test.com/ab out.html	否	协议不同（http 与 https）
http://blog.test.com/mov ie.html	否	域名不同（www.test.com 与 blog.test.com）
http://www.test.com:7001/home.html	否	端口不同（默认的 80 端口与 7001 端口）
http://www.test.com:80/main.html	是	同源（协议、域名、端口相同）

2.什么是同源策略

同源策略是浏览器提供的一个安全功能

MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

①无法读取非同源网页的 Cook ie、LocalStorage 和 Ind exedDB

②无法接触非同源网页的 DOM

③无法向非同源地址发送 Ajax 请求

1.2跨域

1.什么是跨域

同源是指两个URL的协议，域名，端口一致，反之，则是跨域

出现跨域的根本原因：浏览器的同源策略不允许非同源的URL之间进行资源的交互

2.浏览器对跨域请求的拦截

在这里插入图片描述

注意：浏览器是允许发起跨域请求的，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到

3.如何实现跨域数据请求

现如今，实现跨域数据请求，最主要有两种解决方案，分别是JSONP和CORS。

JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案，缺点是只支持GET请求，不支持POST请求

CORS：出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。只支持GET和POST请求，缺点是不兼容某些低版本的浏览器

8. JSONP

8.1 什么是JSONP

JSONP是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题

8.2 JSONP的实现原理

由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据。但是script标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js 脚本.

因此，JSONP 的实现原理，就是通过

8.3 自己实现一个简单的JSONP

定义一个success回调函数：

<script>
   function success(data) {
     console.log('获取到了data数据：')
     console.log(data)
   }
 </script>

通过script标签，请求接口数据：

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>

8.4 JSONP的缺点

由于 JSONP 是通过

注意：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象。

8.5 jQuery中的JSONP

jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，例如：

$.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
    dataType: 'jsonp',
    success: function(res) {
       console.log(res)
    }
 })

默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称

8.6 自定义参数及回调函数名称

在使用jQuery发起JSONP请求时，如果想要自定义JSONP的参数以及回调函数名称，可以通过如下两个参数来指定：

$.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    dataType: 'jsonp',
    // 发送到服务端的参数名称，默认值为 callback
    jsonp: 'callback',
    // 自定义的回调函数名称，默认值为 jQueryxxx 格式
    jsonpCallback: 'abc',
    success: function(res) {
       console.log(res)
    }
 })

8.7 jQuery中JSONP的实现过程

jQuery 中的 JSONP，也是通过

在发起 JSONP 请求的时候，动态向 header 中 append 一个 script 标签；
在 JSONP 请求成功以后，动态从 header 中移除刚才 append 进去的 script 标签；

9.HTTP协议 简介

9.1什么是HTTP协议

通信，就是信息的传递和交换。

通信三要素：

通信的主体
通信的内容
通信的方式

1.现实生活中的通信

案例：张三要把自己考上传智专修学院的好消息写信告诉自己的好朋友李四。

其中：

通信的主体是张三和李四；

通信的内容是考上传智专修学院；

通信的方式是写信；

2.互联网中的通信

案例：服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器。

其中，

通信的主体是服务器和客户端浏览器；

通信的内容是传智专修学院的简介；

通信的方式是响应；

1.2 什么是通信协议

通信协议（Comm uni cation Protocol）是指通信的双方完成通信所必须遵守的规则和约定。

通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议。

1. 互联网中的通信协议

客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。

网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol），简称 HTTP协议。

1.3HTTP

1.什么是HTTP协议

HTTP协议即超文本传送协议，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输协议。

例如：

客户端要以HTTP协议要求的格式把数据提交到服务器

服务器要以HTTP协议要求的格式把内容响应给客户端

2.HTTP协议的交互 模型

HTTP协议采用了请求/响应的交互模型

在这里插入图片描述

10.HTTP的请求消息

10.1什么是HTTP请求消息

由于HTTP协议属于客户端浏览器和服务器之间的通信协议。因此，客户端发起的请求叫做HTTP请求，客户端发送到服务器的消息，叫做HTTP请求消息

注意：HTTP请求消息又叫做HTTP请求报文

10.2 HTTP请求消息的组成部分

HTTP 请求消息由请求行（request line）、请求头部（ header ）、空行和请求体 4 个部分组成。

在这里插入图片描述

1.请求行

请求行由请求方式、url和HTTP协议版本3部分组成，它们之间使用空格隔开

2.请求头部

请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。比如：User-Agent 用来说明当前是什么类型的浏览器；Content-Type 用来描述发送到服务器的数据格式；Acc ept 用来描述客户端能够接收什么类型的返回内容；Acc ept-Language 用来描述客户端期望接收哪种人类语言的文本内容。

请求头部由多行键/值对组成，每行的键和值之间用英文的冒号分隔。

在这里插入图片描述

2.请求头部–常见的请求头字段

头部字段	说明
Host	要请求的服务器域名
Conn ection	客户端与服务器的连接方式(close 或 keepalive)
Content-Length	用来描述请求体的大小
Acc ept	客户端可识别的响应内容类型列表
User-Agent	产生请求的浏览器类型
Content-Type	客户端告诉服务器实际发送的数据类型
Accept-Encoding	客户端可接收的内容压缩编码形式
Accept-Language	用户期望获得的自然语言的优先顺序

3.空行

最后一个请求头字段的后面是一个**空行**，通知服务器请求头部至此结束。

请求消息中的空行，用来分隔请求头部与请求体。

在这里插入图片描述

4.请求体

请求体中存放的，是要通过POST方式提交到服务器的数据

在这里插入图片描述

注意：只有POST请求才有请求体，GET请求没有请求体！

11.HTTP响应消息

11.1什么是HTTP响应消息

响应消息就是服务器响应给客户端的消息内容，也叫做响应报文

11.2HTTP响应消息的组成部分

HTTP响应消息由状态行、响应头部、空行和响应体4部分组成

在这里插入图片描述

1.状态行

状态行由HTTP协议版本、状态码和状态码的描述文本3个部分组成，他们之间使用空格隔开

2.响应头部

响应头部用来描述服务器的基本信息。响应头部由多行键/值对组成，每行的键和值之间用英文的冒号分隔

在这里插入图片描述

3.空行

在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户端响应头部至此结束。

响应消息中的空行，用来分隔响应头部与响应体。

在这里插入图片描述

4.响应体

响应体中存放的，是服务器相应给客户端的资源内容

13.HTTP请求方法

13.1什么是HTTP请求方法

HTTP请求方法，属于HTTP协议中的一部分，请求方法的作用是：用来表明要对服务器上的资源执行的操作。

最常用的请求方法是GET和POST。

13.2HTTP的请求方法

序号	方法	描述
1	GET	(查询)发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。
2	POST	(新增)向服务器提交资源（例如提交表单或上传文件）。数据被包含在请求体中提交给服务器。
3	PUT	(修改)向服务器提交资源，并使用提交的新资源，替换掉服务器对应的旧资源。
4	DELETE	(删除)请求服务器删除指定的资源。
5	HEAD	HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。
6	OPTIONS	获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检等。
7	CONNECT	建立一个到由目标资源标识的服务器的隧道。
8	TRACE	沿着到目标资源的路径执行一个消息环回测试，主要用于测试或诊断。
9	PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新。

14.HTTP响应状态码

14.1什么是HTTP响应状态码

HTTP响应状态码，也属于HTTP协议的一部分，用来标识相应的状态。

响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次HTTP请求的结果是成功还是失败了。

14.2HTTP响应状态码的组成及分类

HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分。

HTTP状态码共分为5种类型：

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作（实际开发中很少遇到 1** 类型的状态码）
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

1. 2**成功相关的响应状态码

2** 范围的状态码，表示服务器已成功接收到请求并进行处理。常见的 2** 类型的状态码如下：

状态码	状态码英文名称	中文描述
200	OK	请求成功。一般用于 GET 与 POST 请求
201	Created	已创建。成功请求并创建了新的资源，通常用于 POST 或 PUT 请求

2. 3**重定向相关的响应状态码

3** 范围的状态码，表示表示服务器要求客户端重定向，需要客户端进一步的操作以完成资源的请求。常见的 3** 类型的状态码如下：

状态码	状态码英文名称	中文描述
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	Found	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
304	Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源（响应消息中不包含响应体）。客户端通常会缓存访问过的资源。

3.4**客户端错误相关的响应状态码

4** 范围的状态码，表示客户端的请求有非法内容，从而导致这次请求失败。常见的 4** 类型的状态码如下：

状态码	状态码英文名称	中文描述
400	Bad Request	1、语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。 2、请求参数有误。
401	Unauthorized	当前请求需要用户验证。
403	Forbi dden	服务器已经理解请求，但是拒绝执行它。
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。
408	Request Timeout	请求超时。服务器等待客户端发送的请求时间过长，超时。

4.5**服务端错误相关的响应状态码

5** 范围的状态码，表示服务器未能正常处理客户端的请求而出现意外错误。常见的 5** 类型的状态码如下：

状态码	状态码英文名称	中文描述
500	Internal Server Error	服务器内部错误，无法完成请求。
501	Not Implemented	服务器不支持该请求方法，无法完成请求。只有 GET 和 HEAD 请求方法是要求每个服务器必须支持的，其它请求方法在不支持的服务器上会返回501
503	Service Unav ai lable	由于超载或系统维护，服务器暂时的无法处理客户端的请求。

原文地址:https://blog.csdn.net/weixin _60835328/art icle/de tails/126254536

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_29366.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

1.XMLHttpRequest的基本使用

1.1 什么是XMLHttpRequest

1.2使用xhr发起get请求

1.3了解xhr对象的readyState属性

1.4使用xhr对象发起带参数的GET请求

1.5查询字符串

1.什么是查询字符串

2.get请求携带参数的本质

1.6URL编码与解码

1.什么是URL编码

2.如何对URL进行编码和解码

3.URL编码的注意事项

1.7使用xhr发起post请求

2.数据交换格式

2.1 什么是数据交换格式

2.2 XML

1.什么是XML

2.XML和HTML的区别

3.XML的缺点

2.3 JSON

1.什么是JSON

2.JSON的两种结构

3.JSON语法注意事项

4.JSON和JS对象的关系

5.JSON和JS对象的相互转换

6.序列化与反序列化

3.封装自己的Ajax函数

3.1要实现的效果

3.2定义options参数选项

3.3处理data参数

3.4定义itheima函数

3.5判断请求的类型

4. XMLHttpRequest Level2的新特性

4.1认识XMLHttpRequest Level2

1.旧版XMLHttpRequest的缺点

2.XMLHttpRequest Level2的新功能

4.2设置HTTP请求时限

4.3FromData对象管理表单数据

4.4上传文件

1.定义UI结构

2.验证是否选择了文件

3.向FormData中追加文件

4.使用xhr发起上传文件的请求

5.监听onreadystatechange事件

4.5显示文件的上传进度

1.上传需要的库

2.监听上传进度的事件

3.监听上传完成的事件

5.jQuery高级用法

5.1jQuery实现文件上传

1.定义UI结构

2.验证是否选择了文件

3.向FormData中追加数据

4.发起上传文件的请求

5.2jQuery实现loading效果

1.ajaxStart(callback)

2.ajaxStop(callback)

6.axios

6.1什么是axios

6.2axios发起get请求

6.3axios发起post请求

6.4直接使用axios发起请求

7.了解同源策略和跨域

7.1同源策略

1.什么是同源

2.什么是同源策略

1.2跨域

1.什么是跨域

2.浏览器对跨域请求的拦截

3.如何实现跨域数据请求

8. JSONP

8.1 什么是JSONP

8.2 JSONP的实现原理

8.3 自己实现一个简单的JSONP

8.4 JSONP的缺点

8.5 jQuery中的JSONP

8.6 自定义参数及回调函数名称

8.7 jQuery中JSONP的实现过程

9.HTTP协议简介

9.1什么是HTTP协议

1.XMLHttpReque st的基本使用

1.1 什么是XMLHttpReque st

1.2使用 xhr发起get请求

1.3了解xhr对象的read yState属性

1.4使用xh r对象发起带参数的GET请求

1.7使用xh r发起post请求

3.2定义 options参数选项

3.3处理 data参数

5.jQuery 高级用法

6.4直接使用axi os发起请求

发表回复取消回复