Ajax学习

客户端与服务器：

在上网过程中客户端负责获取数据，服务器负责发送和接受数据

url的组成：

通信协议+服务器地址+路径

抓包

通过F12开发人员工具，选择网络选项进行数据获取

资源分为静态资源和动态资源，静态资源指的是页面中img、js、css等一切固定的内容，动态资源指的是从服务器中请求到的数据内容

ajax是一种异步请求数据的web开发技术（在不需要重新刷新页面的情况下，通过异步请求加载后台数据，实现局部刷新）

Portman可以在不写任何代码的情况下更快捷的从某个服务器获取到数据，用来对接口的调用和调试

接口文档

什么是接口文档

1、项目开发过程中前后端工程师有一个统一的文件进行沟通交流开发2、项目维护中或者项目人员更迭，方便后期人员查看、维护

接口分为四部分：方法、uri、请求参数、返回参数

表单的组成

• 表单标签

• 表单域：包含各种框

• 表单按钮

form 标签的属性

• action：表单数据提交到的路径，向何处发送表单

• target：_self 在本窗扣进行跳转；__blank在新的窗口进行跳转

• method：规定表单数据以何种方式提交到 action URL，默认值是 get

  • get：提交少量、简单的数据

  • post：提交大量、复杂的数据，或包含文件上传数据

• enctype：提交表单数据之间，对表单数据进行编码

  • application/x-www-form-urlencoded：发送之前编码所有字符（默认）

  • multipart/form-data：不对字符进行编码，在使用包含文件上传控件的表单时，必须使用该值

  • ....最后一个基本不用

表单同步提交

• 点击 submit 按钮时，触发表单提交的操作，从而跳转到 action URL 的行为

• 表单同步提交的缺点：

  • 提交数据立即跳转网页，用户体验不好

  • 跳转页面后，原本页面的数据、信息会被清除

• 缺点的解决方法：

  • 表单只用来收集数据，用 ajax 来将数据提交到服务器

ajax 提交表单数据

• 监听表单提交事件,并获取表单数据

  $('#form1').on('submit',function(e){
    alert('监听表单提交事件成功')
    // 阻止表单默认行为（提交）
    e.preventDefault()
    获取表单数据
    $(this).serialize()
  })

模板引擎

• 概念：根据程序员设定的 模板结构 和 数据 ，渲染页面

• 好处：

  • 减少了字符串的拼接

  • 使代码结构更加清晰

  • 使代码便于阅读和维护

• 使用步骤：

  • 引入 template-web.js 文件

  • 定义数据（要渲染的数据）

  • 定义模板

    • 模板的 HTML 结构，必须定义到 script 标签中，注意：需要把 type 属性改成 text/html

    • 给模板添加一个 id

    • 模板里面如果需要使用传入的数据，利用 {{}}来实现

    • 调用 template 函数 ，函数的返回值就是拼接好的字符串

      var htmlStr=template('id',data)

    • 渲染 HTML 结构

模板引擎标准语法

• {{}}

• 输出

  {{value}}
  {{obj.key}}
  {{obj['key']}}
  {{a?b:c}}
  {{a||b}}
  {{a+b}}

• 原文输出：如果输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出的方法，才保证 HTML 标签被真正的渲染

  {{@ value}}

• 条件输出

  {{if value}}   {{/if}}
  {{if value1}}  {{else if value2}}   {{/if}}

• 循环输出

  {{each arr}}
      {{$index}}---{{$value}}
  {{/each}}

• 过滤器

  {{value | filterName}}
  // 定义过滤器的语法
  template.defaults.imports.filterName=function(value){
    return 处理的结果
  }

  ​

1. XMLHttpRequest对象

xhr对象的使用

步骤

• 创建 xhr 对象
• 调用 xhr.open() 函数
• 调用 xhr.send() 函数
• 监听 xhr.onreadystatechange 事件

