互联网通信基础与Ajax篇

@追求卓越

已于 2022-03-04 18:25:14 修改

阅读量635

点赞数

文章标签：服务器网络 http

于 2021-12-28 23:09:24 首次发布

本文链接：https://blog.csdn.net/weixin_52519753/article/details/122204008

版权

互联网通信

1.定义:两台计算机通过网络实现文件共享的行为

2.角色划分:

1.客户端计算机;用于发生请求,可以索取资源的计算机

2.服务端计算机:用于接收请求,是存放和提供资源的电脑,而且比普通电脑性能要好

3.模型(通信需要依靠软件进行)

1.C/S通信模型:

client software;客户端软件;(1) 安装在客户端计算机上;(2)帮助客户端计算机向指定的服务器发送请求,索取资源;(3)帮助客户端把服务器发回来的二进制信息装换为图片视频.

server software(服务器也是计算机电脑)服务器软件,服务端软件安装在服务端的计算器上.(2)用来接收特定客户端的请求,之后在服务器上寻找客户端需要的资源,并把找到的内容,解析为二进制数据,通过发回去给客户端,客户端再进行转化为图片视频

场景: 个人娱乐类型:微信,淘宝/京东,优酷/b站,LOL.企业办公比较少用

优点: 1.安全性高 2.降低服务端的计算机工作压力

缺点:1.软件的运行对电脑性能有要求,性能要求高的软件有的客户端电脑运行不起来.

2.时常要更新,较为繁琐,

2.B/S通信模型:

B:browser 浏览器

1.可以向任意服务器发送请求,索要文件. 2.可以将服务端发回的二进制数据解析为文字,图片 3.安装在浏览器上面

S:soft software服务器软件

1.服务器软件安装在服务器端上

2.可以接收任意浏览器服务器的请求,之后在服务器寻找资源,之后以二进制的数据发回去给客户端

优点:1.对电脑要求不高,不会增加用户获得服务的成本 2.几乎不用更新

缺点:1.服务器工作压力大,大量浏览器进行访问

共享资源文件

1.可以通过网络进行文件传输的文件,称为共享资源文件.

所有文件都可以通过网络共享,所以所有文件都是共享资源文件

2.http服务器下把共享资源文件分类

(1)静态资源文件

如果文档内容是固定的,这些文件称为静态资源文件,例如:图片,视频,文字(也就是数据,商品分类等等)

也有代码命令,如果这些代码命令只能在浏览器编译和运行,这些文件称为静态资源,例如html,css,js

(2)动态资源文件

如果文件存放命令 ,并且文件不可以浏览器编译通过;只能在服务端计算机编译通过

3、动态资源文件与静态资源文件的区别

（1）静态资源文件在被调用时，HTTP服务器通过输出流将静态资源文件中的内容或命令以二进制的形式推送到发起请求的浏览器上

（2）动态资源文件在被调用时，HTTP服务器首先会创建出当前class文件的实例对象，并通过实例对象调用对应的方法解决用户不同的需求，最后将运行结果以二进制的形式通过输出流推送回发起请求的浏览器上。

也类似与django的views.py文件里面的代码,主要是用来处理用户发送的请求,进行分析处理,并且把结果返回给客户端

 pages = models.shopcar.objects.all()
    count = pages.count()
    return render(request, "shopcar.html", {"CarList": pages, "Count": count})

请添加图片描述

6、开发人员在互联网通信流程中的担任的职责

（1）控制浏览器发送请求行为

        控制浏览器发送请求的地址

        控制浏览器发送请求的方式

        控制浏览器发送请求携带的参数

（2）控制浏览器接受结果的行为

      控制浏览器采用对应的编译器将二进制数据解析为图片，视频等

     控制浏览器将解析的内容或命令在指定的窗口进行展示（全局刷新展示与局部刷新展示）

      控制用户和浏览器之间的交互

（3）开发动态资源文件用来解决不同用户的不同需求

请添加图片描述
获取每一个资源都是

请求—处理----响应

这三个步骤

通信过程

