首页 > 其他分享 >Ajax 知识点汇集

Ajax 知识点汇集

时间：2022-09-29 23:22:23浏览次数：69  
标签：function 知识点 请求 汇集 JSON xhr Ajax var 跨域

url地址组成

  1. 客户端和服务器之间的通信协议

  2. 服务器名称

  3. 具体的存放位置

 

客户端与服务器的通信过程（三个步骤）：

请求、处理、响应

使用开发者工具 -> network ：查看

 

网页中请求服务器上的数据资源 -- XMLHttpRequest

 

资源的请求的方式：

get 、post

  • get

    • 常用于获取服务器资源

  • post

    • 想服务器提交数据

 

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

 

JQuery中的Ajax

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

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

  3. $.ajax({type:'',url:'',dara:{},success:function(){}})

 

接口

Ajax 请求数据时，被请求的 url 地址，就叫做数据接口

 

XMLHttpRequest(xhr)

使用 xhr 发起 GET 请求

1.创建 XHR 对象
    var xhr = new XMLHttpRequest()
​
2.调用 open 函数,指定 请求方式 与 URL地址
    xhr.open('GET','https://...')
    URL地址后面拼接的字符串，也就是?号后面的字符串 叫做 查询字符串 --> 参数 = 值
​
3.调用 send 函数, 发起 Ajax 请求
    xhr.send()
​
4.监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
        // 监听 xhr 对象的请求状态 readyState; 与服务器响应的状态 status
        if(xhr.readyState === 4 && xhr.status === 200){ //固定写法，即响应成功
            xhr.responseText // 服务器响应回来的数据
        }
    }

readyState 属性：用来表示当前 Ajax 请求所处的状态

 

URL编码与解码

<script>
    var str = 'HEOOL';
    var str2 = encodeURI(str)   //URL编码
    var str3 = decodeURI(str2)  //URL解码
</script>
    大部分的浏览器会自动为URL进行编码

 

使用 xhr 发起 POST 请求

1.创建 XHR 对象
    var xhr = new XMLHttpRequest()
​
2.调用 open 函数,指定 请求方式 与 URL地址
    xhr.open('POST','https://...')
    URL地址后面拼接的字符串，也就是?号后面的字符串 叫做 查询字符串 --> 参数 = 值
​
3.设置 Content-Type 属性（固定写法）
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
​
4.调用 send 函数, 同时将数据以查询字符串的形式，提交给服务器
    xhr.send('name=张三&&password=123')
​
5.监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
        // 监听 xhr 对象的请求状态 readyState; 与服务器响应的状态 status
        if(xhr.readyState === 4 && xhr.status === 200){ //固定写法，即响应成功
            xhr.responseText // 服务器响应回来的数据
        }
    }

 

数据交换格式

前端：XML \ JSON

什么是 XML？

和 HTML 类似，可扩展标记语言。但是两者没有任何关系。

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

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

 

XML 的缺点

  1. XML 格式臃肿，和数据无关的代码多，体积大，传输效率低

  2. 在 javascript 中解析 XML 比较麻烦

 

什么是JSON?

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

是一种轻量级的文本数据交换格式，比XML更小、更快、更易解析。

 

JSON 两种结构

  • 对象结构

    使用 {} 包括起来的内容，数据结构为 key: value

    key 必须用英文的双引号包裹

    value 的数据类型：number\string\boolean\null\array\object（没有undefiened\function） 6种

  • 数组结构

    使用[]包括起来的内容，数据结构为：number\string\boolean\null\array\object 6种

 

JSON 语法注意事项

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

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

  3. JSON 种不允许使用单引号表示字符串

  4. JSON 种不能写注释

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

  6. 不能使用 underfined 或函数作为 JSON 的值

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

 

JSON 和 JS 对象的关系

JSON 是 JS 对象的字符串表示

 

JSON 和 JS 对象的互转

JSON -> JS : JSON.parse(str) 叫做 JSON 反序列化：字符串转换为数据对象的过程

