JavaScript封装Ajax（类JQuery中$.ajax()方法）

最新推荐文章于 2024-08-26 20:25:07 发布
最新推荐文章于 2024-08-26 20:25:07 发布
阅读量506 收藏
点赞数
分类专栏： js 文章标签： javascript ajax

ajax.js

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box;<span style="background-color: rgb(240, 240, 240); line-height: 1.45;">font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(exports, document, undefined)</span>{</span>
<span class="hljs-pi" style="color: rgb(0, 102, 102); box-sizing: border-box;">    "use strict"</span>;
    <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">Ajax</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(!(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">instanceof</span> Ajax)) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span>;
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;
    }
    Ajax.prototype = {
        init: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(opts)</span>{</span>
            opts = opts || {};
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts = opts;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type = opts.type || <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'get'</span>;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.url = opts.url || <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.data = opts.data || <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.dataType = opts.dataType || <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'text'</span>;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.async = opts.async || <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.success = opts.success || <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.error = opts.error || <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.xhr = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.createXMLHttpRequest.call(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.initEvent.call(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;
        },
        ajax: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(opts)</span>{</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.init.apply(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">arguments</span>);
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.open.call(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.send.call(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);
        },
        createXMLHttpRequest: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> xhr;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">try</span>{
                xhr = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> XMLHttpRequest();
            }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">catch</span>(e){
                console.log(e);
            }
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> xhr;
        },
        initEvent: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> _this = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.xhr.onreadystatechange = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(_this.xhr.readyState == <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span> && _this.xhr.status == <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>){
                    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(_this.xhr.status == <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>){
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(_this.opts.dataType === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'text'</span> || _this.opts.dataType === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'TEXT'</span>){
                            _this.opts.success && _this.opts.success(_this.xhr.responseText, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'success'</span>, _this.xhr);
                        }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(_this.opts.dataType === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'xml'</span> || _this.opts.dataType === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'XML'</span>){
                            _this.opts.success && _this.opts.success(_this.xhr.responseXML, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'success'</span>, _this.xhr);
                        }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(_this.opts.dataType === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'json'</span> || _this.opts.dataType === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'JSON'</span>){
                            _this.opts.success && _this.opts.success(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">JSON</span>.parse(_this.xhr.responseText), <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'success'</span>, _this.xhr);
                        }
                    }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(_this.xhr.status != <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>){
                        _this.opts.error && _this.opts.error(_this.xhr, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'error'</span>);
                    }
                }
            }
        },
        open: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'GET'</span> || <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'get'</span>){
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> str = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.data === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'string'</span>) && <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.data || <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.objectToString.call(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.data),
                    url = (str === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>) && <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.url || (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.url.split(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'?'</span>)[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>] + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'?'</span> + str);
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.xhr.open(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type, url, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.async);
            }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'POST'</span> || <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'post'</span>){
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.xhr.open(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.url.split(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'?'</span>)[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>], <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.async);
            }
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;
        },
        send: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'GET'</span> || <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'get'</span>){
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.xhr.send();
            }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'POST'</span> || <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.type === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'post'</span>){
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> str = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.data === <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'string'</span>) && <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.data || <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.objectToString.call(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.opts.data);
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.xhr.setRequestHeader(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'content-type'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'application/x-www-form-urlencoded'</span>);
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.xhr.send(str);
            }
        },
        objectToString: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(data)</span>{</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> data !== <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'object'</span>) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> data;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> str = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> prop <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> data){
                str += <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'&'</span> + prop + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'='</span> + data[prop];
            }
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> str.slice(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);
        }
    }
    exports.Ajax = Ajax;
})(window, document);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li></ul></span>

ajax.php

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="php" style="box-sizing: border-box;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"><?php</span>

<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$c</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$_REQUEST</span>[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'c'</span>];
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$arr</span> = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">array</span>(
    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'a'</span>=><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2014</span>,
    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'b'</span>=><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">array</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'c'</span>=><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$c</span>)
);
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">echo</span> json_encode(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$arr</span>);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

index.html

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); box-sizing: border-box;"><!DOCTYPE html></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">lang</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"en"</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">charset</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"UTF-8"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>ajax<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"ajax.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span><span class="javascript" style="box-sizing: border-box;">
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Ajax().ajax({
            type: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'get'</span>,
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ajax.php?c=123'</span>,      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 如果是get方式并且url包含参数，其参数会被data替代</span>
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// data: 'c=456',           // data参数格式可以为字符串或对象</span>
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// data: {c: 456},</span>
            dataType: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'json'</span>,
            async: <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>,
            success: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(data, status, xhr)</span>{</span>
                console.log(data);
            },
            error: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(xhr, status)</span>{</span>
                console.log(xhr);
            }
        });
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Ajax().ajax({
            type: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'post'</span>,
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ajax.php?c=123'</span>,      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 如果是get方式并且url包含参数，其参数会被data替代</span>
            data: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'c=456'</span>,              <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// data参数格式可以为字符串或对象</span>
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// data: {c: 456},</span>
            dataType: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'text'</span>,
            success: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(data, status, xhr)</span>{</span>
                console.log(data);
            },
            error: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(xhr, status)</span>{</span>
                console.log(xhr);
            }
        });
    </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li></ul>
