Ajax知识大全

最新推荐文章于 2022-12-06 17:20:08 发布

weixin_45671998

最新推荐文章于 2022-12-06 17:20:08 发布

阅读量195

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_45671998/article/details/115998993

版权

URL

统一资源定位符，用于标识互联网上每个资源的唯一存放位置。

URL地址的组成部分

客服端与服务器之间的通信协议
存有该资源的服务器名称
资源在服务器上具体的存放位置

网页中的数据也是一种资源

网页中的数据，也是服务器对外提供的一种资源。

HTML是网页的骨架
CSS是网页的颜值
JS是网页的行为
数据是网页的灵魂

请求方式

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

例如：根据URL地址，从服务器中获取HTML CSS JS 数据资源等

post请求通常用于提交数据资源（交资源）

例如：用户登录信息，用户注册信息。添加用户信息等

Ajax

在网页中利用XMLHttpRequest对象和服务器进行数据交换的方式，就是Ajax。
名字重复
分页
动态提示

JQ中的Ajax

JQ中发起Ajax请求的三种方式：

$.get(); 用于获取数据
$.post();用户发送数据
$.ajax();可以用于获取数据，也可以用于发送数据

$.get()

语法：
$.get(url,[data],[callback])
url:请求的资源地址
data:请求资源期间携带的参数
callback:请求成功时的回调函数

 var arr =[]
        $(function(){
            $('.btn').click(function(){
                $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
                    console.log(res);
                    arr = res.data;
                    console.log(arr);
                })
            })
            $('.btn1').click(function(){
                $.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
                    console.log(res);
                })
            })
        })

$.post()
语法：
$.post(url,[data],[callback])
url:提交的资源地址
data:提交资源期间携带的参数
callback：提交成功时的回调函数

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

$.ajax()
语法：
type:‘’ get或者post
url:" 地址
date:" 参数
success:’’ 成功后的回调函数

$(function(){
        $("#btnGET").click(function(){
            $.ajax({
                type: "GET",
                url:'http://www.liulongbin.top:3006/api/getbooks',
                data:{
                    id: 1
                },
                success:function(res){
                    console.log(res)
                }
            })
        })
        $("#btn1").click(function(){
            $.ajax({
                type: "POST",
                url:'http://www.liulongbin.top:3006/api/addbook',
                data:{ 
                    bookname: '史记00', 
                    author: '司马迁00', 
                    publisher: '天津图书出版社00' },
                success:function(res){
                    console.log(res)
                }
            })
        })
    })

接口

URL地址相当于数据接口，每个接口必须有请求方式。

接口测试工具

可以让开发人员不写任何代码的情况下，对接口进行调用和测试
*PostMan接口测试工具
*

接口文档

接口的说明文档，是调用接口的依据

接口文档的组成部分

接口名称：标识各个接口的简单说明
接口URL：接口地址
调用方式： get post
参数格式：接口需要传递的参数
响应格式：接口返回值的详细描述
返回示例：通过对象的形式，列举服务器返回数据的结构

表单

表单在网页中主要负责数据采集功能 HTML中的form标签，就是用于采集用户输入的信息，并通过form标签的提交操作把采集到的数据上传给服务器

表单的组成部分

表单标签
表单域
表单按钮

 <form action="/login">//表单标签
    <input type="text" name="user_name" />//表单域
    <input type="password" name="password" />//表单域
    <button type="submit">提交</button>//表单按钮
  </form>//表单标签

form标签的属性
action 用户提交数据后跳转的地址

<!-- action  用户提交数据的目标地址，如果不填写将会提交到当前界面 -->
    <!-- 提交上去的数据全是字符串的形式 -->
    <!-- 当用户按下表单按钮时，会立刻跳转到目标地址 -->
    <form action="/login">
        <input type="text" name="user_name" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
      </form>

target 在何处打开URL地址，通俗点说，是在当前界面打开，还是新建窗口打开

 <!-- target属性，意为在何处打开URL地址  -->
    <!-- 两个常用的参数  _blank在新窗口打开，_self在当前窗口打开 -->
      <form action="/login" target="_blank">
        <input type="text" name="user_name" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
      </form>

