Ajax学习总结_H5之家 - 中国HTML5教程资源分享第一站

Ajax 学习总结
1 定义：定义：

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。

2

Ajax HTTP 请求

1)ajax 使用 http 请求

在传统的 JavaScript 编程中，假如您希望从服务器上的文件或数据库中得到任何的信息，或者向服务器发送信息的话，就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息，等待服务器的响应，然后一张新的页面会加载结果。

由于每当用户提交输入后服务器都会返回一张新的页面，传统的 web 应用程序变得运行缓慢，且越来越不友好。

通过利用 AJAX，会通过 JavaScript 和 XMLHttpRequest 对象，直接与服务器来通信。

通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，他或她不会注意到脚本在后台请求过页面，或向服务器发送过数据。

2) XMLHttpRequest 对象

通过使用 XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面！

XMLHttpRequest 对象得到下列浏览器的支持：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。

Ajax XMLHttpRequest 对象的属性：

onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

xmlHttp.onreadystatechange=function()

{

// 我们需要在这里写一些代码

}

readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

这是 readyState 属性可能的值：

状态

描述

0

请求未初始化（在调用 open() 之前）

1

请求已提出（调用 send() 之前）

2

请求已发送（这里通常可以从响应得到内容头部）

3

请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）

4

请求已完成（可以访问服务器响应并使用它）

我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

// 从服务器的 response 获得数据

}

}

responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

document.myForm.time.value=xmlHttp.responseText;

}

}

3） ajax 请求服务器）

要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。

open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）第二个参数规定服务器端脚本的 URL。。第三个参数规定应当对请求进行异步地处理。

send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录，那么代码是这样的：

xmlHttp.open("GET","time.asp",true);

xmlHttp.send(null);

4) ajax 请求服务器实例请求服务器实例

现在，我们必须决定何时执行 AJAX 函数。当用户在用户名文本框中键入某些内容时，我们会令函数“在幕后”执行。

这是 testAjax.htm 代码

<html>

<body>

<script type="text/javascript">

function ajaxFunction()

{

var xmlHttp;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e)

{

alert("您的浏览器不支持 AJAX！");

return false;

}

}

}

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

document.myForm.time.value=xmlHttp.responseText;

}

}

xmlHttp.open("GET","time.asp",true);

xmlHttp.send(null);

}

</script>

<form name="myForm">

用户: <input type="text" name="username" onkeyup="ajaxFunction();" />

时间: <input type="text" name="time" />

</form>

</body>

</html>

这是服务器端代码 time.asp

<% response.expires=-1 response.write(time) %>
注释：注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被缓存。激发onkeyup="ajaxFunction() 时间文本框显示时间刷新！时间文本框显示时间刷新！在iis中运行结果如下当输入用户名完毕激发中运行结果如下

3

ajax 高级应用：要求实现异步查询页面，该查询页面用来查询客户信息，用 js 脚本和 XMLHttpRequest 对象，查询高级应用：要求实现异步查询页面，该查询页面用来查询客户信息，对象，

页面包含两部分，查询条件和查询结果。客户信息字段包括姓名、年龄、性别、页面包含两部分，查询条件和查询结果。客户信息字段包括姓名、年龄、性别、省、市、县，所有字段均可做为页面查询条件。所有字段均可做为页面查询条件。省、市、县查询项使用下拉选择框实现，各下拉框异步动态联动。其它查询条件使用文本框即可，查询结果列表采用 js 脚县查询项使用下拉选择框实现，各下拉框异步动态联动。其它查询条件使用文本框即可，对象实现。本动态在客户端添加 table 的 DOM 对象实现。分析：实现该页面，有两个重要问题，一个是省市县的动态联动，另一个是 js 脚本和 XMLHttpRequest 对象实现数据的异步传送。在这里主要介绍 js+XMLHttpRequest 实现的数据传送。 Default.aspx 的 JavaScript 代码：代码： <script type="text/javascript" language="javascript" > var http_request function send_request() { if (window.XMLHttpRequest) { http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } //上面的代码是对 XMLHttpRequest 对象的创建 http_request.onreadystatechange = function GetData() { if (http_request.readyState == 4 && http_request.status == 200) { if (http_request.responseText != "") { //如果接收到了从服务器页面获的信息

var ResponseText = http_request.responseText; //则将它赋给变量 ResponseText var myarr = new Array(25); myarr = ResponseText.split(';'); var row; var mycol; //创建行数组 //数组元素每行之间用“； ”隔开 //定义表格行 // 定义变量 myrow 作为列数组

for (var i = 0; i < myarr.length; i++) { //定义循环变量 I 如果 I 的值小于接收的字符行 row = document.createElement("tr"); var col; //定义列 // 创建表格行赋给变量 row

mycol = myarr[i].split(','); //用 split 函数将行数组用”,”隔开 for (var j = 0; j < mycol.length; j++) { col = document.createElement("td"); col.innerHTML = mycol[j]; row.appendChild(col); } document.getElementById('tbody1').appendChild(row);// 表格追加行 //上面的代码是创建一个二维数组，二维数组用来存放从服务器页面查询到的数据 } //列循环 //创建表格列赋给变量 row

//每一列的元素值赋给列标签

//行追加列

} } } var xm = document.getElementById('TextBox1').value; var nl = document.getElementById('TextBox2').value;

