（2）asp.net-Ajax-get请求以及IE浏览器兼容性的处理

冷不防 2022-11-25 04:05 125阅读 0赞

我们可以打开这个网址[https://www.w3school.com.cn/ajax/index.asp][https_www.w3school.com.cn_ajax_index.asp]，里面有关于Ajax的详细介绍。  
现在开始我们的正题趴！这里介绍了使用ajax的步骤，以及对于ie浏览器兼容性问题的处理

## 1.Ajax-get请求 ##

*  建立一个html页面。在这个页面我先添加了基本结构，以及解释了ajax请求的5个步骤

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Ajax_get</title>
        <script> //加载就执行这个函数 window.onload = function (ev) { //通过选择器找到button var oBtn = document.querySelector("button"); //绑定button的点击事件（button被点击就发送一个ajax请求） oBtn.onclick = function (evl) { //使用Ajax的五个步骤 //1.创建一个异步对象(Ajax的核心对象：XMLHttpRequest) //2.打开这个对象,设置请求方式和请求地址，参数(请求方式，请求url，异步还是同步) //3.发送请求 //4.监听状态的变化 //5.处理返回的结果 } } </script>
    </head>
    <body>
        <button>发送请求</button>
    </body>
    </html>

*  添加一个一般处理程序，添加下列内容。  
    ![在这里插入图片描述][20200807092736378.png]
 *  **现在我们来一步一步的完成ajax请求**  
    （注意：蓝色箭头是添加的注释，红色框是添加的代码）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70]
 *  运行结果：  
    运行程序，点击F12，然后点击控制台，发现控制台已经打印出了信息，注意红色的小箭头，发现这里显示3，说明这句话打印了三次，就说明状态改变了三次。  
    ![在这里插入图片描述][20200807093026215.png]  
    在官方文档上，我们可以看到：  
    ![在这里插入图片描述][20200807093037621.png]  
    我们需要关注的是： 4 -请求完成这个状态。所以我们修改代码：![在这里插入图片描述][2020080709305072.png]  
    然后我们运行程序（只打印了一次），说明请求完成而且响应就绪。  
    ![在这里插入图片描述][20200807093101780.png]  
    现在这里有一个小问题，当我们修改把正确的URL修改成一个错误的地址，会产生错误。但是仍然可以打印出来上面那句话。这是因为我们只判断了它的请求状态，当请求完成就打印。所以我们应该再做一个判断（请求成功还是失败）。  
    先来了解一下状态码吧！  
    [https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin][https_baike.baidu.com_item_HTTP_E7_8A_B6_E6_80_81_E7_A0_81_5053660_fr_aladdin]
 *  修改代码，先把url改成错误的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 1]  
    运行程序：  
    ![在这里插入图片描述][2020080709332958.png]
 *  现在我把url改成正确的，然后贴上完整代码（这就是一个ajax发送get请求的完整过程，为了方便查看，就先删掉注释啦）

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Ajax_get</title>
        <script> window.onload = function (ev) { var oBtn = document.querySelector("button"); oBtn.onclick = function (evl) { var xhr = new XMLHttpRequest(); xhr.open('GET', "Handler.ashx", true); xhr.send(); xhr.onreadystatechange = function (ev2) { if(xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status <= 300 || xhr.status === 304) { console.log("接收到服务器返回的数据"); } else { console.log("没有接收到服务器的数据"); } } } } } </script>
    </head>
    <body>
        <button>发送请求</button>
    </body>
    </html>

**在这里我们发现，我们并没有拿到Handler.ashx返回的数据，怎么拿到呢？**  
![在这里插入图片描述][20200807093408937.png]  
现在我们只需要修改代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 2]  
运行程序（以弹框的形式输出了我们返回的值）：  
![在这里插入图片描述][2020080709342612.png]

## 2.在ie中的使用问题： ##

*  所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。所以我们在使用XMLHTTPRequest时要先判断浏览器支不支持它。  
    在官方文档上，我们会看到怎么处理兼容性问题  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 3]所以我们只需要稍作添加即可：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 4]
 *  在IE浏览器中，如果通过Ajax发送Get请求，那么IE浏览器认为同一个URL只有一个结果。所以我们需要保证url的值每一次都不一样。  
    比如：你可能会发现下面的情况，当你访问百度主页时，地址后面可能会跟一长串数字，这就是百度了为了让用户每次都能够正常请求到服务器的数据所做的处理。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 5]  
    为了解决这个问题，我们只需要在url后面增加一些内容即可。怎么实现呢  
    时间戳是一个很好的选择。  
    ![在这里插入图片描述][20200807093521281.png]  
    运行程序，仍然会出现刚刚已经出现的弹框！

这样我们就处理好啦！

唔完整的代码~

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

[https_www.w3school.com.cn_ajax_index.asp]: https://www.w3school.com.cn/ajax/index.asp
[20200807092736378.png]: /images/20221124/acf2e9d473b8487daec1b8868f3fc9f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70]: /images/20221124/53b322f65c704cf2b0a17abfea70f12f.png
[20200807093026215.png]: /images/20221124/f1e2a6d1986a4a66848feb2d7f2f639f.png
[20200807093037621.png]: /images/20221124/1b523af41d4642a5af92d93de84ee1f8.png
[2020080709305072.png]: /images/20221124/8d544a69e4f9409a9c74d2d8c772afe1.png
[20200807093101780.png]: /images/20221124/3758399c3f954c1f9792cad751324c1c.png
[https_baike.baidu.com_item_HTTP_E7_8A_B6_E6_80_81_E7_A0_81_5053660_fr_aladdin]: https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 1]: /images/20221124/451e231a40ff44f8a6505fcdd8c73abb.png
[2020080709332958.png]: /images/20221124/6bd8ef3179ba4ae6a6e64be6f6ece835.png
[20200807093408937.png]: /images/20221124/a3c860e85a9e4bdead35445bcfd0571d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 2]: /images/20221124/e8775d72e5014d0fa4bf7677a9fc733c.png
[2020080709342612.png]: /images/20221124/0d40e6e2fcb64abca8fd1e547303446d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 3]: /images/20221124/7fb468592b7f4f9eb97e706aee7efb9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 4]: /images/20221124/5f10e9637b3248e08ab3557b84680324.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 5]: /images/20221124/4d107517036b4678a699ea4ebc2a8b4b.png
[20200807093521281.png]: /images/20221124/8d8a307dd8424f109702b1d445f450a6.png