JS-> JSON: JSON.stringify(str) 叫做 JSON 序列化：数据对象转换为字符串的过程

 

封装自己的 Ajax 函数

处理 data 参数

    <script>
        var data = {
            name: '张三',
            password: 123
        }
        function resolveData(data) {
            var arr = [];
            for(let k in data){
                arr.push(k + '=' + data[k]);
            }
            return arr.join('&');
        }
        // name=张三&password=123
    </script>

封装方法

    <script>
        function itheima(options){
            var xhr = new XMLHttpRequest();
​
            // 把外界传递过来的参数对象，转换为 查询字符串
            var qs = resolveData(options.data);
​
            xhr.onreadystatechange = function () {
                if(xhr.readyState === 4 && xhr.status === 200){
                    var result = JSON.parse(xhr.responseText)
                    options.success(result)
                }
            }
        }
    </script>

判断请求类型

<script>
    function itheima(options){
        var xhr = new XMLHttpRequest();
​
        // 把外界传递过来的参数对象，转换为 查询字符串
        var qs = resolveData(options.data);
​
        if(options.type.toUpperCase() === 'GET'){
            //发起 GET 请求
            xhr.open(options.type,options.url + '?' + qs)
            xhr.send()
        }else if(options.type.toUpperCase() === 'POST'){
            //发起 POST 请求
            xhr.open(options.type,options.ur)
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.sen(qs)
        }
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4 && xhr.status === 200){
                var result = JSON.parse(xhr.responseText)
                options.success(result)
            }
        }
    }
</script>

 

XMLHttpsRequest Level2 的新特性

旧版 XMLHttpsRequest 的缺点：

  1. 只支持文本数据的传输，无法用来读取和上传文件

  2. 传送和接收数据时，没有进度信息，只能提示有没有完成

 

XMLHttpsRequest Level2 的新功能：

  1. 可以设置HTTP请求的时限

  2. 可以使用 FormData 对象管理表单数据

  3. 可以上传文件

  4. 可以获取数据传输的进度信息

 

设置 HTTP 请求时限：timeout

xhr.timeout = 3000
​
xhr.ontimeout = function(){
    // 超出时限的回调函数
}

FormData 对象管理表单数据

<script>
    // 1.创建 FormData 实例
    var fd = new FormData();
    // 2.调用 append 函数，向 fd 中追加数据
    fd.append('name','zs');
    fd.append('upwd','123');
​
    var xhr = new XMLHttpRequest()
    xhr.open('POST','URL...')
    xhr.send(fd)
​
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200){
​
        }
    }
</script>
// 可以直接获取网页表单数据
<script>
    //获取表单元素
    var form = document.querySelector("#form")
    form.addEventListener('submit', function(e){
        // 阻止表单的默认事件
        e.preventDefault()

        // 创建 FormData, 快速获取到 form 表单中的数据
        var fd = new FormData(form)

        var xhr = new XMLHttpRequest()
        xhr.open(...)
        xhr.send(fd)
        ...
    })
</script>

上传文件

  1. 定义 UI 结构

  2. 验证是否选择了文件

  3. 向 FormData 中追加文件

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

  5. 监听 onreadystatechange 事件

 

定义 UI 结构
<!-- 1.文件选择框 -->
<input type="file" id="file1" />
    
<!-- 2.上传按钮 -->
<button id="btnUpload">上传文件</button>

<!-- 显示上传到服务器上的图片 -->
<img src="" alt="" id="img">
验证是否选择了文件
<script>
    // 1. 获取上传文件的按钮
    var btnUpload = document.querySelector("#btnUpload")

    // 2. 为按钮添加 click 事件
    btnUpload.addEventListener('click', function(){
        // 3.获取到选择的文件列表
        var files = document.querySelector('#file1').files
        if(files.length <= 0){
            aler('请选择要上传的文件！')
        }
    })
