Ajax 笔记

最新推荐文章于 2023-11-26 16:20:17 发布

znhyXYG

最新推荐文章于 2023-11-26 16:20:17 发布

阅读量126

点赞数

文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/znhyXYG/article/details/122149372

版权

一、服务器相关概念

1、客户端与服务器

客户端是用户自身的电脑，服务器是存放资源信息的一个（大型电脑）

2、URL地址的概念&组成

URL的组成

客户端与服务器之间的 通信协议
存有该资源的 服务器名称（主机名）
资源在服务器上 具体的存放位置（请求路径）

客户端与服务器通信过程

客户端与服务器之间的通讯过程，分为： 请求-处理-响应 三个步骤
网页中每一个资源，都是通过 请求-处理-响应 的方式从服务器获取回来的

域名的作用

引导服务器找到具体的数据，并返回给客户端，

www.back.com/storage/avaetr/hello.txt

www.back.com服务器会通过该域名找到一个具体的文件夹

/storage/avaetr/hello.txt 会找到具体的文件

服务器处理数据分为这两步

调试工具

步骤：

打开Chorme浏览器
Ctrl + Shift + I（F12） 打开 Chrome 的开发者工具
切换到 Network 面板
选中Doc 页签
刷新页面，分析客户端与服务器的通讯过程

资源的请求方式

最常见的两种请求方式分别是 get 和 post 请求

get 请求，通常用于 获取服务器资源（要资源）

post 请求，通常用于 向服务器提交数据（送资源）

二、了解`Ajax`

为什么要学`Ajax`

Ajax能让我们轻松实现网页与 服务器之间的 数据交互

Ajax应该用场景（了解）

1、通过 ajax 的形式，动态 检测用户名是否被占用

2、通过 ajax 的形式，动态 加载搜索提示列表

3、通过 ajax 的形式，根据页码值动态刷新表格的数据

4、数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互

三、`jQuery`中的Ajax

jQuery中发起 Ajax 请求最常用的三个方法如下：

$.get() get方式请求，用于获取数据
$.post() post方式请求，用于提交数据
$.ajax() 比较综合，既可以获取数据，又可以提交数据

$.get() 函数介绍

$.get(url,[data],[callback])

$.get()发起不带参数的请求

使用 $.get() 函数发起不带参数的请求时，直接提供给 请求的 URL 地址 和 请求成功之后的回调函数 即可。

 $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
                console.log(res);
            })

$.get()发起携带参数的请求

 $.get('http://www.liulongbin.top:3006/api/getbooks',{id : 1},function(res){
                console.log(res);
            })

$.post() 函数介绍

$.post(url,[data],[callback])

`$.ajax()` 函数介绍

$.ajax() 函数的基本语法如下：

.ajax({
    type : '',
    url : '',
    data : {},
    success : function(res){}
})

$.ajax() 发起 get 请求

使用 $.ajax() 发起 GET 请求时，只需要将 type 属性的值设置为 ‘GET’ 即可：

$.ajax 发起 post 请求

使用 $.ajax() 发起 post请求，只需要把 type属性的值设置为 ‘post’ 即可

四、接口

接口的概念

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。

接口文档的组成部分

接口名称：用来标识各个接口的简单说明，如 登录接口，获取图书列表接口等
接口URL：接口的调用地址
调用方式：接口的调用方式，如 GET 或者 POST
参数格式：接口需要传递的参数，每个参数必须包含 参数名称、参数类型、是否必选、参数说明 这4项内容
响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容
返回示例（可选）：通过对象的形式，列举服务器返回数据的结构

DAY2

一、Form表单的基本使用

表单在网页中主要负责 数据采集功能。HTML中<form>标签，就是用于采集用户输入的信息，并通过 <form>标签的提交操作，把采集的信息提交到服务器端进行处理

1、表单的组成部分

表单标签
表单域：包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传框等等
表单按钮：通过设置type属性为submit来触发form表单的提交

2、`<form>` 标签的属性

action

action 属性用来规定当提交表单时，向何处发送表单数据。

action 属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。

当 <form>表单在未制定 action 属性值的清空下，action的默认值为当前页面的 URL 地址

注意: 当提交表单后，会立即跳转到 action 属性指定的 URL 地址

target

target 属性用来规定在何处打开 action URL

1、_blank 在新窗口打开

2、默认情况下，target的值是 _self，表示在相同的框架中打开 action URL

method

method 属性用来规定 以何种方式 把表单数据提交到 action URL

它的可选值有两个，分别是 get 和 post

默认情况下，method的值为 get，表示通过URL地址的形式，把表单数据提交到 action URL

注意：

get 方式适合用来提交少量的，简单的数据
post 方式适合用来提交大量的，复杂的，或包含文件上传的数据

enctype

enctype属性用来规定在 发送表单数据之前如何对数据进行编码

默认情况下值为application/x-www-form-urlencoded

文件上传必须将属性设置为 multipart/form-data，method必须为POST方式

