（4）完结：jQuery——AJAX封装post请求，以及细节处理

傷城~ 2022-11-26 06:58 132阅读 0赞

1.  Ajax的post请求也分为5个步骤，我们只需要把方式改为post即可（新建一个html页面）

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Ajax_post</title>
        <script> window.onload = function (ev) { var oBtn = document.querySelector("button"); oBtn.onclick = function (evl) { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open('POST', "Handler.ashx?t=" + (new Date().getTime()), true); xmlhttp.send(); xmlhttp.onreadystatechange = function (ev2) { if (xmlhttp.readyState === 4) { if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304) { alert(xmlhttp.responseText); } else { console.log("请求失败"); } } } } } </script>
    </head>
    <body>
        <button>发送请求</button>
    </body>
    </html>

1.  建立一个Handler.ashx  
    ![在这里插入图片描述][20200810195639553.png]  
    我们不能像get请求一样将要传递的数据放在拼接在url后面，**那我们怎么传递数据呢？**  
    官方文档：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70]
2.  传递数据，我们只需要照着官方文档书写即可  
    ![在这里插入图片描述][20200810195723761.png]  
    运行  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 1]

## 封装ajax-post ##

*  因为我们不止一种请求方式，所以我们应该再添加一个参数来传递类型  
    ![在这里插入图片描述][20200810195820485.png]
 *  然后根据类型的不同，做出的处理不同  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 2]  
    这里我们的url是Handler.ashx：  
    ![在这里插入图片描述][20200810195857370.png]
 *  创建一个新的html进行测试：

创建一个新的html进行测试：
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>测试自己封装的方法</title>
       
       <script src="myAjax - post.js"></script>
       <script> window.onload = function (ev) { var oBtn = document.querySelector("button"); oBtn.onclick = function (ev1) { //这里的handler.ashx需要和你自己的对应 ajax("POST", "Handler.ashx", { "userName": "纯纯", "userPwd":"530" }, 3000, function (xhr) { alert(xhr.responseText); }, function () { alert("请求失败"); }) } } </script>
    </head>
    <body>
       <button>发送请求</button>
    </body>
    </html>

结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 3]

*  我们发现官方的js，是这样调用ajax的。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 4]
 *  观察自己封装的js与官方封装js的差别：  
    1）对于type，官方的无论我们传入大写还是小写均可以正确处理，但是我们的只能正确处理大写的。  
    ![在这里插入图片描述][20200810200030489.png]  
    2）我们发现我们自己封装的方法传入参数的位置是固定的，如果交换参数位置就会报错，而jquery官方传入的参数是一个对象，所以没有顺序问题。  
    在自己封装的js里找到方法function ajax(type, url, obj, timeout, success, error)\{\}进行修改  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 5]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 6]  
    然后我们把这里所有的obj改成data

现在引入我们自己封装的js进行测试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][20200810200139425.png]

[20200810195639553.png]: /images/20221124/aca61e28922a4b90be3e470e25a40f4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70]: /images/20221124/2b11cbf0e2314aa68b2e2ac44cc79e3c.png
[20200810195723761.png]: /images/20221124/dd53a92ebe5c4bccae426a225dc46e40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 1]: /images/20221124/ab212cf36a6d46d7bd5028d34c258dea.png
[20200810195820485.png]: /images/20221124/c45586ff0f44417885ac5f6bde840a2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 2]: /images/20221124/487f40e34eff4b299200ed4aec9d7cb1.png
[20200810195857370.png]: /images/20221124/a061ea30cc8d439293d4e68d84a9139d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 3]: /images/20221124/fb4d4ea3a71c4a5f8c20db92aab7e451.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 4]: /images/20221124/74e2ab6a819741ada6670782d6bbcd4c.png
[20200810200030489.png]: /images/20221124/645bde6518784861a91f3af923c794ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 5]: /images/20221124/c90456ae67f04652ba1590f0f177c4e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 6]: /images/20221124/74fc1a5c46b4482b87d40b82c67b5923.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 7]: /images/20221124/d390afeebf4a45ec8d0f844c7cc5e214.png
[20200810200139425.png]: /images/20221124/485c9c397e004ec6ace6de39fb814ceb.png