Ajax学习笔记之一----------第一个Ajax Demo[转载]

原文地址： http://www.cnblogs.com/pjx412/archive/2011/05/04/2037014.html

一。核心推动力：XMLHttpRequest对象
XMLHttpRequest对象在javascript 中创建并使用，客户端可以仅仅从服务器端获取它需要的信息：通过与DOM和CSS的结合，就可以实现局部刷新的效果；同时还可以通过XMLHttpRequest对象异步提交信息，将用户的输入在后台提交到服务器所在而无需刷新这个页面。 XMLHttpRequest催生了Ajax概率的诞生，称它是Ajax的核心推动力毫不为过。
XMLHttpRequest对象主要的属性与方法：

方法	描述
abort()	终止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应头部作为键/值对返回给客户端
getResponseHeader("header")	返回指定头部信息字符串
open("method", "url",true)	建立与服务器的连接。method参数可以是GET、POST或PUT,GET一般用于读取数据的情况， POST一般则是用于修改服务器资源的情况。url参数可以是相对URL或绝对URL。true 是指定异步读取服务器资源,false则相反
send(param)	向服务器发送请求。param参数是向服务器发送的参数，格式如："city=beijing"。不过参数一般都在open方法的url参数中传递
setRequestHeader("header", "value")	把指定头部设置为所提供的值。在设置任何头部之前必须先调用open()

属性	描述
onreadystatechange	请求的状态改变时都会触发这个事件处理器，通常会给这个属性指定一个回调函数。在这个回掉函数里面根据状态的不同进行相应的操作。
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，返回字符串
responseXML	服务器的响应，返回XML对象。
status	服务器的HTTP状态码（200对应OK，404对应Not Found（未找到）....）
statusText	HTTP状态码的相应文本（OK或 Not Found（未找到）等等）

二。还是来个实际点吧，看个例子。
1。新建一个空网站，AjaxWeb。添加页面 Default.aspx,Default.aspx源码如下：

1 <body>
2 <form id="form1" runat="server">
3 <table>
4 <tr>
5 <td colspan="2" align="center">
6 Ajax实现局部刷新
7 </td>
8 </tr>
9 <tr>
10 <td>
11 填写城市名称：
12 </td>
13 <td>
14 <input id="txtCityName" type="text" />
15 </td>
16 </tr>
17 <tr>
18 <td>
19 </td>
20 <td>
21 <input type="button" value="查询" onclick="getData();" />
22 </td>
23 </tr>
24 <tr>
25 <td>
26 选择区域列表：
27 </td>
28 <td>
29 <select id="selAreas">
30 </select>
31 </td>
32 </tr>
33 </table>
34 </form>
35 </body>

2。js代码

1 <script language="javascript" type="text/javascript">
2 var xmlhttp;
3 function getData() {
4 var city = document.getElementById("txtCityName").value;
5 //IE
6 if (window.ActiveXObject) {
7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
8 }
9 //FireFox
10 else if (window.XMLHttpRequest) {
11 xmlhttp = new XMLHttpRequest();
12 }
13 xmlhttp.onreadystatechange = statechange;
14 xmlhttp.Open("POST", "datapage.aspx?city=" + city, true);
15 xmlhttp.Send();
16 }
17
18 function statechange() {
19 if (xmlhttp.readystate == 4) {
20 if (xmlhttp.status == 200) {
21 FillData(xmlhttp.responseText);
22
23 }
24 }
25 }
26
27 function FillData(strcity) {
28 document.getElementById("selAreas").options.length = 0;
29 var strcitys = strcity.toString().split(',');
30 for (var i = 0; i < strcitys.length; i++) {
31 document.getElementById("selAreas").add(new Option(strcitys[i], strcitys[i]));
32 }
33 }
34 </script>

这段js在IE中运行正常，但是在FireFox里测试存在几个问题：
xmlhttp.Open is not a function：Open改成open就可以了，这是因为IE中区分大小写没那么严格，但是FireFox是严格区分大小的。所以为了js代码能更好的兼容各种浏览器，最好区分大小写。
xmlhttp.Send is not a function：同上一个错误一样，将 Send改成send即可。
xmlhttp.readystate is undefind：类似错误， readystate应该为readyState
uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://localhost:4761/AjaxWeb/Default.aspx :: FillData :: line 38" data: no]：
这个错误的原因是 document.getElementById("selAreas").add(new Option(strcitys[i], strcitys [i]))中的add方法不是通用方法，应该改成：document.getElementById ("selAreas").options.add(new Option(strcitys[i], strcitys[i]));

3。还有一个页面：datapage.aspx,源码就一句：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="datapage.aspx.cs" Inherits="datapage" %>
注意：datapage.aspx必须将上句代码下的源码全部删除，否则会服务器会将整个页面的源码发送给客户端，而不是我们所需要的结果。
后台代码：

1 protected void Page_Load(object sender, EventArgs e)
2 {
3 string city = Request.QueryString["city"];
4 Response.Clear();
5 switch (city)
6 {
7 case "beijing":
8 Response.Write("朝阳,海淀,东城,西城");
9 break;
10 case "shanghai":
11 Response.Write("浦东,静安,虹口,徐汇");
12 break;
13 case "jinan":
14 Response.Write("历下,历城,市中,天桥");
15 break;
16 }
17 }

至此，通过XMLHttpRequest对象实现无刷新的功能全部完成。

jQuery的Ajax方法简单实现

1 function FillDataByJquery() {
2 $("#selAreas").empty();
3 var city = $("#txtCityName").val();
4 $.ajax({
5 type: "Post",
6 url: "datapage.aspx",
7 data: "city=" + city,
8 dataType: "text",
9 success: function (ret) {
10 if (ret.length > 0) {
11 var strcitys = ret.toString().split(',');
12 for (var i = 0; i < strcitys.length; i++) {
13 document.getElementById("selAreas").options.add(new Option(strcitys[i], strcitys[i]));
14 }
15 }
16 }
17 });
18 }

posted on 2015-04-29 11:27 Games 阅读(557) 评论(0) 编辑收藏举报