method 如何把表单提交到URL地址，强烈建议用post 因为get会把提交的数据在地址栏显示，对用户账号的安全保护极差

  <!-- method,如何把表单数据提交到URL地址 -->
      <!-- 两个参数  get（在网址中显示）  post（在网址中不显示） -->
      <!-- method的默认值是get  但是为了提高安全性，我们要使用post -->
      <form action="/login" target="_blank" method="POST">
        <input type="text" name="user_name" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
      </form>

enctype 一般都使用默认值，如果涉及文件上传，要使用特定的值

 <!-- enctype  默认值：multipart/from-data-->
      <!-- 如果涉及文件上传，必须用application/x-www-form-urlencoded -->
      <form action="/login" target="_blank" method="POST" enctype="application/x-www-form-urlencoded">
        <input type="text" name="user_name" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
      </form>

表单同步提交的缺陷和解决缺陷的办法
用户提交表单时，点击提交按钮，会直接跳转界面，对用户的体验极差，而且页面之前的数据和状态会丢失
解决办法：
表单只负责采集数据，提交数据交给Ajax
制止表单的跳转，相当于制止表单的默认行为

 $('#f1').submit(function (e) {
            alert('1');
            //e.preventDefault制止元素的默认行为
            e.preventDefault()
            }

erialize()函数
可以通过该函数快速的获取表单中的值，但是每个input 都需要有name属性。如果没有。就获取不到

 $('#f1').submit(function (e) {
            alert('1');
            e.preventDefault()
            var a =$(this).serialize();
            console.log(a);
            var st = a.split('&')[0].slice(10,13);
            console.log(st);

        })

模板引擎

它可以根据开发人员指定的模板结构和数据，自动生成一个完整的HTML页面
优点：

减少字符串的拼接操作
代码结构更加清晰
代码更易于阅读和维护

模板引擎的使用

我们需要先去下载一个template-web.js就可以使用了

<body>
    <div id="container"></div>
</body>
//这里
<script type="text/html" id="tpl-user">
    <h3>{{title}}</h3>
    <span>姓名: {{name}}</span><br>
    <span>年龄: {{age}}</span> <br>
    <span>会员: {{isVIP}}</span><br>
    <span>注册时间:{{regTime}}</span><br>
    <span>爱好：</span>
    <ul>
        吃饭<br>
        睡觉<br>
        打豆豆
    </ul>
</script>
<script>
   var data = {
      title: '用户信息',
      name: 'zs',
      age: 20,
      isVIP: true,
      regTime: new Date(),
      hobby: ['吃饭', '睡觉', '打豆豆']
    }
    var a = template('tpl-user',data);
    console.log(a);
    $('#container').html(a)

模板引擎的使用原理

基本语法
exec（）函数检索字符串中是否包含某一项元素

标题Ajax的加强

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

使用xhr 发起数据请求

步骤：

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

  // 创建xhr 实例对象
    var xhr = new XMLHttpRequest();
    // 调用open方法
    xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
    // 调用send方法
    xhr.send();
    // 监听
    xhr.onreadystatechange = function(){
        if(xhr.readyState===4 && xhr.status===200){
            // 获取数据
            console.log(xhr.responseText);
        }
    }

带传输的xhr请求

可以在URL地址的后面，通过？的方式进行请求，请求获取id=1的数据

xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')

查询字符串

将英文的？放在URL地址的后面，然后再加上参数=值，想加上多个参数的话，使用&符号进行分隔。以这个形式，可以将想要的数据获取过来

URL的编码和解码

encodeURI（）编码的函数

  var str = '程序员'
    var str2 = encodeURI(str)
    console.log(str2)

decodeURI（）解码的函数

var str3 = decodeURI('%E9%BB%91%E9%A9%AC')
    console.log(str3)

XHR发起post请求

步骤：

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

<script>
    // 1. 创建 xhr 对象
    var 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. 监听事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

数据交换格式

服务器与客户端之间进行数据传输与交换格式。
前端领域一般有JSON和XML交换格式，但是我们多用JSON

XML

XML是一种可扩展标记语言，XML的格式和HTML很相似

XML与HTML的区别

HTML被设计用来描述网页上的内容，是网页内容的载体

XML被设计用来传输和储存数据，是数据的载体

XML的缺点

XML的体积大，包含很多与数据无关的代码，传输效率低
JS解析XML比较麻烦

JSON

JSON是JS对象和数组的字符串表示法，它使用文本表示一个JS对象或者数组的信息，JSON的本质是字符串。

JSON是一种轻量级的文本数据交换格式，JSON相较于XML具有更小，更快，更易于解析的特点

JSON与JS对象之间的相互转换

JSON-JS对象：
利用 JSON.parse()方法

 // 利用 JSON.parse（）方法转换
    var Json = '{"a":"hello","b":"name"}'
    var a = JSON.parse(Json);
    console.log(a);

JS对象-JSON
利用JSON.stringify():

 // JS对象转JSON
    // 利用JSON.stringify()
    var b  = {a:"name",b:"hello"}
    var str = JSON.stringify(b);
    console.log(str);

序列化和反序列化

数据对象转化为字符串的过程：序列化
利用JSON.stringlfy() 操作

字符串转化为数据对象的过程：反序列化
利用JSON.parse()操作

XMLHttpRequest Level2

旧版XMLHttpRequest的缺点：

只支持文本传输，不支持文件上传
传送和接受数据，只显示结果，不显示进度信息

XMLHttpRequest Level2的新功能

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

设置请求超时

变量.timeout = 毫秒数
变量.ontimeout = function(){}

 var xml = new XMLHttpRequest();
    xml.timeout = 3000;
    xml.ontimeout = function () {
        console.log('请求超时')
    }
    xml.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    xml.send(); 
    xml.onreadystatechange = function () {
        if (xml.readyState === 4 && xml.status === 200) {
        console.log(xml.responseText)
      }
    }

FromData对象管理表单数据

HTML5新增了一个FromData对象可以模拟表单操作
发送数据：

 // 创建fd实例化对象
    var fd = new FormData();
    // 利用append函数 添加数据
    fd.append('uname','hh');
    fd.append('upwd','123');
     
    var xml = new XMLHttpRequest();
    xml.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
    xml.send(fd);
    xml.onreadystatechange = function(){
        if (xml.readyState===4 && xml.status==200){
            console.log(JSON.parse(xml.responseText));
        }
    }

获取表单数据

 var form = document.querySelector('#form1');
    console.log(form);

    form.addEventListener('submit', function (e) {
        console.log('1')
        e.preventDefault();

        var fd = new FormData(form);
       

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

上传文件

步骤：

定义UI结构
验证是否选择了文件
向FormData中追加文件
使用xhr发起上传文件的请求
监听onreadystatechange事件

  var btn = document.querySelector('#btnUpload');
    btn.addEventListener('click',function(){
        // files 是一个属性，表示文件列表
        var file = document.querySelector('#file1').files;
       
        if (file.length <= 0) {
        return alert('请选择要上传的文件！')
      }else{
          var fd = new FormData();
          fd.append('avate',file[0]);
          var xhr = new XMLHttpRequest();
          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){
                    console.log(1);
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                    console.log(data.url)
                }else{
                    console.log('失败了')
                }
            }
          }

      }
    })

