前后端交互学习笔记(四)：ajax及http

已于 2024-07-12 13:50:59 修改
阅读量521 收藏 4
点赞数 3
文章标签： ajax 学习 http
于 2023-03-06 14:41:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flytrybest/article/details/128381526
版权

文章目录

ajax学习笔记

1. 服务器的基本概念

  1. 上网过程中，负责存放和对外提供资源的电脑，叫做服务器。负责获取和消费资源的电脑，叫做客户端。
  2. URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
  3. url地址一般由三个部分组成，如下所示：
    在这里插入图片描述
  4. 打开 Chrome 浏览器，Ctrl+Shift+I 打开 Chrome 的开发者工具，切换到 Network 面板，选中 Doc 页签，刷新页面，分析客户端与服务器的通信过程
  5. 客户端发送数据请求服务器，服务器发送数据，响应客户端
  6. 如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。最简单的用法 var xhrObj = new XMLHttpRequest()
  7. 资源的请求方式，get从服务器拿资源，post，向服务器发送资源

2. ajax的基本使用

  1. Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。用户与网页进行数据的交互，而网页与服务器之间的交互使用的是ajax
  2. jq中的三个ajax请求，$.get()//拿资源 $.post()//发送资源 $.ajax()//即可拿，又可发送
  3. get的使用，回调函数里面就是拿到服务器返回的数据，谷歌调试工具中的Network下的XHR可以监听ajax的请求：
$.get(url, [data], [callback])

在这里插入图片描述
如下述写法，res打印出服务器返回的数据：

 $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 },function (res) {
       console.log(res)
   })
  1. post的使用，语法如下，无论post 还是get，data这个参数是要用对象的形式表示：
$.post(url, [data], [callback])

在这里插入图片描述
5. ajax使用：

$.ajax({
   type: '', // 请求的方式，例如 GET 或 POST（大小写都可以）
   url: '',  // 请求的 URL 地址
   data: { },// 这次请求要携带的数据
   success: function(res) { } // 请求成功之后的回调函数
})
  1. 使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。
  2. postman是一个测试接口的工具，对于get请求，参数直接写在Params这一栏，而对于post请求，data需要写在下述的位置：
    在这里插入图片描述

3. form表单的基本使用

  1. 表单主要用来在网页中采集数据，由三个部分组成：表单标签form ，表单域（文本框）以及表单按钮（如提交按钮），表单常用的属性如下：
    在这里插入图片描述

  2. action属性用来规定当提交表单时，向何处发送表单数据。action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。当 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

  3. target属性常用的值及其意义：
    在这里插入图片描述

  4. method属性，get 方式适合用来提交少量的、简单的数据，直接显示在url地址栏，安全性较低。post 方式以一种更隐蔽的方式进行提交，适合用来提交大量的、复杂的、或包含文件上传的数据。在实际开发中， 表单的 post 提交方式用的最多，默认是get。

  5. enctype 属性用来规定在发送表单数据之前如何对数据进行编码。不要和method弄混，一个内部自己的，一个外部的，在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data其它的使用默认的就好，如下：
    在这里插入图片描述

3. ajax提交form表单

  1. 如果使用表单提交数据，则会导致以下两个问题： 页面会发生跳转， 页面之前的状态和数据会丢失
    解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器。
  2. ajax获取表单元素，使用.submit,或者1使用.on(‘submit’ ),使用事件函数e.preventDefault()阻止表单的提交和跳转
  3. serialize() 函数的好处：可以一次性获取到表单中的所有的数据。在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！，后面调用url传递的时候，直接将其赋值给data，传入参数即可
$(表单选择器selector).serialize()
  1. 清空表单的写法（固定，记着）
 $(表单选择器)[0].reset()
  1. 如果不阻止表单的默认行为，那么提交之后会刷新页面，如果阻止了不会刷新，需要自己刷新，同时添加的时候注意，重复操作之前，需要选择到列表然后调用.empty()函数进行清空

4. 模板引擎（根据返回的数据动态生成结果）

  1. 模板引擎，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。常用的是art-template模板引擎，官网：http://aui.github.io/art-template/zh-cn/index.html
  2. 在浏览器中访问 http://aui.github.io/art-template/zh-cn/docs/installation.html 页面，找到下载链接后，鼠标右键，选择“链接另存为”，将 art-template 下载到本地，然后，通过 script 标签加载到网页上进行使用。
  3. 使用步骤：
    导入：
  <script src="./lib/template-web.js"></script>

定义数据：let data={name:value1}
定义模板，必须放在script标签里面，并且type需要写上text/html：

