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

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

1.Ajax-get请求
建立一个html页面。在这个页面我先添加了基本结构,以及解释了ajax请求的5个步骤

 

 

添加一个一般处理程序,添加下列内容。

 

 


现在我们来一步一步的完成ajax请求
(注意:蓝色箭头是添加的注释,红色框是添加的代码)

 

 


运行结果:
运行程序,点击F12,然后点击控制台,发现控制台已经打印出了信息,注意红色的小箭头,发现这里显示3,说明这句话打印了三次,就说明状态改变了三次。

 

 

在官方文档上,我们可以看到:

 

 

我们需要关注的是: 4 -请求完成这个状态。所以我们修改代码:

 

 


然后我们运行程序(只打印了一次),说明请求完成而且响应就绪。

 

 

现在这里有一个小问题,当我们修改把正确的URL修改成一个错误的地址,会产生错误。但是仍然可以打印出来上面那句话。这是因为我们只判断了它的请求状态,当请求完成就打印。

所以我们应该再做一个判断(请求成功还是失败)。
先来了解一下状态码吧!
https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin

修改代码,先把url改成错误的

 

 

运行程序:

 

 


现在我把url改成正确的,然后贴上完整代码(这就是一个ajax发送get请求的完整过程,为了方便查看,就先删掉注释啦)

 

 

在这里我们发现,我们并没有拿到Handler.ashx返回的数据,怎么拿到呢?

 

 

现在我们只需要修改代码:

 

 

运行程序(以弹框的形式输出了我们返回的值):

 

 


2.在ie中的使用问题:
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。所以我们在使用XMLHTTPRequest时要先判断浏览器支不支持它。
在官方文档上,我们会看到怎么处理兼容性问题

 

 


所以我们只需要稍作添加即可:

 

 

在IE浏览器中,如果通过Ajax发送Get请求,那么IE浏览器认为同一个URL只有一个结果。所以我们需要保证url的值每一次都不一样。
比如:你可能会发现下面的情况,当你访问百度主页时,地址后面可能会跟一长串数字,这就是百度了为了让用户每次都能够正常请求到服务器的数据所做的处理。

 

 

为了解决这个问题,我们只需要在url后面增加一些内容即可。怎么实现呢
时间戳是一个很好的选择。

 

 

运行程序,仍然会出现刚刚已经出现的弹框!
这样我们就处理好啦!

完整的代码~

 

 

 

posted @ 2022-04-13 15:10  唐飞  阅读(88)  评论(0)    收藏  举报