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 }
复制代码

你可能感兴趣的:(Ajax)