<script type="text/html" id="tpl-user">
    <h1>{{name}}</h1>
  </script>

调用 template 函数，第一个参数是模板的id，注意只用id，不用加#，第二个参数是渲染的数据，返回是加入数据后的标签

    let htmlStr = template('tpl-user', data)//这个data可以认为是res

渲染HTML结构,注意后面的show函数，通常之前会被默认隐藏掉，书写show函数后进行显示：

 <div id="container"></div>
  $('#container').html(htmlStr).show()

如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染，下述的输出语法都是放到模板标签里面的。 
{{@ value }}
如果要实现条件输出，则可以在 {{ }} 中使用 if … else if … /if 的方式，进行按需输出。
{{if 表达式}} 按需输出的内容 {{/if}}
{{if 表达式}} 按需输出的内容 {{else if 表达式}} 按需输出的内容 {{/if}}
如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问。（注意此时的index和value是固定写法）
{{each arr}}//直接协商res返回的数组名
    {{$index}} {{$value}}
{{/each}}
  1. 过滤器 的使用：
//再模板中书写
{{属性名 | filterName}}
//在js中定义过滤器函数：
template.defaults.imports.filterName = function(value){/*return处理的结果*/}
  1. 清空列表可以用 $(‘#list’).empty().hide() 进行清空

5. XHR的基本使用

  1. XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。
  2. 使用xhr发起GET请求步骤如下：
// 1. 创建 XHR 对象
let xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址（？后面可以携带传入的参数）
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&name=XXX')
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

其中readyState 属性，用来表示当前 Ajax 请求所处的状态，常用的状态入下:
在这里插入图片描述

  1. 对于上述ajax携带数据发起的请求，其实本质也都是用？拼接在url后面
  2. URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。URL编码原则的通俗理解：使用英文字符去表示非英文字符。使用举例如下：注意，浏览器会自动进行，因此我们在传参的时候可以传递中文，了解即可
encodeURI('黑马程序员')
// 输出字符串  %E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98
decodeURI('%E9%BB%91%E9%A9%AC')
// 输出字符串  黑马
  1. 使用xhr post数据写法如下：
// 1. 创建 xhr 对象
let 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=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

6. 数据交换格式

  1. 数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。常用xml和json。更常用json格式
  2. xml和html类似，但和html毫无关系。英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，也是一种标记语言。js中解析xml较为麻烦
  3. HTML 被设计用来描述网页上的内容，是网页内容的载体。XML 被设计用来传输和存储数据，是数据的载体
    • JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。
    • 作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。
    • 现状：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。
  5. json对象结构：用{}包裹，数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型只能是数字、字符串、布尔值、null、数组、对象6种类型，如果value中需要用到引号，也必须是双引号
  6. json数组结构：数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。同样引号也必须是双引号
  7. json中不能写注释，其值不能是undefined或者函数，其主要是用来在计算机与网络之间存储与传输数据。
  8. json与js对象之间的转换
//这是一个对象
let obj = {a: 'Hello', b: 'World'}

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

//把数据对象转换为字符串的过程，叫做序列化
let obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}
//把字符串转换为数据对象的过程，叫做反序列化
let json = JSON.stringify({a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'

7. 封装自己的ajax函数

  1. 代码举例如下，代替原来导入jq.js里面的数据交换的功能；：
function resolveData(data) {
  var arr = []
  for (var k in data) {
    var str = k + '=' + data[k]
    arr.push(str)
  }

  return arr.join('&')
}


//定义一个自己的ajax函数itheima
function itheima(options) {
  var xhr = new XMLHttpRequest()

  // 把外界传递过来的参数对象，转换为 查询字符串
  var qs = resolveData(options.data)

  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)
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}
//后续的调用举例：
 itheima({
      method: 'post',
      url: 'http://www.liulongbin.top:3006/api/addbook',
      data: {
        bookname: '水浒传',
        author: '施耐庵',
        publisher: '北京图书出版社'
      },
      success: function (res) {
        console.log(res)
      }
    })

8. XHR level2新特性

  1. L1版本的缺点:只支持文本数据的传输，无法用来读取和上传文件；传送和接收数据时，没有进度信息，只能提示有没有完成
  2. 设置请求时限：
let xhr = new XMLHttpRequest()
 xhr.timeout = 3000//单位毫秒
 xhr.ontimeout = function(event){
     alert('请求超时！')
 }
  1. FormData对象传输管理表单数据，个人理解：通常涉及到文件上传的时候使用这种方式，其它情况下还是考虑原来的方式
      // 1. 新建 FormData 对象
      let 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获取表单数据：

  // 1. 通过 DOM 操作，获取到 form 表单元素
    let form = document.querySelector('#form1')

    form.addEventListener('submit', function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault()

      // 创建 FormData，快速获取到 form 表单中的数据
      let fd = new FormData(form)

      let xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText))
        }
      }
    })
  1. 用户发送文件到服务器：
    // 1. 获取到文件上传按钮
    let btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      let files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      let fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])
      let xhr = new XMLHttpRequest()
      
       // 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {//必须是e.lengthComputable为true结果可计算的1时候使用
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComplete)
          // 动态设置进度条（可以使用bootstrap里面的属性）
          $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
        }
      }
      //上传成功后更改进度条的属性
       xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }


      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功（配合html显示出该图片）
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })
使用jq实现上述文件上传功能
  1. 使用jq上传文件的时候必须且只能使用ajax
 $('#btnUpload').on('click', function () {
        var files = $('#file1')[0].files
        if (files.length <= 0) {
          return alert('请选择文件后再上传！')
        }

        var fd = new FormData()
        fd.append('avatar', files[0])

        // 发起 jQuery 的 Ajax 请求，上传文件
        $.ajax({
          method: 'POST',
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          data: fd,
          //下述两行代码必须且固定
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res)
          }
        })
      })
    })

