Skip to main content

前言

【内容】

【目的】

【学习资源】

原生AJAX

关于AJAX​

啥是AJAX？​

  • 全称为 Asynchronous JavaScript And XML（异步的 JS 和 XML）

【==注意==】AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

能干啥？​

  • 可以在浏览器中向服务器发送异步请求
  • 无刷新获取数据

【拓展】关于XML​

啥是XML？​

  • 可扩展标记语言

【拓展】XML和HTML

  • 【共同点】
    • 都是由标签构成的
  • 【不同点】
XML（可扩展标记语言）HTML（超文本标记语言）
标签没有预定义标签， 全都是自定义标签，用来表示一些数据。都是预定义标签
作用用来传输数据用来在网页中呈现数据的

能干啥？​

  • 用来传输和存储数据

    【示例】用XML表示:一个学生数据：name = “孙悟空” ; age = 18 ; gender = "男“；

    <student>

    	<name>孙悟空</name>

    	<age>18</age>

    	<gender>男</gender>

    </student>

【==注意==】现在已经被JSON取代了

  • 【示例】用JSON表示:一个学生数据：name = “孙悟空” ; age = 18 ; gender = "男“；

    {"name":"孙悟空","age":18,"gender":"男"}

AJAX的特点​

优点​

  • 可以无需刷新页面而与服务器端进行通信。
  • 允许你根据用户事件来更新部分页面内容。
    • 【疑问】事件包括哪些？
      • 鼠标事件
      • 键盘事件
      • 表单事件
      • 文档事件

缺点​

  • 没有浏览历史，不能回退
  • 存在跨域问题(同源)
    • 【疑问】什么是跨域？
      • 在一个服务向另一个服务发送请求，Ajax默认是不允许
  • SEO 不友好
    • 【疑问】什么是SEO?
      • 搜索引擎优化
    • 【疑问】为什么不友好？
      • 数据无法爬虫爬到
        • 【原因】这些数据都是Ajax异步请求得到的结果
          • 【解释】源代码第一次请求，源代码接口里是没有数据的
            • 【疑问】源代码是什么？
              • 响应体，响应体就是HTTP响应的一部分
            • 【疑问】那是如何在网页中看到数据的呢？
              • 通过Ajax向服务端发送请求，服务端返回结果
              • 然后通过JS动态创建到页面当中去，因为是动态创建，所以爬虫无法爬到数据

HTTP协议请求报文与响应文本结构​

啥是HTTP协议？​

  • 超文本传输协议（HyperText Transfer Protocol）
    • 【疑问】啥是协议？
      • 就是约定（规则）

用来干啥？​

  • 协议详细规定了浏览器和万维网服务器之间的相互通信规则

HTTP协议主要约定两个内容​

请求​
啥是请求？​

  • 浏览器给服务器发送的内容

    • 发送的内容又称请求报文

      【示例格式】

      行		POST  /s?ie=utf-8  HTTP/1.1 
      头 		Host: atguigu.com
      		Cookie: name=guigu
      		Content-type: application/x-www-form-urlencoded
              User-Agent: chrome 83
      空行
      体		username=admin&password=admin

      行

      行

      • 包括三个部分

        1. 请求类型：GET、POST、DELETE等

        2. URL路径：

        3. HTTP协议版本

      头

      【格式】

      • 名字：空格 值

      空行

      • 固定必须要有

      请求体

      • 如果行中的请求类型为GET：请求体可以为空
      • 如果行中的请求类型为POST：请求体可以不为空
响应​
啥是响应？​

  • 服务端给浏览返回的结果

    • 返回的结果又称响应报文

      【示例格式】

      行      HTTP/1.1  200  OK
      头      Content-Type: text/html;charset=utf-8
              Content-length: 2048
              Content-encoding: gzip
      空行    
      体      <html>
                  <head>
                  </head>
                  <body>
                      <h1>lao-jiawei</h1>
                  </body>
              </html>

      行

      • 包括三个部分

        1. HTTP协议版本

        2. 响应状态码

          响应状态码含义
          200OK
          404找不到页面
          403没有权限，禁止
          401未授权
          500内部错误

        3. 响应状态字符串（与状态码是对应的）

      头

      • 对响应体内容进行相关描述

      空行

      • 必须要有

      响应体

      • 主要的返回结果
        • html语法内容

结语

0%