GET和POST区别（面试）

传送位置：

get的参数跟在url后面传过去，post是在http协议体内传

get 方式适合用来提交少量的，简单的数据，post 方式适合用来提交大量的，复杂的，或包含文件上传的数据

get是相对服务器拿，post是传送数据给服务器

表单的同步提交及缺点

通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交

表单同步提交的缺点

<form> 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差
<form> 表单同步提交后，页面之前的状态和数据会丢失

如何解决呢？

表单只复杂采集数据，Ajax负责将数据提交到服务器

通过Ajax提交表单数据

监听表单提交事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件

        //第一种方式
      $('#f1').submit(function () {
        alert('监听到了表单的提交事件')
      })
      // 第二种方式
      $('#f1').on('submit', function () {  
        alert('监听到了表单的提交事件2')
      })

button 按钮默认type为 submit 可以触发提交事件，也可将type 设置为button 不触发该事件

阻止表单的默认提交行为:

e.preventDefault() 、（return false也可以）

如何快速获取表单数据

serialize() 函数

$.(selector).serialize()
    //一次性获取f1表单内的所有内容
  $('#f1').on('submit',function(e){
        e.preventDefault();
        let data = $('#f1').serialize(); 
        console.log(data);
    })

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性

只有DOM原生这种有该方法，reset() 重置清空（JQ中没有）

模板引擎

模板引擎，它可以根据程序员指定的 模板结构 和数据，自动生成一个完整的HTML页面

art-template模板引擎

基本使用

导入 art-template
- 在window全局，就多了一个函数，叫做 template('模板id'，需要渲染的数据对象)
```
<script src="./lib/template-web.js"></script>
```
定义数据
```
var data = { name: 'zs', age: 20}
```
定义模板
- 模板的 HTML 结构，必须定义到 script 标签中，注意：需要把type属性改成 text/html
- 给模板添加一个 id
- 模板里面如果需要使用到传入的数据，利用 {{}} 来实现，例如：{{name}}，那么就会去找我们调用 template() 函数第二个参数里面对应的name属性的值
```
<script type="text/html" id="tpl-user">
    <h1>{{name}}    ------    {{age}}</h1>
</script>
```
调用 template 函数
- 函数的返回值就是拼接好的模板字符串
```
var htmlStr = template('模板的id', data)
```
渲染HTML结构
- 最后我们需要把template返回的模板字符串设置到页面容器中
```
$('#container').html(htmlStr)
```

标准语法

art-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种 {{}} 语法在 art-template 中被称为标准语法（模板语法）

在 {{}} 语法中，可以进行变量的输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出

原文输出

{{@ value}}

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

条件输出

如果要实现条件输出，则可以在 {{}} 中使用 if...else if.../if 的方式，进行按需输出

            {{if flag === 0}}
            flag的值为0
            {{else if flag === 1}}
            flag的值是1
            {{/if}}

循环输出

如果要实现循环输出，则可以在{{}} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前循环项使用 $value 进行访问

{{each hobby}}
            <li>索引是:{{$index}},循环项是{{$value}}</li>
            {{/each}}

过滤器

{{regTime | dateFormat}}
 template.defaults.imports.dateFormat = function(date) {
          // 处理内容
        }

模板引擎的实现原理

exec函数

exec() 函数用于 检索字符串 中的正在表达式的匹配

如果字符串中又匹配的值，则返回该匹配值，否则返回 null

分组

正则表达式中（）包起来的内容表示一个分组，可以通过分组来 提取自己想要的内容，示例代码如下

var str = '<div>我是{{name}}</div>'
    var pattern = /{{([a-zA-Z]+)}}/ 
    var result = pattern.exec(str)

字符串的 replace 函数

replace() 函数用于在字符串中用一些字符替换另一些字符的

使用循环来replace

  while(true) {
        var result = pattern.exec(str)
        if(result === null) {
            break;
        }
        str = str.replace(result[0],result[1])
    }

DAY3

`XMLHttpRequest`的基本使用

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之

前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的

使用xhr发起GET请求

步骤

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

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
     // 获取服务器响应的数据
     console.log(xhr.responseText)
   }
}

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

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

格式：将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔。

// 携带一个参数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
// 携带两个参数‘’
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=‘西游记’')

URL编码与解码

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

encodeURI('薛亚岗')；
//输出结果为%E8%96%9B%E4%BA%9A%E5%B2%97
decodeURI('%E8%96%9B%E4%BA%9A%E5%B2%97')
//输出结果为 薛亚岗

使用xhr发起POST请求

创建 xhr 对象
调用 xhr.open() 函数
设置 Content-Type 属性（固定写法）

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

调用 xhr.send('发送的数据') 函数，同时指定要发送的数据
监听 xhr.onreadystatechange 事件

XML和HTML的区别

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

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

JSON

`JSON`语法注意事项

① 属性名必须使用双引号包裹