<script>
//发起get请求
    ;let xhr = new XMLHttpRequest() // 创建xhr对象
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks') // 使用open函数
    xhr.send() // 使用send函数
    xhr.onreadystatechange = () => {
        // readyState 请求状态
        ;if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText)
        }
    }
// 发起post请求
;在open下一行设置Content-Type属性
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 在send内填写参数
;xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')

// 查询字符串
var xhr = new XMLHttpRequest()
// 这种在 URL 地址后面拼接的参数，叫做查询字符串。
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
xhr.send()
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
     console.log(xhr.responseText)
  }
}
</script>

了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。 当前只需了解值等于4时 , 请求完成.

2. 数据交换格式 JSON

前端领域 , 经常提及的数据交换格式分别是XML和JSON , 实际工作用的基本都是JSON

-XML

• XML也是一种标记语言 , 但和HTML没有任何关系
• XML用来存储和传输数据 , HTML用来展示数据
• XML格式臃肿 , 体积大 , 传输效率低 , 在JS中解析比较麻烦

-JSON(重要)

JSON的本质就是字符串 , 作用类似XML , 传输和存储数据 , 但JSON的体积更小 , 传输速度更快 , 解析简单. JSON内部的值可以是数字 , 字符串 , 布尔值 , null , 数组 , 对象 , 键必须用双引号包裹 , 值如果是字符串也必须双引

JSON的两种结构:

{
    "name": "zs",
    "age": 18
};

// 数组结构
["java","python","c++"]
[100,200,300]
[true,false,null]

注意: 以上结构都要包裹在引号内

JSON对象和JSON字符串的相互转换 JSON.parse() 转换为对象(反序列化) JSON.stringify() 转换为字符串(序列化)

3. XMLHttpRequest Level2新特性

• timeout 设置超时时间 单位毫秒
• ontimeout 超过设定时间执行的函数

H5新增的FormData对象 可以用于上传文件

<script>
;// 获取表单中所有数据
;let fd = new FormData(传入原生form元素);
// 获取文件上传框中所有文件
$('#file').files[0]
</script>

什么是同源

如果两个页面的协议、域名、端口都相同，则两个页面具有相同的源（老乡关系）

当一个网页的域名后没有跟（：数字）时，则这个地址的端口默认为80

什么是同源策略

同源策略使浏览器提供的一个安全功能，用于隔离潜在恶意文件的重要安全机制

指的是一个网站的脚本，不允许和非同源网站之间进行资源的交互：

1.无法读取非同源网页的cookie、LocalStoreage和indexedDB

2.无法接触非同源网页的DOM

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

什么是跨域

当两个页面的协议、域名、端口有一种不一致就是跨域（外地关系）

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

浏览器是可以发起跨域请求的，被请求的服务器也会正常接受并相应回数据，但会被浏览器拦截到，从而无法被页面获取

 

JSONP

只支持GET请求，不支持POST

本质是js脚本，不是Ajax

实现原理

通过script标签的src属性，请求跨域的数据接口，并通过函数调用接受跨域接口响应回来的数据

防抖

当事件触发后，延迟n秒后再执行回调，如果在延迟时间段中事件再次触发，则会重新计时

实现防抖

1.定义延时器的id

2.定义防抖的函数

3.触发事件时清空定时器

实现缓存

1.定义全局缓存对象

2.将结果通过键值对的形式保存到缓存对象

3.在向服务器请求数据之前先判定缓存中是否有这个属性，如果有直接读取

节流

在一段时间内，事件被重复触发，只执行一次

实现节流

1.定义全局节流变量

2.表示可以执行下次操作；不为空，表示不能执行下次操作

3.当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作

4.每次执行操作前，必须先判断节流阀是否为空0.

防抖和节流

当事件被重复触发时，防抖只有最后一次生效，前面不管触发多少次都会被忽略，节省请求资源（王者荣耀重复回城效果）

节流会减少事件触发的频率（王者荣耀攻击按钮）