绘制上传进度条

 xhr.upload.onprogress = function(e){
              console.log(1);
            //  e.lengthComputable 是一个布尔值 表示当前上传的资源是否具有可计算的长度
            if(e.lengthComputable){
                console.log(1)
                // 已传输的字节
                console.log(e.loaded)
                // 需传输的字节
                console.log(e.total)
                var percentComplete =Math.ceil((e.loaded/e.total)*100);
                console.log(percentComplete)
                // 动态进度条
                $('#percent').attr('style', 'width: ' + percentComplete + '%;').html(percentComplete + '%')
            }
          }
          xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }

JQ高级用法

注意事项：
ajaxStart是请求Ajax开始的事件监听
ajaxSend是请求Ajax结束的事件监听
用JQ上传文件事
$.ajax()
processData: false,
contentType: false,
这两句话必须写

 $(function () {
        // 监听ajaxStart 开始事件
        $(document).ajaxStart(function (){
            $('#loading').show()
        })
        $(document).ajaxSend(function (){
            $('#loading').hide()
        })
        
        $('#btnUpload').on('click', function () {
            var file = $('#file1')[0].files;
            if (file.length <= 0) {
                alert('请选择上传的文件')
                return
            } else {
                var fd = new FormData();
                fd.append('avatar', file[0]);
                
                var xhr = new XMLHttpRequest();
                xhr.upload.onprogress = function(e){
              console.log(1);
            //  e.lengthComputable 是一个布尔值 表示当前上传的资源是否具有可计算的长度
            if(e.lengthComputable){
                console.log(1)
                // 已传输的字节
                console.log(e.loaded)
                // 需传输的字节
                console.log(e.total)
                var percentComplete =Math.ceil((e.loaded/e.total)*100);
                console.log(percentComplete)
                // 动态进度条
                $('#percent').attr('style', 'width: ' + percentComplete + '%;').html(percentComplete + '%')
            }
          }
          xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }


                $.ajax({
                    method: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                    data: fd,
                    // 不修改content-type属性，使用fromData默认的content-type值
                    processData: false,
                    // 不对formData中的数据进行url
                    contentType: false,
                    success:function (res) {
                        console.log(res);
                        console.log(res.url);
                        var img = document.querySelector('#img');
                        img.src='http://www.liulongbin.top:3006'+res.url;
                        // JQ对象不能调用dom的方法，所以下列代码无效
                        // $('#img').src='http://www.liulongbin.top:3006'+res.url;
                    }
                })

            }
        })
    })