var xb = document.getElementById('DropDownList4').value; var sheng = document.getElementById('DropDownList1').value ; var shi = document.getElementById('DropDownList2').value; var xian = document.getElementById('DropDownList3').value; //上面是将页面的元素值赋给响应变量作为查询条件 //open 方法表示打开一个 URL 连接 http_request.open("get", "GetData.aspx?pid=" + escape(xm) + "&age=" + escape(nl) + "&sex=" + escape(xb) + "&pro=" + escape(sheng) + "&city=" + escape(shi) + "&=county" + escape(xian) + "&rad" + Math.random(), true); //发送上面创建的 http 请求 http_request.send(null); } function cleartable() { var tableBody = document.getElementById("tbody1"); for (var i = tableBody.childNodes.length; i > 0; i--) { tableBody.removeChild(tableBody.childNodes[0]);

} } //上面的代码是当清楚所查询的内容 </script> 另外应在 Body 标记中添加表格如下： <table id="table1" border="1" width="800" style="background-color:Gray" > <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>所在省</td> <td>所在市</td> <td>所在县</td> </tr> <tbody id="tbody1"></tbody> </table> 服务器页面 GetData.asp.cs using System; using System.Collections.Generic; using System.Data; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; //导入命名空间 public partial class GetData : System.Web.UI.Page

{ private string strpid; private string strage; private string strsex; private string strpro; private string strcity; private string strcounty; //定义接收字符串以下类同

protected void Page_Load(object sender, EventArgs e) { try { strpid= Request.QueryString["pid"].ToString(); strpid = HttpUtility.UrlDecode(strpid); strage = Request.QueryString["age"].ToString(); strage = HttpUtility.UrlDecode(strage); strsex = Request.QueryString["sex"].ToString(); strsex = HttpUtility.UrlDecode(strsex); strpro = Request.QueryString["pro"].ToString(); strpro = HttpUtility.UrlDecode(strpro); strcity = Request.QueryString["city"].ToString(); strcity = HttpUtility.UrlDecode(strcity); strcounty = Request.QueryString["county"].ToString(); strcounty = HttpUtility.UrlDecode(strcounty); //获取页面传来的参数 pid 赋给字符串 strpid,以下类同

} catch {

}

Response.Write(DatBind()); }

private string DatBind() { string row = ""; string sql = "select * from KehuInfo where [name] = '" + strpid + "' or age='" + strage + "'or sex='" + strsex + "'or province_name='" + strpro + "'or city_name='" + strcity + "'or county_name='" + strcounty + "'"; //定义 sql 将查询结果赋给字符串 sql SqlDataReader rdr = DBHelp.ExecuteReader(sql); while (rdr.Read()) {

row += rdr["name"].ToString() + "," + rdr["age"].ToString() + "," + rdr["sex"].ToString() + "," + rdr["province_name"].ToString() + "," + rdr["city_name"].ToString() + "," + rdr["county_name"].ToString() + ";"; //将读到的字符赋给 row 每行之间用“； ”隔开，每列之间用“， ”隔开 } if (row != "") return row.Substring(0, row.Length - 1); else return row; } } 运行结果显示：假如选择性别为“男”则结果如下：

Ajax学习 总结

Ajax学习总结