URL地址中文叫统一资源定位符,标识于互联网上资源唯一的存放位置,类似于身份证,只有通过正确的url才能定位到的资源位置,找到资源.
由三个部分组成,第一是客户端到服务器之间的通信协议;第二是存有该资源的服务器名称,第三资源在服务器的存放位置,
例如;https://www.bilibili.com/video/BV1zs411h7
我们可以通过浏览器开发者的工具network查看客户端与服务器的交互
如果要在网页中请求服务器上的数据资源,则需要XMLHttpRequest对象,是浏览器提供的js成员,可以请求服务器的数据,let xhr=new XMLHttpRequest()
请求方式有很多种,有get和post请求,
1. get请求用于向服务器索要资源,例如:根据服务器获取img,css,html,js等等文件;
2. post请求用于向服务器提交数据(往服务器发送资源)例如:登录是向服务器提交登录信息(因为要检查你填写的的用户和密码是否存在和正确),还有注册时向服务器提交注册信息,添加用户提交用户的信息等等数据提交操作

Ajax

含义:异步的js和XML,意思就是:在网页中利用浏览器提供的XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax.
为什么学:css,html,js只可以把网页做好看,利用ajax可以实现网页与服务器进行数据交互传输.
JQ的的ajax对XMLHttpRequest对象进行封装,
JQ中的ajax交互的办法

$.get()的方式

// 可以浏览器调试器的xhr查看请求回来的数据
// $.get(url,[data],[callback]) data是数据,callback是回调函数;参数是选填,回调函数是选填
// get数据是可以在url中找到的,而post请求在url是看不到的
// id是根据data数据筛选出合适的数据

$(function () {
      $('#btn').on('click', function () {
        $.get('http://www.liulongbin.top:3006/api/getbooks',{id:5987} function (res) {
          console.log(res.data)
          // 返回的数据会返回一层壳,需要res.data才可以进入数据里面
        })
 })
    })

$.post()

// post的参数要按照格式填写, 如果有空缺的参数, 就有报错情况
// 他会根据参数,填写数据库

  
  $(function () {
      $('#btn').on('click', function () {$.post('http://www.liulongbin.top:3006/api/addbook', { op: 'op', bookname: '经济水浒传', author: '施耐庵', publisher: '天津图书出版社' }, function (res) {
          console.log(res);
        })
        })
    })

$.ajax()

// $.ajax是更加灵活的,可以指定请求类型,type请求类型;url地址;data:{},success:function(){},success

 $(function () {
      $('#btn').on('click', function () {
 	$.ajax({ type: 'GET', url: "http://www.liulongbin.top:3006/api/getbooks", data: { id: 6023 }, success: function (res) { console.log(res.data); }
 	 })
 	})

Postman的使用

get方法

post方法()需要点击body里面的第二个)

接口文档基本格式

下面是一个例子:

1.5.1. 根据分类编号获取对应的商品列表

请求路径：goodslist
请求方法：get
请求参数

参数名	参数说明	备注
category_id	分类编号
last_id	最后一个商品的编号，默认为0

响应参数

参数名	参数说明	备注
code	状态码	0失败 1成功
msg	提示信息
url	请求源地址
data	商品列表数组

响应数据

{
  "code": 1,
  "msg": "",
  "data": [
    {
      "id": 100,
      "goods_category_id": 2,
      "name": "商品100",
      "sell_point": "",
      "price": "998.00",
      "num": 200,
      "image": "http://tpadmin.test/static/uploads/goods/goods_image/2020/05/16/d4ad9d92f2962c5f697aa5638c23b5e7.jpg",
      "status": 1,
      "content": "",
      "album": "goods/goods_album/2020/05/16/a585ad1816bbb06db574206b86994469.jpg",
      "delete_time": null,
      "create_time": "2020-05-16 16:43:14",
      "update_time": "2020-05-16 16:46:00"
    },
    ......
  ],
  "url": "http://localhost:10086/",
  "wait": 3
}

Ajax的原理

Ajax是利用XMlHttpRequest(xhr),这个是浏览器提供的js对象,通过他可以请求服务器上的数据

下面有源代码:
在这里插入图片描述

 // 1.创建xhr对象
    let xhr = new XMLHttpRequest();
    // 2.调用open()
    // ?问号后面是参数,
    // 这里的参数是直接加到url后面
    // http://www.liulongbin.top:3006/api/getbooks?id=1&name=lqc


    // 在$.get()中的[data]就是把里面的数据填到xmlhttprequest的url的后面,两者是相连通的
    // 就连vue的axios也是这个道理,用{id:1}的键值对传递参数,最后拼接到url之中
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
    xhr.send()
    xhr.onreadystatechange = function () {
      // readyState为0的时候,let xhr = new XMLHttpRequest();创建完成
      // readyState为1的时候,open()已经被调用了
      // readyState为2的时候,send()调用
      //  readyState为3的时候,表示完成部分请求
      // readyState表示请求完成,表示数据传输完成或者失败(所以需要辅助status的值,判断他是成功还是失败)
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取请求的数据
        console.log(xhr.responseText);
      }
    }

