AJAX(Asynchronous JavaScript And XML，异步JavaScript和XML)，是2005 年由Google推广开来的一种编程模式。AJAX不是一种新的编程语言，而是一种使用现有标准的新方法，通过基于JavaScript和HTTP请求的AJAX，可以创建更好、更快以及更友好的WEB应用程序，他最大的特点就是无刷新，速度快。AJAX的核心就是集成于JavaScript中的XMLHttpRequest对象，他能通过异步的方式与服务器间进行数据交互，常用的属性和方法有：
xmlhttp.onreadystatechange = LoadProvince; //设置当其请求状态改变时调用的方法
xmlhttp.open("GET", "DealRequestServices.ashx?requesttypeid=1", true); //设置其请求的方式、地址、是否异步
xmlhttp.send(null); //发送请求
xmlhttp.readyState == 4
xmlhttp.status == 200
xmlhttp.responseText //从服务器返回的字符串
对象XMLHttpRequest属性readyState的含义:
0——（未初始化）send方法还没有被调用
1——（加载中）已调用了send方法，请求还在处理
2——（已加载）send方法已完成，整个应答已接收
3——（交互中）正在解析应答
4——（已完成）应答已经解析，准备好进行下一步处理。
对象XMLHttpRequest属性status的含义:
100——客户必须继续发出请求(Continue)
101——客户要求服务器根据请求转换HTTP协议版本(Switching protocols)
200——交易成功(OK)
201——提示知道新文件的URL(Created)
202——接受和处理、但处理未完成(Accepted)
203——返回信息不确定或不完整(Non-Authoritative Information)
204——请求收到，但返回信息为空(No Content)
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件(Reset Content)
206——服务器已经完成了部分用户的GET请求(Partial Content)
300——请求的资源可在多处得到(Multiple Choices)
301——删除请求数据(Moved Permanently)
302——在其他地址发现了请求数据(Found)
303——建议客户访问其他URL或访问方式(See Other)
304——客户端已经执行了GET，但文件未变化(Not Modified)
305——请求的资源必须从服务器指定的地址得到(Use Proxy)
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除(Temporary Redirect)
400——错误请求，如语法错误(Bad Request)
401——请求授权失败(Unauthorized)
402——保留有效ChargeTo头响应(Payment Required)
403——请求不允许(由于服务器上文件或目录的权限设置导致资源不可用)(Forbidden)
404——没有发现文件、查询或URl(没有找到指定的资源)(Not Found)
405——用户在Request-Line字段定义的方法不允许(Method Not Allowed)
406——根据用户发送的Accept拖，请求资源不可访问(Not Acceptable)
407——类似401，用户必须首先在代理服务器上得到授权(Proxy Authentication Required)
408——客户端没有在用户指定的饿时间内完成请求(Request Timeout)
409——对当前资源状态，请求不能完成(Conflict)
410——服务器上不再有此资源且无进一步的参考地址(Gone)
411——服务器拒绝用户定义的Content-Length属性请求(Length Required)
412——一个或多个请求头字段在当前请求中错误(Precondition Failed)
413——请求的资源大于服务器允许的大小(Request Entity Too Large)
414——请求的资源URL长于服务器允许的长度(Request-URI Too Long)
415——请求资源不支持请求项目格式(Unsupported Media Type)
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段(Requested Range Not Suitable)
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求(Expectation Failed)
500——服务器产生内部错误(Internal Server Error)
501——服务器不支持请求的函数(Not Implemented)
502——服务器暂时不可用，有时是为了防止发生系统过载(Bad Gateway)
503——服务器过载或暂停维修(Service Unavailable)
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长(Gateway Timeout)
505——服务器不支持或拒绝支请求头中指定的HTTP版本(HTTP Version Not Supported )
12029——网络不通. 刷新一下就知道了
具体示例中包含两个文件，一个是XMLHttpRequest.html，另一个是DealRequestServices.ashx，这是一个中间处理程序文件，他和普通的页面差文件不多，只是没有源码只有后台代码，XMLHttpRequest.html文件类容如下：
<!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>
<title>AJAX省市县三级联动之XMLHttpRequest</title>
<style type="text/css">
body
{
font-size: 12px;
}
</style>
<script language="javascript" type="text/javascript">
var xmlhttp;
//实例化XMLHttpRequest对象
function InstantiateXMLHttp() {
//Mozilla 浏览器
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
//设置MiME类别
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
}
}
//IE浏览器
else if (window.ActiveXObject) {
//IE 7、8
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
//IE 6
catch (e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
RequestProvince();
}
function RequestProvince() {
ddlProvince.options.length = 0; //请空下拉列表框
xmlhttp.onreadystatechange = LoadProvince; //设置当XMLHttpRequest对象的状态改变时调用的方法
xmlhttp.open("GET", "DealRequestServices.ashx?requesttypeid=1", true); //设置XMLHttpRequest对象请求的方式、地址和是否异步
xmlhttp.send(null); //发送请求
}
function LoadProvince() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var provinces = xmlhttp.responseText.split("|");
for (var i = 0; i < provinces.length; i++) {
var pro = provinces[i].split(",");
ddlProvince.options.add(new Option(pro[1], pro[0]));
}
RequestCity();
}
}
function RequestCity() {
ddlCity.options.length = 0;
xmlhttp.onreadystatechange = LoadCity;
xmlhttp.open("GET", "DealRequestServices.ashx?requesttypeid=2&provinceid=" + ddlProvince.value, true);
xmlhttp.send(null);
}
function LoadCity() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var cities = xmlhttp.responseText.split("|");
for (var i = 0; i < cities.length; i++) {
var city = cities[i].split(",");
ddlCity.options.add(new Option(city[1], city[0]));
}
RequestCounty();
}
}
function RequestCounty() {
ddlCounty.options.length = 0;
xmlhttp.onreadystatechange = LoadCounty;
xmlhttp.open("GET", "DealRequestServices.ashx?requesttypeid=3&cityid=" + ddlCity.value, true);
xmlhttp.send(null);
}
function LoadCounty() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var counties = xmlhttp.responseText.split("|");
for (var i = 0; i < counties.length; i++) {
var county = counties[i].split(",");
ddlCounty.options.add(new Option(county[1], county[0]));
}
ShowSelectValue();
}
}
function ShowSelectValue() {
show.innerText = ddlProvince.options[ddlProvince.selectedIndex].text + ddlCity.options[ddlCity.selectedIndex].text + ddlCounty.options[ddlCounty.selectedIndex].text;
}
</script>
</head>
<body οnlοad="InstantiateXMLHttp()">
<table border="0" cellpadding="0" cellspacing="0" style="width: 600px;">
<tr>
<td>
省：
</td>
<td>
<select id="ddlProvince" οnchange="RequestCity()" style="width: 120px;">
</select>
</td>
<td>
市：
</td>
<td>
<select id="ddlCity" οnchange="RequestCounty()" style="width: 120px;">
</select>
</td>
<td>
县：
</td>
<td>
<select id="ddlCounty" οnchange="ShowSelectValue();" style="width: 120px;">
</select>
</td>
</tr>
</table>
<br />
结果：<span id="show" style="color: #0066cc;"></span>
</body>
</html>
DealRequestServices.ashx中间处理程序文件内容如下：
<%@ WebHandler Language="C#" class="DealRequestServices" %>
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Text;
public class DealRequestServices : IHttpHandler
{
public void ProcessRequest (HttpContext context)
{
SqlDataSource sqlds = new SqlDataSource();
sqlds.ConnectionString = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
StringBuilder sb = new StringBuilder();
DataView dv;
switch(context.Request.QueryString["requesttypeid"].ToString())
{
case "1":
sqlds.SelectCommand = "SELECT * FROM [Province]";
dv = sqlds.Select(DataSourceSelectArguments.Empty) as DataView;
foreach (DataRowView drv in dv)
{
sb.Append(drv["p_id"].ToString() + "," + drv["p_name"].ToString() + "|");
}
break;
case "2":
sqlds.SelectCommand = "SELECT [c_id],[c_name] FROM [City] WHERE [p_id] = " + context.Request.QueryString["provinceid"];
dv = sqlds.Select(DataSourceSelectArguments.Empty) as DataView;
foreach (DataRowView drv in dv)
{
sb.Append(drv["c_id"].ToString() + "," + drv["c_name"].ToString() + "|");
}
break;
case "3":
sqlds.SelectCommand = "SELECT [o_id],[o_name] FROM [County] WHERE [c_id] = " + context.Request.QueryString["cityid"];
dv = sqlds.Select(DataSourceSelectArguments.Empty) as DataView;
foreach (DataRowView drv in dv)
{
sb.Append(drv["o_id"].ToString() + "," + drv["o_name"].ToString() + "|");
}
break;
}
context.Response.Write(sb.ToString().Substring(0, sb.Length - 1));
}
public bool IsReusable
{
get {
return false;
}
}
}
扫一扫
1095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