② 字符串类型的值必须使用双引号包裹

③ JSON 中不允许使用单引号表示字符串

④ JSON 中不能写注释

⑤ JSON 的最外层必须是对象或数组格式

⑥ 不能使用 undefined 或函数作为 JSON 的值

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

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

序列化和反序列化

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

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

封装自己的Ajax函数

function resolveData(data) {
    var arr = [];
    for(var k in data) {
        arr.push(k + '=' + data[k])
    }
    return arr.join('&')
}
function itheima(options) {
    var xhr = new XMLHttpRequest()
    var qe = resolveData(options.data)
    if(options.method.toUpperCase() === 'GET') {
        xhr.open(options.method,options.url + '?' + qe)
        xhr.send()

    } else if(options.method.toUpperCase() === 'POST') {
        xhr.open(options.method,options.url)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(qe)
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
        var result = JSON.parse(xhr.responseText)
        options.success(result)        }
    }
}

`XMLHttpRequest Level2`的新特性

XMLHttpRequest Level2的新功能

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

设置HTTP请求时限

 xhr.timeout = 30
  // 设置超时以后的处理函数
  xhr.ontimeout = function () {
    console.log('请求超时了！')
  }

FormData对象管理表单数据

步骤：

新建 FormData 对象
为 FormData 添加表单项
创建 XHR 对象
指定请求类型与URL地址
直接提交 FormData 对象，这与提交网页表单的效果，完全一样

案例：上传文件

   var btn = document.querySelector('#btn')
        var img = document.querySelector('#img')
        btn.addEventListener('click',function(){
            // 获取到文件的选择列表
            var files = document.querySelector('#files').files
            if(files.length <= 0) return alert('请选择要上传的文件！')
            var fd = new FormData();
            fd.append('avatar',files[0])

            var xhr =  new XMLHttpRequest();
            xhr.upload.onprogress = function(e){ // 是否具有可计算的长度
                if(e.lengthComputable) {
                    e.loaded // 已传输的字节
                    e.total //	总字节
               var procentComplete = Math.ceil((e.loaded / e.total) * 100)
                    console.log(procentComplete);
            xhr.send(fd);
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText)
                    if(data.status === 200) {
                        img.src = 'http://www.liulongbin.top:3006' + data.url;

                    } else {
                        console.log('图片上传失败' + data.message);
                    }
                }
            }
        
        })

上传文件

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

实现步骤：

① 定义 UI 结构

② 验证是否选择了文件

③ 向 FormData 中追加文件

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

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

⑤ 监听 onreadystatechange 事件

JQ实现文件上传

① 定义 UI 结构

② 验证是否选择了文件

③ 向 FormData 中追加文件

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

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

`jQuery`实现`loading`效果

  	// 监听到ajax事件开始
$(document).ajaxStart(function () {
        $('#loading').show()
      })
      // 监听到 Ajax 完成的事件
      $(document).ajaxStop(function () {
        $('#loading').hide()
      })

axios

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

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

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

axios发起GET请求

axios.get(url, { params: paramsObj }).then(function(res) {
    console.log(res.data)     
})

axios发起POST请求

axios.post(url, dataObj).then(function(res) {
        console.log(res.data)     
})

直接使用axios发起请求

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

DAY4

同源策略

什么是同源

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

什么是同源策略

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能

跨域

什么是跨域

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

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

如何实现跨域数据请求

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

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

`JSONP`

JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据

<script>
        function success(data){
            console.log('JSON响应的数据');
            console.log(data);
        }
    </script>
    <script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=xyg&age=20"></script>

JSONP的缺点

由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。

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

jQuery中的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)
     }
})

jQuery中JSONP的实现过程

jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除标签的方式，来发起 JSONP 数据请求。

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

防抖&节流（重要）

什么是防抖

防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

好处：能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次

防抖的应用场景

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减

少请求次数，节约请求资源

防抖案例（滚动事件）

<script>
        function beProtected(){
            console.log('我被保护');
        }
        var timer = null;

        function debounced(){
            timer = setTimeout(function(){
                beProtected();
            },500)
        }

        window.onscroll = function(){
            console.log('滚动触发');
            clearTimeout(timer);
            debounced();
        }
    </script>

节流

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。

节流的应用场景

① 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

② 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

总结防抖和节流的区别

防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！
节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！只有当这一次的事件被处理结束之后，才可以开启下一次。

znhyXYG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 笔记

一、服务器相关概念1、客户端与服务器客户端是用户自身的电脑，服务器是存放资源信息的一个（大型电脑）2、URL地址的概念&组成URL的组成客户端与服务器之间的通信协议存有该资源的服务器名称（主机名）资源在服务器上具体的存放位置（请求路径）客户端与服务器通信过程客户端与服务器之间的通讯过程，分为：请求-处理-响应三个步骤网页中每一个资源，都是通过请求-处理-响应的方式从服务器获取回来的域名的作用引导服务..
复制链接

扫一扫