axios

Axios是专注于网络数据请求的库
相比于原生对象HMLHttpRequest对错 axios简单易用
相比于JQ axios更加轻量化，只专注于网络请求

<body>
    <button id="btn1">发起GET请求</button>
    <button id="btn2">发起POST请求</button>
    <button id="btn3">直接使用axios发起GET请求</button>
    <button id="btn4">直接使用axios发起POST请求</button>
</body>
<script>
    // 发送get请求
    var btn1 = document.querySelector('btn1')
    document.querySelector('#btn1').addEventListener('click', function () {
        var url = 'http://www.liulongbin.top:3006/api/get'
        var paramsObj = {
            name: 'zs',
            age: 20
        }
        axios.get(url, {
            params: paramsObj
        }).then(function (res) {
            console.log(res.data);
        })
    })
    //    发送POST请求
    var btn2 = document.querySelector('#btn2').addEventListener('click', function () {
        var url = 'http://www.liulongbin.top:3006/api/post'
        var dataObj = {
            address: '北京',
            location: '顺义区'
        }
        axios.post(url, dataObj).then(function (res) {
            console.log(res.data)
        })
    })
    // 直接发起get请求   请求参数必须使用params
    document.querySelector('#btn3').addEventListener('click', function () {
        var url = 'http://www.liulongbin.top:3006/api/get'
        var paramsData = {
            name: '钢铁侠',
            age: 35
        }
        axios({
            method: 'GET',
            url: url,
            params: paramsData
        }).then(function (res) {
            console.log(res.data)
        })
    })
    // 直接发起POST请求  请求参数必须使用data
    document.querySelector('#btn4').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: '娃哈哈',
          age: 18,
          gender: '女'
        }
      }).then(function (res) {
        console.log(res.data)
      })
    })
</script>

同源策略和策略

同源
如果两个页面的协议，域名和端口相同，则两个页面具有相同的源
端口默认是80

同源策略
同源策略是浏览器提供的一个安全策略

跨域