似水丶年华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2、ajax实现方式之 $.ajax()
l0510402015的博客
05-14 307
$.ajax() * 语法：$.ajax({键值对}); * 常用键值对如下（多个键值用逗号分开）： a、url:"url路径" b、type:"请求方式" c、data: --- 参数，请求参数有两种格式 格式一：data:"参数1名称=参数1值&参数2名称=参数2值&..." 格式二：data{"参数1名称：参数1值","参数2名称：参数2值",...} ...
jQuery 封 装 Ajax
lol282582949的博客
05-05 275
JQuery 封装 ajax 在jQuery中，给我们封装了 Ajax 请求， 可以不用考虑兼容、跨域等等问题 只需要在设定请求时，设定不同的参数，就可以完成不同的请求 jQuery中 封装 ajax请求的方式有以下几种 1、$.get() get请求方式 get请求方式有四个参数 其中必填参数 是 url 地址， 其他都为选填参数，可有可无 参数的形式是对象形式 $.get({ url : 地...
用JS仿照$的符号封装
吃瓜群众的博客
10-25 1349
兼容IE678 div { width: 100px; height: 100px; background-color: pink; margin: 10px; }
ajax $.get怎么使用,解析jQuery中$.get、$.post、$.getJSON与$.ajax的用法
weixin_30109877的博客
08-05 1927
本节重点介绍jquery中调用ajax的4种方法：$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识，或没有ajax的概念，请先参阅下本站的javascript教程与jquery教程栏目中的相关内容。1、$.get$.get()方法使用GET方式来进行异步请求，它的语法结构为：$.get( url [, data] [, callback]...
jQuery中Ajax的$.get()、$.post()、$.ajax()函数
欢迎来到长风沛雨的博客
10-12 6004
（笔记，黑马Ajax的教程day01）浏览器中提供的所以jQuery 对 XMLHttpRequest 进行了封装，提供了一系列的 Ajax相关的函数，极大的jQuery中发起Ajax请求最常用的三个方法如下↓。
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
10-21
接下来，我们将详细介绍jQuery中各种AJAX函数，包括$.get()、$.post()、$.ajax()和$.getJSON()。 首先，$.get()方法是一种简单实现GET请求的方式。它的语法是$.get(url, [data], [callback])。其中url参数代表请求...
jQuery中Ajax函数：$.ajax()、$.post()、$.get()的使用、区别；
小枯林的博客
06-09 4101
本篇博客目的是：在OA系统十九：请假功能五遇到了【layui.$.post()：layui内置的jQuery的Ajax函数：向后台发起post请求；】；对此不太明白，故而本篇博客专门介绍jQuery中Ajax发起请求的内容。 首先，关于jQuery和Ajax可以参考：JQuery对Ajax的支持：简介$.ajax(jsonExpression)；JQuery对Ajax简化和封装简单示例；以及附近相关文章。 目录 0.预先介绍：jQuery AJAX 方法 1.$.ajax() 方法...
详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()
08-19
而Jquery库提供了一系列封装好的Ajax函数，如$.get(), $.post(), $.ajax(), 和$.getJSON()，这些函数简化了前端开发者与后端数据交互的过程。 ### 1. $.get() `$.get()`函数是最简单的一种异步请求方式，它发送一...
Jquery中$.getScript()$.getJSON
10-30
在jQuery库中，`$.getScript()`和`$.getJSON()`是两种非常实用的异步数据获取方法，它们分别用于加载JavaScript脚本和获取JSON格式的数据。这些方法都是基于jQuery的`$.ajax()`基础构建的，提供了更为简洁和方便的...
jQuery Ajax 实例详解 ($.ajax、$.post、$.get)
10-23
在 jQuery 中，我们有几种不同的方法来实现 AJAX 请求，包括 $.ajax(), $.post(), 和 $.get()。 1. **$.ajax()**: 这是 jQuery 提供的最全面的 AJAX 方法，可以处理各种复杂的需求。其基本语法如下： ```...
vue ref和reactive区别
灰海
08-25 568
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 390
npm。
2024前端面试题-js篇
FormAda的博客
08-22 937
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 384
【代码】【js】各类前端输入校验方法。
layui栅格布局设置列间距不起作用
最新发布
gc_2299的博客
08-26 609
记录layui栅格布局设置列间距不起作用的解决办法
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
liyy614的博客
08-23 851
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
vue全局参数
qq_34631220的博客
08-24 217
其它页面如果想监听改变。
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
????鱼干～
08-22 925
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
Vue路由
程小白的博客
08-19 768
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
jQuery中的Ajax封装与常用方法
本资源主要介绍了jQuery中的Ajax方法，包括$.ajax(), $.load(), $.post(), $.get(), $.getJSON()和$.getScript()等，强调了jQuery如何简化AJAX开发。 jQuery中的Ajax技术是JavaScript库jQuery的核心特性之一，它极...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值