AJAX从零开始--第一个实例

今天参考了不少的AJAX代码，发现之前在框架设计这本书里推荐的代码编写习惯都是不错的，只是之前不明白就没用了

比如之前的写法是

public void Method() {       MessageBox.Show(“This is a Method!”); }

推荐的写法是

public void Method() {      MessageBox.Show(“This is a Method!”); }

直到今天在写一段长Javascript代码中才发现好处，很容易的就找出对应的代码段…

特别是在JavaScript中..

 

例：在页面中有下面一段代码

<script type="text/javascript" language=javascript>         var http_request = false;             function makeRequest(url){             http_request = false;                                       //针对不同浏览器做出不同处理,上篇文章已交代过             if(window.XMLHttpRequest){                 http_request = new XMLHttpRequest();                if(http_request.overrideMimeType) {                   http_request.overrideMimeType('text/xml');                }                else if(window.ActiveXObject) {                     try {                         http_request = new ActiveXObject("Msxml2.XMLHTTP");                     }                     catch(e) {                          try {                             http_request = new ActiveXObject("Microsoft.XMLHTTP");                          }                         catch(e) {}                     }                }                               if(!http_request){                     alert('Giving up :( Cannot create an XMLHTTP instance)');                     return false;                }                               //每当readyState的值发声改变时,也就是说开始时,就产生了一个事件,这里引用了函数alertContents()进行处理                //onreadystatechange只是个属性,而不是方法名(函数名)却可以赋值给任何变量?                //查了相关资料,说。函数在JavaScript中是第一等的对象，可以赋值给任何变量。                //还可以这么写  http_request.onreadystatechange = function() { //代码 };                http_request.onreadystatechange = alertContents;                               //第一个参数表示以GET方式,也可以选者POST方式等,但注意一定要全部大写,否则有的浏览器无法解析,                //这个一共有7种,另外五种分别是HEAD,PUT,DELETE,OPTIONS,TRACE                //第二个参数是URL,表示GET的内容的地址                //第三个参数代表,如果为true就代表提交的是一个异步XMLHTTP请求,这时浏览器并没有做什么                http_request.open('GET',url,true);                //发送请求                //send的参数以POST方式传送资料时,必须先将MIME形态改好,如下                //http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');                http_request.send(null);             }                         function alertContents(){                 //当状态为4的时候代表已经传回所有数据了,便可以开始解析所有的数据                // 0为还没开始,对象已创建,尚未调用open()                //1读取中,调用open()                //2已读取,调用send()                //3数据交换,                //4完成所有                 if(http_request.readyState == 4){                     // 服务器传回的HTTP状态码,详情请查看附录                     // statustext服务器返回的状态文本信息                     if(http_request.status == 200) {                        //http_request.responseText 把回值当字符串用                        //http_request.responseXML 把传回值当为XMLDocument ,再用Javascript函数处理                         alert(http_request.responseText);                     } else {                         alert('获取数据时出现异常.');                     }                }             }         }         </script>         <span     style="cursor: pointer; text-decoration: underline"     onclick="makeRequest('test.html')">         Make a request </span>

运行,点击Make a request之后是不是提示获取数据时出现异常.那是因为无法找到test.html文件

这个页面的意思是当点击Make a request后，会向服务器请求名发送名为test.html文件的内容，并用ALERT输出.

前面的例子中，是使用responseText直接读取，现在使用responseXML读取XML相关数据

首先，创建个XML文件，

内容如下

<?xml version="1.0" encoding="utf-8" ?> <root>  哦累累，哦拉拉。 </root>

 

在alertContents函数中修改alert(http_request.responseText);为                       var xmldoc = http_request.responseXML;                       var root_node = xmldoc.getElementsByTagName('root').item(0);                       alert(root_node.firstChild.data); 在上面那个例子的基础上，修改   onclick="makeRequest('test.xml')"

 

   至于更复杂的XML操作方式在下篇文章继续研究

 

附录，http 1.1支持的状态代码 　　 　　100 continue 初始的请求已经接受，客户应当继续发送请求的其余部分 　　 　　101 switching protocols 服务器将遵从客户的请求转换到另外一种协议 　　 　　200 ok 一切正常，对get和post请求的应答文档跟在后面。 　　 　　201 created 服务器已经创建了文档，location头给出了它的url。 　　 　　202 accepted 已经接受请求，但处理尚未完成。 　　 　　203 non-authoritative information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝 　　 　　204 no content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而servlet可以确定用户文档足够新，这个状态代码是很有用的 　　 　　205 reset content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容 　　 　　206 partial content 客户发送了一个带有range头的get请求，服务器完成了它 　　 　　300 multiple choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在location应答头指明。 　　 　　301 moved permanently 客户请求的文档在其他地方，新的url在location头中给出，浏览器应该自动地访问新的url。 　　 　　302 found 类似于301，但新的url应该被视为临时性的替代，而不是永久性的。 　　 　　303 see other 类似于301/302，不同之处在于，如果原来的请求是post，location头指定的重定向目标文档应该通过get提取 　　 　　304 not modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供if-modified-since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 　　 　　305 use proxy 客户请求的文档应该通过location头所指明的代理服务器提取 　　 　　307 temporary redirect 和302（found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是post，即使它实际上只能在post请求的应答是303时才能重定向。由于这个原因，http 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的get和post请求；如果是307应答，则浏览器只能跟随对get请求的重定向。 　　 　　400 bad request 请求出现语法错误。 　　 　　401 unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个www-authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的authorization头后再次发出请求。 　　 　　403 forbidden 资源不可用。 　　 　　404 not found 无法找到指定位置的资源 　　 　　405 method not allowed 请求方法（get、post、head、delete、put、trace等）对指定的资源不适用。 　　 　　406 not acceptable 指定的资源已经找到，但它的mime类型和客户在accpet头中所指定的不兼容 　　 　　407 proxy authentication required 类似于401，表示客户必须先经过代理服务器的授权。 　　 　　408 request timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。 　　 　　409 conflict 通常和put请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。 　　 　　410 gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。 　　 　　411 length required 服务器不能处理请求，除非客户发送一个content-length头。 　　 　　412 precondition failed 请求头中指定的一些前提条件失败 　　 　　413 request entity too large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个retry-after头 　　 　　414 request uri too long uri太长 　　 　　416 requested range not satisfiable 服务器不能满足客户在请求中指定的range头 　　 　　500 internal server error 服务器遇到了意料不到的情况，不能完成客户的请求 　　 　　501 not implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的put请求 　　 　　502 bad gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答 　　 　　503 service unavailable 服务器由于维护或者负载过重未能应答。例如，servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个retry-after头 　　 　　504 gateway timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答 　　 　　505 http version not supported 服务器不支持请求中所指明的http版本