最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • Ajax 学习笔记

    正文概述 掘金(繁华落尽、空城殇)   2021-07-29   544

    前言

    在前端开发过程中,除了学习使用 HTML + CSS 来达到某些好看酷炫的特定效果外,还有一个不可或缺的模块值得我们学习,那就是网络请求。而在实际工作中,我们常使用第三方库或者框架(如 axios、jQuery等等)来达到发送网络请求获取服务器数据的目的。

    入学须知

    在继续深入了解Ajax之前,我们需要先了解几个概念;

    1. 同步和异步;
    2. 什么是 XML;
    3. Get 和 Post 请求方式的区别;
    4. Ajax 的核心 XMLHTTPRequest;

    同步与异步

    先看一下我之前看到的一个AJAX请求的例子:

    异步AJAX:

    同步AJAX:

    通过上述的例子,我们可以看出来同步和异步的区别了:

    同步是指发送一个请求,然后等待,再发送下一个请求;

    异步是指发送一个请求,不需要等地啊,随时发送下一个请求。

    区别在于一个需要等待,一个不需要等待。

    XML是什么

    XML 是指可扩展标记语言(Extensible Markup Language)。它是一种标记语言,类似于 HTML,XML 标签没有被预定义,需要自行定义标签,同时也具有自我描述行。主要用来传输和存储数据的,且是 W3C的推荐标准。

    XML的例子:

    <bookstore> 
        <book category="COOKING"> 
            <title lang="en">家常菜的制胜一击</title> 
            <author>陈宇慧</author> 
            <year>2020</year> 
            <price>34.50</price> 
        </book> 
        <book category="CHILDREN">
            <title lang="en">少年读史记</title> 
            <author>张嘉骅</author> 
            <year>2015</year> 
            <price>50</price> 
        </book> 
        <book category="WEB"> 
            <title lang="en">JavaScript高级程序设计</title> 
            <author>马特·弗里斯比</author> 
            <year>2020</year> 
            <price>91</price> 
        </book>
    </bookstore>
    

    XML 常见解析的方式有2种,一种是 DOM 解析,一种是 SAX 解析。其中 DOM 解析是一次性读取 XML 文件,生成树状结构,优点是操作方便,缺点是比较耗费内存;SAX 解析是按照事件驱动的方式解析,占用内存少,但是编程复杂。

    Get 和 Post 请求方式的区别

    其实作为互联网人,这两个基础请求方式,应该是比较熟悉的。虽然熟悉,但是面试的时候还是会被问到,可能每个面试者都希望得到更多的答复吧。

    Get 和 Post 请求方式直观的看,就是 Get 请求会把参数包含到 URL 中,POST 是通过 request body 进行参数传递。

    Get 和 Post 其实是 HTTP协议的两种发送请求的方式。 HTTP是基于 TCP/IP 的超文本传输协议,也就是说 HTTP 请求的底层是 TCP/IP,所以 Get 和 Post 都是 TCP 链接。

    区别

    1. 在后退或者刷新时,Get 请求无害,而 Post 会重新提交请求;
    2. Get 请求产生的地址可以设置为书签,而 Post 不可以;
    3. Get 请求会被浏览器主动缓存,而 Post 不会,除非手动设置;
    4. Get 请求只能进行 URL 编码, 而 Post 支持多种编码方式;
    5. Get 请求参数会被完整的保留在浏览器历史记录里,而 Post 中的参数不会被保留;
    6. Get 请求在 URL中传递的参数是有长度限制的(URL 长度受限,最大长度为 2048 个字节),而Post 没有;
    7. Get 请求对于参数的数据类型只能是 ASCII 字符,而Post 没限制,还允许二进制数据;
    8. Get 请求安全性较差,因为发送的数据是 URL 的一部分,而 Post 的参数不会被保存在浏览器或 web 服务器日志中;
    9. Get 请求的数据在 URL 中对所有人都是可见的,而 Post 不会显示在 URL 中。
    10. 发送 Get 请求时,浏览器会把 Http Header 和 data 一并发送出去,服务器响应并返回数据,产生一个 TCP 数据包,而发送 POST 请求时,浏览器会先发送 HTTP Header,服务器响应 100 continue,浏览器再发送 data,服务器响应 200并返回数据,产生两个 TCP 数据包

    XMLHTTPRequest

    XMLHTTPRequest(XHR)是在 IE5 中首先引入的,是一种支持异步请求的技术,主要是用于与服务器交互,通过 XHR 可以在不刷新页面的情况下进行请求特定 URL,获取数据,使得 JavaScript 可以及时向服务器发送请求和处理响应,而不阻塞用户。同时它也是 Ajax 的核心机制。

    XHR 常用对象方法

    • abort()

      该方法主要是用于取消当前请求

    • getAllResponseHeaders()

      该方法主要是为了获取头信息

    • getResponseHeader()

      该方法主要是为了获取某指定的头信息

    • open(method, url, async)

      该方法主要用于指定请求的类型、URL以及是否异步处理请求。

      method 请求参数用于指定请求方式: Get 或 Post;

      url 请求参数表示请求地址;

      async 请求参数表示同异步,值为 bool 类型,true 是异步,false 是同步。

    • send(string)

      该方法用于发送请求到服务端,请求参数 string 只用于 post 请求。

    • setRequestHeader(header, value)

      该方法用于向请求添加 http 头。该方法必须在 open() 方法和 send() 之间调用,如果多次对同一个请求头赋值,只会生成一个合并了多个值的请求头。

      header 参数表示 头的名称;

      value 参数表示 头的值。

    XHR 常用对象属性

    • timeout

      该属性表示的是请求的最大请求时间(毫秒),若超出该时间,请求会自动终止。

    • readyState

      该属性表示的是请求的状态码。

      常见的状态码有:

      • 0 表示请求未初始化;
      • 1 服务器链接已建立,open() 方法已经被调用。在这个状态中,可以通过 setRequestHeader() 方法来设置请求的头部,也可以调用 send() 方法来发送请求;
      • 2 请求已接收,send() 方法已经被调用,并且头部和状态已经可获得;
      • 3 处理请求中,响应体部分正在被接受,如果 responseType 属性是 text 或者空字符串, responseText 将会在载入的过程中拥有部分响应数据;
      • 4 请求已完成,且响应已就绪。
    • onreadystatechange

      该属性表示一个回调方法,当 readyState 属性值发生改变会自动被调用。

      当一个 XHR 请求被 abort() 方法取消时,这属性的毁掉方法不会被触发。

      ⚠️⚠️⚠️该属性不能用于同步 XHR 对象。⚠️⚠️⚠️

      语法: XHR.onreadystatechange = callback;

    • responseText

      该属性返回作为一个字符串的响应数据,如果请求未成功或尚未发送,则返回 null。

    • responseXML

      该属性返回作为 XML 数据响应数据,如果请求未发送或者未成功以及不能返回数据不能被解析为 XML 或 HTML时,则返回 null。

    • status

      该属性返回响应中的数字状态码,在请求完成前或 XHR 出错时,该属性值为 0。常见的状态码有 200、401、404等。

    • statusText

      该属性表示响应中返回的状态文本,它包含了数字状态码和对应的文本信息。如:"200 OK"等。当请求状态码为 0 和 1时,该属性值是一个空字符串。

    Ajax

    工作原理

    Ajax 的工作原理相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化,简单来说就是通过 XMLHTTPRequest 对象向服务器发送网络请求,获取服务器响应数据,然后通过 JavaScript 来操作 DOM 从而更新页面,而不影响用户其他操作。

    常见使用

    使用原生 JavaScript 中的 Ajax

    1. 创建一个 XMLHttpRequest 对象;
    var xhr = new XMLHttpRequest()
    
    1. 设置请求方式、请求的地址和是否异步执行,示例为异步请求;
    /// Get 请求
    xhr.open('get', '/news/getNewsPage?pageNumber=' + pageNumber + 'pageSize' + pageSize , true)
    
    /// Post 请求
    xhr.open('post', '/news/getNewsPage', true)
    
    1. 设置请求头;
    /// Get 请求,可以不设置请求头
    ---------------
    /// Post 请求,需要设置
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    
    1. 发送请求到服务端;
    /// Get 请求
    xhr.send()
    
    /// Post 请求
    xhr.send('pageNumber=1&pageSize=20')
    
    1. 处理服务器响应数据;
    // 当 XMLHttpRequest 对象设置了为异步,且该请求未被abort(),该属性回调方法才有效。具体参考上一大章节
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var res = JSON.parse(xhr.responseText)
            console.log(res)
        }
    }
    

    使用 jQuery 中的 Ajax

    $.ajax({
        type: 'get',   /// 请求方式
        url: '',       /// 请求地址
        data: {},      /// 请求参数
        dataType: 'json',
        beforeSend: function (xhr) {
        /// 发送该网络请求之前会进入该回调函数
        },
        success: function (res) {
        /// 成功拿到响应结果之后会进入该回调函数
        },
        error: function (xhr, error) {
        /// 失败回调函数
        },
        complete: function () {
        /// 不管成功还是失败,都会进入该回调函数
        }
    })
    

    小结

    1. Ajax 是一种创建交互式网页应用的网页开发技术,最大的特点就是可以实现无刷新改变页面内容;

    2. Ajax 的优势有:

    • 通过异步模式,提升了用户体验;

    • 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用;

    • Ajax 引擎在客户端运营,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。


    起源地 » Ajax 学习笔记

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元