.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> /* type 代表 请求方式 url 代表 请求url路径 data 代表 发送数据 success 代表 下载数据成功以后执行的函数 error 代表 下载数据失败以后执行的函数 */ function $ajax({type = "get", url, data, success, error}){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("") }<span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">==</span> <span class="token string">"get"</span> <span class="token operator">&&</span> data<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> url <span class="token operator">+=</span> <span class="token string">"?"</span> <span class="token operator">+</span> <span class="token function">querystring</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">==</span> <span class="token string">"get"</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span> <span class="token comment">//设置提交数据格式</span> xhr<span class="token punctuation">.</span><span class="token function">setRequestHeader</span><span class="token punctuation">(</span><span class="token string">"content-type"</span><span class="token punctuation">,</span> <span class="token string">"application/x-www-form-urlencoded"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> data <span class="token operator">?</span> xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token function">querystring</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span><span class="token punctuation">(</span>success<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">success</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">error</span><span class="token punctuation">(</span><span class="token string">"Error："</span> <span class="token operator">+</span> xhr<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">querystring</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> attr <span class="token keyword">in</span> obj<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> str <span class="token operator">+=</span> attr <span class="token operator">+</span> <span class="token string">"="</span> <span class="token operator">+</span> obj<span class="token punctuation">[</span>attr<span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">"&"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> str<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> str<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">var</span> aBtns <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* 当我们下载完数据以后需要对数据的处理方式不一样 【注】$ajax，我们需要按照传参的顺序，依次传入我们的参数。 */</span> aBtns<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">$ajax</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> url<span class="token punctuation">:</span> <span class="token string">"code14/"</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span> username<span class="token punctuation">:</span> <span class="token string">"小明"</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span> password<span class="token punctuation">:</span> <span class="token string">"123abc"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> success<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"GET请求到的数据："</span> <span class="token operator">+</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> error<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>msg<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"GET请求数据错误："</span> <span class="token operator">+</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> aBtns<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">$ajax</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> type<span class="token punctuation">:</span> <span class="token string">"post"</span><span class="token punctuation">,</span> url<span class="token punctuation">:</span> <span class="token string">"code14/"</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span> username<span class="token punctuation">:</span> <span class="token string">"小花"</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span> password<span class="token punctuation">:</span> <span class="token string">"123abc"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> success<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"POST请求到的数据："</span> <span class="token operator">+</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> error<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>msg<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"POST请求数据错误："</span> <span class="token operator">+</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>button<span class="token operator">></span><span class="token constant">GET</span>请求<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span>button<span class="token operator">></span><span class="token constant">POST</span>请求<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>