// 监听到Ajax请求被发起了
      $(document).ajaxStart(function () {
      })

      // 监听到 Ajax 完成的事件
      $(document).ajaxStop(function () {
      })

9. axios

  1. Axios 是专注于网络数据请求的库。相比于原生的 XMLHttpRequest 对象，axios 简单易用。相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。
  2. axios发起get请求，注意服务器返回的数据，使用之前记得先导入axios的js文件：
 // 请求的 URL 地址
 let url = 'http://www.liulongbin.top:3006/api/get'
 // 请求的参数对象
let paramsObj = { name: 'zs', age: 20 }
 // 调用 axios.get() 发起 GET 请求
 axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     let result = res.data
 })
  1. axios 发起post请求：
// 请求的 URL 地址
let url = 'http://www.liulongbin.top:3006/api/post'
 // 要提交到服务器的数据
let dataObj = { location: '北京', address: '顺义' }
 // 调用 axios.post() 发起 POST 请求
 axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     let result = res.data
      })
  1. 直接使用axios 发请求：
 axios({
     method: '请求类型',
     url: '请求的URL地址',
     //两个选择其中的一个即可
     data: { /* POST数据 */ },
     params: { /* GET参数 */ }
 }) .then(function (res) {//成功运行后执行的函数
        console.log(res.data)
      })

10. 同源策略与跨域

  1. 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。反之，则是跨域。如果没有特别指出端口号，默认是80
  2. 同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。如：A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互。
  3. 浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！
  4. 解决跨域的方案：
    • JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。
    • CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。
JSONP
  1. script 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。因此，JSONP 的实现原理，就是通过 script 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。，jsonp不属于ajax
  2. src请求的js路径后面可以?callback=***来指定外部文件可以调用的函数名字，返回对哪个函数的调用，如:
  <script src="./js/getdata.js?callback=fun"></script>
  1. jq中实现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)
    }
 })
  1. jq中jsonp的实现原理是：在发起 JSONP 请求的时候，动态向 header中 append 一个 script标签；在 JSONP 请求成功以后，动态从 header中移除刚才 append 进去的 script标签；

11.防抖与节流

  1. 防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。可以保证多次调用时，只请求一次，节省资源。常用场景：用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；
  2. 防抖的代码举例如下：
var timer = null                    // 1. 防抖动的 timer
 function debounceSearch(keywords) { // 2. 定义防抖的函数
    timer = setTimeout(function() {
    // 发起 JSONP 请求的函数
    getSuggestList(keywords)
    }, 500)
 }
 $('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timer
    clearTimeout(timer)
    // ...省略其他代码
    debounceSearch(keywords)//延时执行发起请求的函数
 })
  1. 缓存搜索数据，举例如下：
  1. 定义全局缓存对象
  var cacheObj = {} 
  2. 将搜索结果保存到缓存对象中
  var k = $('#ipt').val().trim()
   cacheObj[k] = res
  3. 优先从缓存中获取搜索建议
    if (cacheObj[keywords]) {
       return renderSuggestList(cacheObj[keywords])
    }
  1. 节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率,鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；常用的场景如下：懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
  2. 节流阀：节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。每次执行操作前，必须先判断节流阀是否为空。
  3. 举例如下：