两个URL的协议，域名，端口不一致，就是跨域
跨域为什么会出现？
是因为同源策略

浏览器对跨域请求的拦截

浏览器允许发起跨域请求
浏览器可以正常接受返回的数据
因为同源策略的特性，导致数据被拦截

如何实现跨域请求

两种方案：
JSONP
是一个临时方案，只支持GET请求，不支持POST请求

CORS
支持GET 和POST请求，但是不兼容低版本的浏览器

JSONP

是JSON的一种模式
使用回调函数，来指定要调用的函数

<body>
    <script>
        function abc(res){
            console.log(res)
            console.log(1);
        }
    </script>
    <!-- 通过字符串的方式，指定要调用的回调函数 -->
    <script src="/第四天/abc.js?callback=abc"></script>
</body>
</html>

JQ实现JSONP请求

JQ中实现JSONP请求，也是通过script 中的src标签实现的
但是JQ采用的是动态创建和删除script标签

 $(function(){
        $.ajax({
            url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
            // 下面这个代码必须给定，他定义了发送请求的类型
            dataType:'jsonp',
            // 指定回调函数
            jsonp: 'callback', // 这个属性一般都不改的
            // 指定回调函数的名称,如果不使用,是JQ自定义的一个字符串
            jsonpCallback: 'abc',
            success: function(res){
                console.log(res);
            }
        })
    })

防抖

意思就是给键盘按下建弹起加上延迟定时器，避免每按一次健，触发一下事件

节流

减少事件触发的间隔只能在每一段时间内，触发一次

防抖和节流的区别

防抖只能保证多次事件同时触发，最后一次触发有效
节流可以保证多次事件都被触发，但是可以改变触发的频率

通信：

通信就是信息的传递和交换
通信三要素

通信的主体
通信的内容
通信的方式

通信协议

通信协议：通信双方完成通信必须遵守的规则和约定

网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议

HTTP

HTTP协议即超文本传送协议，它规定了客户端与服务器之间进行的网页内容传输时，所必须遵守的传输格式

HTTP请求消息

客服端发起的请求叫做HTTP请求

客户端发送到服务端的消息叫做HTTP请求消息

HTTP请求消息的组成部分

请求行

请求行是由 请求方式，URL，HTTP协议版本三部分组成，之间通过空行隔开

请求头部

请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器

在这里插入图片描述

空行

最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束

请求体

请求体中存放的，是要通过 POST 方式提交到服务器的数据。

注意：只有 POST 请求才有请求体， GET 请求没有请求体！

HTTP响应消息

响应消息就是服务器响应给客户端的消息内容，也叫作响应报文

HTTP响应消息的组成部分

HTTP响应消息由状态行、响应头部、空行和 响应体 4 个部分组成。
状态行

HTTP协议版本，状态码和状态码的描述文本组成

响应头部
响应头部是用来描述服务器的基本信息，响应头部由多行建/值对组成，每行之间用英文的冒号分割

空行
在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户端响应头部至此结束。

响应体
响应体中存放的，是服务器响应给客户端的资源内容。

HTTP请求方法
用来表明要对服务器上的资源执行的操作。最常用的请求方式和get和post
在这里插入图片描述

HTTP响应状态码

HTTP 响应状态码（ HTTP Status Code ），也属于 HTTP 协议的一部分，用来标识响应的状态。

响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次HTTP 请求的结果是成功还是失败了。

weixin_45671998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax知识大全

URL统一资源定位符，用于标识互联网上每个资源的唯一存放位置。URL地址的组成部分客服端与服务器之间的通信协议存有该资源的服务器名称资源在服务器上具体的存放位置网页中的数据也是一种资源网页中的数据，也是服务器对外提供的一种资源。HTML是网页的骨架CSS是网页的颜值JS是网页的行为数据是网页的灵魂请求方式get请求通常用于获取服务器资源（要资源）例如：根据URL地址，从服务器中获取HTML CSS JS 数据资源等post请求通常用于提交数据资源（交资源）例如：
复制链接

扫一扫