JavaScript封装Ajax（类JQuery中$.ajax()方法）
来源：互联网 发布：手机淘宝改地址怎么改 编辑：程序博客网 时间：2024/05/10 10:11
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
- JavaScript封装Ajax（类JQuery中$.ajax()方法）
- JavaScript封装Ajax（类JQuery中$.ajax()方法）
- JavaScript ajax 方法封装
- JavaScript Ajax封装 类似jQuery Ajax
- jQuery封装的Ajax方法
- 自定义封装Jquery ajax方法
- JQuery封装的ajax方法
- jQuery中Ajax-ajax方法
- [JavaScript][AJAX][JQuery]利用回调接口封装AJAX类|原生JavaScript的AJAX写法优化
- jQuery中$.Ajax方法
- jQuery框架中封装好的ajax方法
- 方法封装-Ajax+Jquery提交表单
- 【Ajax 3】JavaScript封装Ajax
- jQuery ajax - ajax() 方法
- jQuery ajax - ajax() 方法
- jQuery ajax - ajax() 方法
- jQuery ajax - ajax() 方法
- jQuery ajax - ajax() 方法
- Android 百度地图 简单实现--- 美食搜索
- Leetcode Implement Queue using Stacks
- Nginx与jetty结合
- 龙山充电器——常州市龙山电子科技有限公司
- 平安科技移动开发二队技术周报（第十一期）
- JavaScript封装Ajax（类JQuery中$.ajax()方法）
- 回调函数（__stdcall)
- java 基础总结
- 条件变量pthread_cond_t使用示例
- Easyui 二级菜单
- 苹果iPhone连接wifi就进去www.apple.com主页 下边显示 <HTML><HEAD><TITLE>Success</TITLE></HEAD><BODY>Success</BODY>
- codeforces 339E Three Swaps （搜索 dfs）
- Communications Link failure
- 数据公钥加密和认证中的私钥公钥
