Ajax的异步核心：XMLHTTPRequest

最新推荐文章于 2021-06-10 15:17:35 发布

蓝梦_Hi

最新推荐文章于 2021-06-10 15:17:35 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： xmlhttprequest ajax function 服务器 stylesheet menu

本文链接：https://blog.csdn.net/kdmhh/article/details/4787206

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

XMLHTTPRequest是依附于浏览器的一个组件，浏览器不同针对的组件名称也不同。XMLHTTPRequest是Firefox中组件的名称，在IE中叫XMLHTTP。“XMLHTTP”有两个优点：局部刷新、异步读取。

Ajax的实现步骤：

1、 创建异步对象：

在IE中：var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

在Firefox中：var xmlhttp = new XMLHttpRequest;

2、 加载数据所在的服务器：

Ajax获取数据可以从其他网站获取，也可以从本地的XML文件获取，加载数据服务器的语法：xmlhttp.open(method, url, aysc);

method：表示向服务器发送请求的方法，有5种类型：GET、POST、HEAD、PUT、DELETE。最常用的是GET和POST。注意：如果数据处理不改变模型的状态（比如获取数据）就用GET，如果编辑、更新数据等，则用POST。

Aysc表示是否使用异步方式获取数据，如果是true，则XMLHTTP将异步调用对象。

3、 异步调用服务器状态的变化：

一旦服务器与客户端进行交互，要控制客户端的变化，就需要判断目前交互的状态。所以在异步调用之前需要将状态变化的事件onreadystatechange与javascript定义的方式挂钩。

xmlhttp.onreadystatechange = 方法名; 注意：方法后面不加括号。

下面是异步调用在与服务器交互时的5种状态：

0 未初始化异步对象创建完毕，并未使用open方法。

1 初始化异步对象创建完毕，并未使用send方法发送请求。

2 发送数据 send方法完成，正在等待服务器响应。

3 数据正在发送正在接受数据，但并未完成。

4 异步调用完成调用完成，可以使用responseText活responseXML获取数据。

4、 发送一个HTTP请求：

加载完请求的服务内容后，还需要发送一个HTTP请求，一般表示请求的数据。通过发送请求时设置的参数，来有选择的挑选数据：

xmlhttp.send(params);

当系统调用send方法后，后台与服务器的交互才真正开始，状态编号就开始变化。

5、 处理异步获取的数据：

最终客户端获取的数据主要有两种：文本型和XML类型。文本型数据用xmlhttp.responseText获取；XML类型使用xmlhttp.responseXML获取。

下面举一个使用Ajax+CSS实现动态菜单效果的例子：

StyleSheet.css代码:

body { font-size:0.75em; background-color:#ccccff; } .menutop { color:#ff6600; background-color:#0066ff; text-decoration:underline; cursor:hand; border-right:#009999 thick double; border-top:#009999 thick double; border-left:#009999 thick double; border-bottom:#009999 thick double; } .menulist { color:#ff6600; background-color:#33ccff; display:none; }

Default.aspx代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="StyleSheet.css" mce_href="StyleSheet.css" type="text/css" rel="Stylesheet"/> <mce:script type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div class="menutop" οnmοuseοver="listmenu();" οnmοuseοut="putawaymenu();">网站功能</div> <div class="menulist" id="menu"></div> </form> </body> </html>

DataPage.aspx代码：

protected void Page_Load(object sender, EventArgs e) { ArrayList mylist = new ArrayList(); mylist.Add("技术论坛"); mylist.Add("技术文章"); mylist.Add("音乐点播"); mylist.Add("游戏空间"); StringBuilder mystr = new StringBuilder(); for (int i = 0; i < mylist.Count; ++i) { mystr.Append(mylist[i].ToString()+","); } Response.Clear(); Response.Write(mystr); }

最后效果如下图：

Ajax+css动态菜单