</script>
向 FormData 中追加文件
<script>
    var btnUpload = document.querySelector("#btnUpload")
    btnUpload.addEventListener('click', function(){
        var files = document.querySelector('#file1').files
        if(files.length <= 0){
            aler('请选择要上传的文件！')
        }
        // 1. 创建 FormData 对象
        var fd = new FormData()
        // 2. 向 FormData 中追加文件
        fd.append('avatar',files[0])
    })
</script>
使用 xhr 发起上传文件的请求
        var xhr = new XMLHttpRequest()
        xhr.open(...)
        xhr.send(fd)
监听 onreadystatechange 事件
<script>
    var btnUpload = document.querySelector("#btnUpload")
    btnUpload.addEventListener('click', function(){
        var files = document.querySelector('#file1').files
        if(files.length <= 0){
            aler('请选择要上传的文件！')
        }
        var fd = new FormData()
        fd.append('avatar',files[0])
        var xhr = new XMLHttpRequest()
        xhr.open(...)
        xhr.send(fd)

        xhr.onreadystatechange = fucntion () {
            if(xhr.readyState === 4 && xhr.status === 200){
                var data = JSON.parse(xhr.responseText)
                if(data.status === 200){
                    // 上传成功
                    document.querySelector('#img').src = 'url' + data.url
                }else{
                    // 上传失败
                    console.log('失败');
                }
            }
        }
    })
</script>
显示文件上传进度
<script>
    var xhr = new XMLHttpRequest();
    // 监听文件上传的进度
    xhr.upload.onprogress = function(e) {
        if(e.lengthComputable){
            // 计算出上传的进度
            var procentComoolete = Math.ceil((e.load / e.total) * 100)
        }
    }
	
	xhr.upload,onload = function(e){
        console.log('上传完成')
    }
</script>
使用 jQuery 上传文件
<script>
    $(function(){
        $('#btnUpload').on('click',function(){
            var files = $('#files')[0].files
            if(files.length <= 0){
                console.log('未上传文件');
            }
            var fd = new FormData()
            fd.append('anatao',files[0])

            $.ajax({
                type: 'POST',
                url: 'URL',
                data: fd,
                processData: false, //上传文件必须指定这两个属性的值
                contentType: false,
                success: function(param){

                }
            })
        })
    })
</script>
使用 jQuery 实现 loading 效果
<script>
    $(function(){
        $(document).ajaxStart(function(){
            // 监听 Ajax 请求，会被监听到当前文档内所有的 Ajax 请求
        })

        $(document).ajaxStop(function(){
            // 监听到 Ajax 请求完成
        })
    })
</script>

 

axios 是什么？

  1. 专注于网络数据请求的库

  2. 相比于原生的 XMLHttpsRequest 对象， axios 简单易用

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

axios 发起 get 请求：

axios.get('url',{param:{参数}}).then(callback)

axios 发起 post请求：

axios.get('url',{参数}).then(callback)

 

axios({
    type: 'POST\GET',
    url: '请求的地址'
    data: {POST数据},
    param: {GET参数}
}).then(callback)

 

什么是同源？

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

没有给端口号，默认为 80

 

什么是同源策略？（Same origin policy）

是浏览器提供的一个安全功能。

  1. 无法读取非同源网页的 cookie \ LocalStorage \ IndexedDB

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

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

 

什么是跨域？

与同源相反的，就是跨域。

 

浏览器对跨域请求的拦截

  1. 跨域请求可以正常发起

  2. 浏览器能正常接收到跨域响应的数据

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

 

如何实现跨域跨域数据请求?

实现跨域数据请求，最主要的两种解决方案：JSONP 和 CORS。

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

缺点是 只支持 GET 请求，不支持 POST 请求。

CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。

缺点是不兼容某些低版本的浏览器。

 

JSNOP的实现原理

通过 <script>标签的 src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

// 1.定义函数
<script>
    function success(data) {
        console.log('拿到了 Data 数据');
    }
</script>