发起POST请求
1.application/x-www-from-urlencoded,会将表单内的数据转换为键值对，&分隔.

  let xhr = new XMLHttpRequest();
    xhr.open('POST', "http://www.liulongbin.top:3006/api/addbook")

    xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencode')
    xhr.send('bookname=水浒传&auther=施耐庵&publisher=天津出版社')
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {

        // 获取请求的数据
        console.log(xhr);
      }
    }

// send()是用来收集要发送的数据,例如 post 的的数据还有form表单的input数据都在这个填写之后进行发送.

URL编码

1.定义和原则:URL只可以出现符号数字,英文字母的符号,如果出现中文那么需要进行编码,转换成为符合规定的符号,
请添加图片描述
编码转换

console.log(encodeURI('你好'));
console.log(decodeURI("%E4%BD%A0%E5%A5%BD"));

数据交换格式(Json)

1.定义:客户端与服务端数据交换的格式
2. XML是可拓展的标记语言,Html也是标记语言,html是网页语言,xml用来传输数据和储存数据的,是数据载体.xml的与数据无关的标签多,js解析麻烦.已经很少用了,现在都是用json
3. json叫javascript object Notation ,Javascript对象表示法,里面是由数组和对象构成的,是轻量级文本数据,优点是更小,更快,更容易解析,没有xml那么多标签
在这里插入图片描述

左边是错误的,右边是正确的,value不可以是undinfind和函数,加的引号必须是双引号.想要加空可以弄成null
注意事项:

json与js对象的关系

1.json是js对象的字符串表现形式,
在这里插入图片描述

 // js的对象
    let time = { a: 1, b: 2, c: 3 }
    // json
    let time1 = '{"a":1,"b":2,"c":3}'

  // 从json对象变成js对象
    a1 = JSON.parse(time1)
    console.log(a1);
    // js对象变成json对象
    let i = JSON.stringify(time)
    console.log(i);

第一个有下拉框的是js对象,第二个是json对象
在这里插入图片描述
序列化和反序列化的概念:

Xhr Level2 的新特性

1.实现Http的请求时限

var xhr = new XMLHttpRequest()
    xhr.timeout = 3000
    xhr.ontimeout = function () {
      console.log("超时了");
    }
    xhr.open('GET', "http://www.liulongbin.top:3006/api/getbooks")
    xhr.send()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求回来的是json对象
        console.log(xhr.responseText);
        let parse = JSON.parse(xhr.responseText)
        console.log(parse.data);


      }
    }

2 .上传文件
3.查看传输进度
4.FormData对象

同源

1.网站的协议,域名,端口相同就是同源的网站,http:www.baidu.com/index.html
默认端口是80.说明他们是同一个服务器的
在这里插入图片描述
tip:
一、localStorage是什么？
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作本地存储来的，解决了cookie占用带宽和存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage的大小，一般浏览器支持的是5M，但在不同的浏览器中会有所不同。

二、localStorage的优点和缺点
优点
1、localStorage突破了cookie的4K限制。
2、localStorage可以将请求的数据直接存储到本地，这个相当于一个5M大小的前端页面数据库，相比于cookie可以节约带宽。
在这里插入图片描述
同源策略是一个安全功能,可以拦截cookie和ajax请求.

跨域描述的是不同服务器的网站


$.ajax({
      method: 'GET',
      url: "http://ajax.frontend.itheima.net:3006/api/jsonp",
      data: {
        name: 'zs',
        age: 18
      },
      success(res) {
        console.log(res);
      }
    })

jsonp原理

jsonp支持get请求,不支持post.他和ajax没有关系,他只是一个js脚本请求
1.script里面的东西是共享的


<script>
    function success(res) {
      console.log(res);
    }
  </script>
  <script src="./getdata.js"></script>

getdata.js文件

success({ name: 'lqc' })

请添加图片描述

@追求卓越

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
互联网通信基础与Ajax篇

互联网通信技术是以计算机作为通信的基本载体，以网络为通道，经过互联网进行通信的一种网络技术。不论是声音、图片还是影片图形，都可以在互联网上传输，实现资源的共享。互联网通信技术打破了传统的地域和空间的限制，使得信息可以快速的传到目的地。
复制链接

扫一扫