对象XMLHttpRequest属性status的含义,及省市级联

最新推荐文章于 2020-12-22 05:50:42 发布

wmyasw

最新推荐文章于 2020-12-22 05:50:42 发布

阅读量3.7k

点赞数

文章标签： xmlhttprequest 服务器 javascript function ajax 浏览器

博客原文：http://blog.csdn.net/dongdong625/archive/2010/06/07/5653536.aspx

源码下载：http://down.qiannao.com/space/file/qiannao/share/2010/6/8/ThirdLevelLinkage.zip/.page

QQ个人资料

淘宝网会员资料

在IT发展日渐成熟的今天，软件作为IT产品中的灵魂已经起到了不可磨灭的作用，准确的说没有了软件，基本上所有的智能电子产品都是废品，比如最为常见的电脑、MP4、手机、数码相机等等。自从1985年微软推出第一款Windows操作系统Windows 1.0之后，窗口应用式操作软件也得到了飞速的发展。而在当今，各样的开发语言，操作系统，开发环境也是层出不穷，不断地新老更替，这也就带了一个不小的问题，即如何做到一个应用软件的跨平台跨语言跨机器的问题，也就是程序与程序，程序与宿主之间的兼容性问题。随着网络的发展，基于B/S(Browser/Server)结构的应用软件也就是我们通常说的网站，因其能很好的解决软件的跨平台跨语言跨机器的问题而得到了很好的发展和应用，无论该软件是通过何种技术或语言进行开发的，他只需要将用户请求需要的相应的内容转换成HTML代码(也包括常用的JavaScript脚本)发送到客户端浏览器，这样既解决了兼容性问题，也极大地减少了软件维护的成本。

基于浏览器/服务器结构的应用软件得到了发展，自然各种浏览器也就会应运而生，比如在我国用的最多的IE、火狐、遨游、世界之窗以及刚冒出来不久的360、腾讯TT等等，其实浏览器的功能都大同小异，都是通过解析HTML代码以满足用户需求，只是使用的习惯略有区别而已，既然有小异，那肯定在某些问题的处理上还是有区别的，在即将讨论的这个问题中我们就会遇到。

来说本次讨论的主题，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——网络不通. 刷新一下就知道了

省市县下拉列表框三级联动在各种网页中使用的非常普遍，由于QQ软件是C/S(Client/Server)结构的，所以可以肯定的说在上图中的QQ个人资料修改绝对和AJAX没有任何关系，当然若是在网页中修改那就不一样了。有些网站中的三级联动是把全国34个省345个市3144个县全部写在数组里，然后通过JAVASCRIPT来动态变动，这是一种蠢到家的做法，这里完全可以通过AJAX，在页面加载完毕时先把所有的省从服务器请求下来然后加载到省的下拉列表框，然后在省的下拉列表框改动时再从服务器把该省对应下的所有市请求下来加载到市的下拉列表框，再在市的下拉列表框改动时从服务器把该市对应下的所有县请求下来加载到县的下拉列表框。

诚然，有客户端请求，对应着就得有服务器的处理，在服务器端通过客户端请求的时传过来的类别和参数进行相应的判断，然后再从数据库中查询出结果集排列成指定的字符串，发送给客户端，在客户端来解析这段字符串然后加载到下拉列表框。具体示例中包含两个文件，一个是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">

<head>

<title>AJAX省市县三级联动之XMLHttpRequest</title>

body

{

font-size: 12px;

}

</style>

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>

<tr>

<td>

省：

</td>

<td>

</select>

</td>

<td>

市：