// 2.调用函数
<script src="调用函数的文件路径"></script>
// 调用函数的文件
<script>
    success({name:'zs', age:'20'})
</script>

设置具体请求被调用函数的名称

// 1.定义函数
<script>
    function success(data) {
        console.log('拿到了 Data 数据');
    }
</script>

// 2.调用函数
<script src="调用函数的文件路径?callback=success"></script>

注意： JSONP 和 Ajax 之间没有任何关系。

 

jQuery中的 JSONP

<script>
    $(function(){
        //发起JSONP的请求
        $.ajax({
            url: 'URL?name=zs&age=20',
            // 我们要发起 JSONP 的数据请求
            dataType: 'jsonp',
            jsonp: 'callback', //callback参数名称--等号前
            jsonpCallback: 'success',  //callback函数名称--等号后
            success: function(res){
            }
        })
    })
</script>
// 未指定时，jQuery 自动生成一个 callback 名称，一般不改变 jsonp 的参数

jQuery 中的 JSONP 是通过动态创建和移除 <script> 标签的方式，来发起 JSONP 数据请求。

  • 发起 JSONP 请求时，动态向 <header> 中 append 一个 <script> 标签

  • JSONP 请求成功后，动态从 header 中移除刚才 append 进去的 script 标签

 

 

标签：function,知识点,请求,汇集,JSON,xhr,Ajax,var,跨域
From： https://www.cnblogs.com/c0lmd0wn/p/16743482.html

相关文章

  • $.ajax()传递请求参数
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......
  • Ajax、反向Ajax和WebSocket 概念
    Ajax异步的JavaScript和XML（AsynchronousJavaScriptandXML，Ajax），一种可通过JavaScript来访问的浏览器功能特性，其允许脚本向幕后的网站发送一个HTTP请求而又无需重新加载......
  • 前端面试总结11-WebApi-Ajax
    1.同源策略：ajax请求时，浏览器要求当前网页和serve必须同源（安全），即协议，域名，端口三者必须一致2.可无视同源策略的情况（1：<img/>可用于统计打点，可使用第三方统计服务（2：<link/><......
  • JavaScript 语言基础知识点
    1、JavaScript数据类型2、JavaScript变量3、Javascript运算符4、JavaScript流程控制5、JavaScript函数基础6、JavaScript数组7、JavaScript字符串函数8、JavaS......
  • B站学爬虫 梨视频ajax双重抓包
    梨视频ajax双重抓包B站学爬虫记录页面抓包这个页面下拉到底会刷出24个新视频，这是ajax随机加载的。下拉到底抓到数据查看数据包，请求为http://www.pearvideo.com/pano......
  • Zookeeper必知必会知识点（二）
    Zookeeper队列管理（文件系统、通知机制）两种类型的队列：1、同步队列，当一个队列的成员都聚齐时，这个队列才可用，否则一直等待所有成员到达。2、队列按照FIFO方式进行入队和......
  • JSON APIs and Ajax
    JSONAPIsandAjaxonclick希望代码仅在页面完成加载后执行。将名为DOMContentLoaded的JavaScript事件附加到document中。以下是实现的代码：document.addEventList......
  • 简单理解ajax
    一、什么是ajaxajax是一个近几年在前端开发中经常听到的名词,啥是ajax啊?首先,ajax不是一门编程语言,它是一种技术,它的作用是减少网络传输量,提高了用户体验.咋来提高......
  • ZooKeeper 必知必会的知识点(一)
    ZooKeeper是什么？ZooKeeper是一个分布式的，开放源码的分布式应用程序协调服务，是Google的Chubby一个开源的实现，它是集群的管理者，监视着集群中各个节点的状态根据节点提......
  • Vue3知识点之数据侦测
    Vue的核心之一就是响应式系统，通过侦测数据的变化，来驱动更新视图。实现可响应对象的方式通过可响应对象，实现对数据的侦测，从而告知外界数据变化。实现可响应对象的方式：ge......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99