(四).net ajax异步刷新

忘是亡心i 2022-04-05 15:17 234阅读 0赞

# 什么是ajax #

ajax=Asynchronous Javascript And XmlHttpRequest(XHR)  
ajax是对通用标准的封装。  
AJAX关键技术：

> 1，使用XHTML(HTML)和css构建标准的显示层  
> 2，使用DOM（document object model）进行动态显示和交互  
> 3，使用XML和XLST进行数据交换和操纵  
> 4，使用XMLHttpRequest异步获取数据  
> 5，使用javascript 将所有元素绑定在一起  
> 6，DOM，当创建了一个网页并加载到web浏览器中，就会在幕后创建一个文档对象模型  
> 7，DOM表示被加载到浏览器窗口的当前页面，可以通过javascript访问这个模型  
> 8，DOM把一份文档表示为一棵树  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70]

树：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 1]  
传统的网络请求与ajax请求对比：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 2]传统的与ajax对比,ajax实现了页面的局部刷新,而不是重新加载整个页面,提高了响应速度,减少了网络数据的传输,改善了用户体验.

## [如何在.net][.net] aspx中使用ajax呢？ ##

### 1添加ajax扩展库（是一个.dll文件） ###

![在这里插入图片描述][20181213091459811.png]  
在visualstudio中的toolbox处，右键-》addTab,然后随便取个名字（MyAjax）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 5]

### 2往页面中拖入ManagerScript控件 ###

### 3拖入UpdatePanel控件 ###

### 4拖入需要异步刷新的控件到UpdatePanel中（一定要放到UpdatePanel中，不然没效果） ###

## 怎么判断是否是实现了异步刷新呢？ ##

### 1通过在pageLoad函数中输出当前时间即可，如果是异步刷新，pageLoad是只进入一次的，那个时间也就是不变的 ###

### 2观察浏览器中该页面是否闪动（闪动表示整个页面重新加载了） ###

.net 中的ajax不需要改变已有的所有代码,只需要在设计视图下将需要异步刷新的控件拖动到updatePanel中即可,十分方便.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70]: /images/20220405/750738f02836476f97145c7c180e2a5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 1]: /images/20220405/b5eccfc635434519a6bebc2418031408.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 2]: /images/20220405/386cbf2544d441af9d99829566f4f3a8.png
[.net]: http://xn--vqqq4qt1b.net
[20181213091459811.png]: /images/20220405/2d4e0d4d54334ce1a28532c8ec3e91f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 3]: /images/20220405/33fccdc95c6546c785cbc2eb581baae7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 4]: /images/20220405/84fbacc9e9514d82a07e70bde2100fb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 5]: /images/20220405/2080abc78e724e40b37e3eafe7a808b1.png