XMLHttpRequest - 原始AJAX初步

我们知道，传统的Web应用是request - response形式的，即浏览器向服务器发送请求，服务器进行处理，然后再对浏览器响应。

这种形式最大的缺点就是：客户端需要等服务器处理完之后，向它响应才能看到结果，在此期间，用户只能等待。

如果在网速很差的网络环境中，这是很很难忍受的。因此，AJAX技术应运而生。

AJAX允许客户端和服务器能进行异步的交互。

谈及AJAX，有个对象我们不得不提，那就是XMLHttpRequest，我们简称它为XHR。

该对象用来发起一个异步的请求。 

在最老式的AJAX程序中，我们最标准的做法便是：通过JavaScript的XHR对象来发起一个异步的请求。

那么，传统的AJAX应用需要怎么做呢？

我的总结是5步法，如下：

1）创建XMLHttpRequest对象

2）注册回调函数

3）设置连接信息

4）发送数据

5）在回调函数中处理数据

 

下面我们来举个实际的例子，验证名字。

逻辑：名字不能为空，如果是david，则报存在，其余正确。

 

首先，我们建立一个aspx页面，如下：

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " simpleAjax.aspx.cs "  Inherits = " BlogNet.AJAXDemo.simpleAjax "   %>

<! 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  runat ="server" >
     < title > AJAX的简单例子 </ title >
     < script  type ="text/javascript"  src ="../JS/simpleAjax.js" ></ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
    Please input user name to verify:  < br />
     < input  type ="text"  id ="userName"   />
     < input  type ="button"  value ="Verify"  onclick ="verify()" />
     < div  id ="result" ></ div >
     </ div >
     </ form >
</ body >
</ html >

 

然后，我们定制我们自己的处理AJAX逻辑的js文件，simpleAjax.js,如下：

var  xhr  =   null ;
var  READY_STATE_UNINTIALIZED  =   0 ;
var  READY_STATE_LOADING  =   1 ;
var  READY_STATE_LOADED  =   2 ;
var  READY_STATE_INTERACTIVE  =   3 ;
var  READY_STATE_COMPLETE  =   4 ;

function  getXmlHttpRequest() {
     var  req  =   null ;
    
     if  (window.XMLHttpRequest) {
        req  =   new  XMLHttpRequest();
        
         // Correct some browser's bugs
         if  (req.overrideMimeType) {
            req.overrideMimeType( " text/xml " );
        }
    }  else   if  (window.ActiveXObject) {
         // IE 5.5 & IE6
         var  activexName  =  [ " MSXML2.XMLHTTP " , " Microsoft.XMLHTTP " ];
         for  ( var  i  =   0 ; i  <  activexName.length; i ++ ) {
             try  {
                req  =   new  ActiveXObject(activexName[i]);
                 break ;
            }  catch (e) {
            }
        }
    }

     return  req;
}

function   verify() {
    
     //  *** 1. Create XMLHttpRequest Object ***
    xhr  =  getXmlHttpRequest();
    
     if  ( ! xhr) {
        alert( " Creating XMLHttpRequest Object Failed!! " );
         return ;
    }  else  {
         // alert(xmlhttp.readyState);
    }
    
     //  *** 2. Register Callback Function ***
    xhr.onreadystatechange  =  callback;
    
     //  *** 3. Set Connection Information ************
     //  *** 1st param: http request type: get/post
     //  *** 2nd param: url
     //  *** 3rd param: true - asynchronoous
     //  **********************************************
     var  userName  =  document.getElementById( " userName " ).value;
     var  url  =   " simpleServer.ashx?name= "   +  userName;
    xhr.open( " GET " ,url, true );
    
     //  *** 4. Send Data ***
    xhr.send( null );
}

// Callback Function
function  callback() {
     //  *** 5. Receive Response Data ***
     if  (xhr.readyState  ==  READY_STATE_COMPLETE) {
         // Judge Successful
         if  (xhr.status  ==   200 ) {
             // Get Data Back From Server
             var  responseText  =  xhr.responseText;
            
             // Show Data On Page
             var  divNode  =  document.getElementById( " result " );
            divNode.innerHTML  =  responseText;
        }  else  {
            alert( " AJAX Error! " );
        }
    }
}

 

接下来，便是服务端处理逻辑，以前ASP时候便是写在asp文件中，但是在ASP.NET中，如果你使用了aspx文件，

界面默认的HTML的UI会干扰我们的返回数据，导致结果不正确。因此，我们需要的是一个没有UI的服务端处理，

在ASP.NET中唯有HttpHandler才能胜任，其实学过J2EE的朋友一定知道，HttpHandler相当于J2EE中的Servlet。

下面我们建立一个ashx文件用以处理请求逻辑，如下：

using  System;
using  System.Web;


namespace  BlogNet.AJAXDemo
{
     public   class  simpleServer : IHttpHandler
    {

         public   void  ProcessRequest(HttpContext context)
        {
            context.Response.ContentType  =   " text/plain " ;
            
             string  name  =  context.Request[ " name " ].ToString();
             if  (name  ==   "" )
            {
                context.Response.Write( " 姓名不能为空! " );
            }
             else   if  (name  ==   " david " )
            {
                context.Response.Write( " 该姓名已存在! " );
            }
             else
            {
                context.Response.Write( " 恭喜:合法用户. " );
            }
        }

         public   bool  IsReusable
        {
             get
            {
                 return   false ;
            }
        }
    }
}

 

至此，整个逻辑就已经全部完成了！

 

转载于:https://www.cnblogs.com/davidgu/archive/2009/07/06/1517204.html