$(function() {
  var angel = $('#angel')
  var timer = null // 1.预定义一个 timer 节流阀
  $(document).on('mousemove', function(e) {
    if (timer) { return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒，因此就不执行
    timer = setTimeout(function() {
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
      timer = null // 2.当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器
    }, 16)
  })
})

12. HTTP协议

简介
  1. 通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol） ，简称 HTTP 协议。
  2. 客户端要以HTTP协议要求的格式把数据提交到服务器，服务器要以HTTP协议要求的格式把内容响应给客户端。HTTP 协议采用了 请求/响应 的交互模型。
HTTP请求消息
  1. 客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息。HTTP 请求消息又叫做 HTTP 请求报文。
  2. HTTP 请求消息由请求行（request line）、请求头部（ header ） 、空行 和 请求体 4 个部分组成。
    在这里插入图片描述
  3. 请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。常用的如下：
    在这里插入图片描述
    关于更多请求头字段的描述，可以查看 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers
  4. 最后一个请求头字段的后面是一个空行。用来分隔请求头部与请求体
  5. 注意：只有 POST 请求才有请求体，GET 请求没有请求体！
HTTP响应消息

  1. 响应消息就是服务器响应给客户端的消息内容，也叫作响应报文。主要构成如下：
    在这里插入图片描述

  2. 响应头部：记录响应的基本信息，关于更多响应头字段的描述，可以查看 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers，其它的基本和请求报文一样，但是，post和get是都具有响应体的。

HTTP请求方式

用来表明要对服务器上的资源执行的操作：
在这里插入图片描述

HTTP响应状态码
  1. HTTP 响应状态码（HTTP Status Code），用来标识响应的状态。完整的 HTTP 响应状态码，可以参考 MDN 官方文档 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
  2. HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分。
    在这里插入图片描述
  3. 2-5开头常用的如下：
    在这里插入图片描述
★追梦赤子心★
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端_网页编程 HTTP协议（进阶）
←か淡定☆ ヾ 的博客
08-30 291
文章目录内容1. HTTP协议简介1.1 什么是通信1.1.1 现实生活中的通信1.1.2 互联网中的通信1.2 什么是通信协议1.2.1 现实生活中的通信协议1.2.2 互联网中的通信协议1.3 HTTP1.3.1 什么是HTTP协议1.3.2 HTTP协议的交互模式2. HTTP请求消息2.1 什么是HTTP请求消息2.2 HTTP请求消息的组成部分2.2.1 请求行2.2.2 请求头部2.2.3 空行2.3.4 请求体2.3.5 小结3. HTTP响应消息3.1 什么是HTTP响应消息3.2 HTTP
前后端数据交互与HTTP协议
visibleforest的博客
08-19 1427
一、前后端通信的过程 1.什么是前后端通信： 1）前端和后端数据交互的过程 举例：后端向前端发生数据——访问页面，前端向后端发送数据——用户注册 2）浏览器与服务器之间数据交互的过程 2.概念解释 1）前端：浏览器端 2）客户端：只要能和服务器通信的就叫客户端 3）后端：服务器端 二、前后端的通信方式 1.使用浏览器访问网页（了解即可） 2.一些标签：link/img/script 当浏览器解析到这些标签时就会再次向服务器发送请求； 3.a标签和form标签等，浏览器解析到.
ajax 和 http
最新发布
m0_52289188的博客
11-25 917
`headers`：可选的，是即将被发送的自定义请求头，类型为 Object对象，例如：`{'Content-Type': 'Application/json'}`- `responseType`: 可选的，表示服务器响应的数据类型，可以是 'json', 'text' 等，默认值为 'json'注意，这里有很多可以做特殊处理，比如说，请求结束，成功，超时，出错，还可以设置请求头，请求数据类型。- `method`：可选的，是创建请求时使用的方法，类型为 字符串，默认值为: 'get'
【前后端交互与HTTP协议】（HTTP协议、本地存储、Ajax&Fetch 与跨域请求）
weixin_46531416的博客
07-24 2066
每一次的前后端通信，前端需要主动向后端发出请求，后端接收到前端的请求后，可以给出响应（HTTP是一个请求－响应协议）
HTTP 下的前后端交互
曹立禄的个人博客
08-26 454
互联网上半场的打法可以说是营销和资本驱动（你在选择安装哪个APP）。而互联网的下半场是数据和技术在驱动（你在选择卸载哪个APP）。 HTTP 版本对比 HTTP 版本的演化到现在为止一种经历了四个版本，分别是 HTTP/0.9，HTTP/1.0，HTTP/1.1 和 HTTP/2.0。现在使用最广泛的仍然是 1.1 版本，但是 2.0 版本也慢慢的被各个网站接纳和使用。下面分别介绍上面几个版本的区别。 1991年 HTTP/0.9 仅支持 GET 请求，不支持请求头 1996年 HTTP/1.0 默
Ajax学习笔记整理
12-09
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. Ajax历史…...
javascript学习笔记（七）Ajax和Http状态码
01-19
Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术，最早由Google公司在谷歌地图里使用，并迅速风靡。 AJAX是不能跨域的，如需跨域，可以使用document.domain=’a.com’；或者使用服务器代理，代理...
那些年，我还在学习Ajax 学习笔记
10-28
Ajax，全称为异步JavaScript和XML（Asynchronous JavaScript and XML），是web开发中的一个核心技术，尤其对于提升用户体验至关重要。无论你是在ASP.NET、JavaWeb还是PHP的环境中工作，掌握Ajax都是不可或缺的技能。...
ajax-day01.rar_达内开发学习笔记
09-20
在“ajax-day01.rar_达内开发学习笔记”这个压缩包中，包含了第一天学习Ajax的基础内容，旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术，而是一组技术的组合，...
jquery中ajax学习笔记一
01-21
AJAX简单介绍： AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），是指一种创建交互式网页应用的网页开发技术。通过 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器...
关于ajax请求中路径后缀的问题
qq_33380252的博客
10-01 1566
昨天下午遇到一个问题，前台写了ajax方法，后台进行处理，但有个奇怪的地方就是后台接受不到传递过来的参数，是通过放到data参数里面传递的，然后我首先想着是不是获取数据的方法有问题，后来改了几种方式还是不行，其中用get方法就可以很顺利的接受到参数，用post就不行，在url中拼上去的参数也是可以的。通过在谷歌的NetWork中查看请求发现，用post请求的时候进行了两次，第一次是我写的Post请...
使用Ajax发送http请求（get&post请求）
weixin_33697898的博客
02-28 1126
本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。 以下是正文。 同步和异步 同步和异步的概念 同步：必须等待前面的任务完成，才能继续后面的任务。 异步：不受当前任务的影响。 拿排队举例： 同步：在银行排队时，只有等到你了，才能够去处理业务。 异步：在排队的时候，可以玩手机。 异步更新网站 我们在访问一个普通的网站时，当...
前端之Ajax(HTTP)
wzj_110的博客
06-15 931
一，传统的网络应用     的采用的英文同步响应模式 -------即：一次HTTP请求对应一个新的页面，每次请求都会丢弃当前页面来重新加载新页面！     案例1：仔细观察一个form表单的提交，你就会发现，一旦用户点击“submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了，如果不幸由于网络太慢或者其他原因，就会得到一个404页面。     弊端(特点...
前后端交互基本知识
chaochao_li的博客
12-13 1329
前端代码中的 name 属性 loginuser loginpassword 前端ajax调用后台接口 这里是第一个坑 因为我用的是HBuilder默认是8020端口然后访问前端页面的时候 http://127.0.0.1:8020/hello/aaa/hello.html端口号是8020 但是我后端的tomact服务器端口号是8080 最后解决方法就是带上端口号进行请求 后端代码 appli...
AJAX—HTTP协议原理详解
Jurous的博客
08-17 144
HTTP协议原理详解
HTTP和Ajax详解
L081773的博客
06-09 226
ajax
一般http请求与ajax请求
xiaoxiao1777的博客
04-27 715
1.ajax请求是一种特别的http请求 2.对服务端来说，没有任何区别，因为服务器不管你是哪种请求，区别只在于浏览器，因为浏览器会做两件事情，负责发送请求和接收响应数据并处理，当然它是要区分的，如果是ajax请求，就交给内置的ajax引擎(专门负责处理ajax的代码)去发送，如果是一般的http请求，交给对应的引擎去发送，接收后端的响应后，下一步就是去显示 3.浏览器端发送请求，只有XHR或...
HTTP协议，ajax小记
u012183426的博客
12-03 275
一，HTTP小记： 理解RESTful，了解项目风格，阮一峰博客http://www.ruanyifeng.com/blog/2014/05/restful_api 在network中查看每一次请求和响应过程。 请求方法：GET,POST,PUT,DELETE,HEAD,TRACE,CONNECT,OPTIONS 请求主体：只有POST,PUT请求有主体。形式1：uname = tony&...
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值