日期:2014-05-16  浏览次数:20718 次

写一个ajax程序就是如此简单

ajax介绍:
          1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发技术。
      2:基于web标准XHTML+CSS的表示;
      3:使用 DOM进行动态显示及交互;
      4:使用 XML 和 XSLT 进行数据交换及相关操作;
      5:使用 XMLHttpRequest 进行异步数据查询、检索;
     程序员应用ajax的途经:
          1:.Net下的AjaxPro,引入AjaxPro.2.dll,在前台页面JS调用后台页面的方法;
          2:微软的AJAX组件,添加AjaxControlToolkit.dll,或者是ASP.NET AJAX;
          3:开源的ajax框架。
          4:自己写ajax脚本。
     不过觉的前三种无论是哪一种,都觉的有点复杂,虽然它们如此强大,能做出很多特别优秀的无刷新效果,但开发人员都必须依赖它,开必人员只要学习怎么调用它 就行,至于其中的原理大可忽略,即使你想学习它的原理,没有相当的js水平,怕是徒劳无功。如果需求并没有这么高,只是简单的通过无刷新实现访问后台代码 然后操作DOM对象呢,还有必要引入这种大家伙吗?个人认识没有必要,理由如下:
          1:有种杀鸡用牛刀的感觉;
          2:引入第三方框架会使已有应用程序更加复杂;
          3:js框架都不小,在每个网页中引入这些js文件对网络传输肯定会有部分影响。
          4:如果框架中没有提供你要的功能,那又如何? 如何实现个性化定制?

      ajax虽然流行了好几年了,但本人07年初才用上,当时公司同事有用ajaxPro的,但用过了实在了感觉不好用,有时往往会出现些莫名其妙的问题。后 来在书店发现在《征服ajax系列》,才发现实现简单的ajax程序其实并不难,一个ajax程序处理过程如下:
      第一:创建XMLHttpRequest,不同的浏览器创建的方式不同;
      第二:发送请求。调用XMLHttpRequest的open()和send()方法:
          1:xmlhttp_request.open('GET', URL, true);
                  第一个参数:HTTP请求方式—GET,POST;
              第二个参数:请求页面的URL;
              第三个参数:请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。
          2:xmlhttp_request.send(null);

       第三:服务器的响应。
                1:告诉HTTP请求对象用哪一个函数处理这个响应。对象的onreadystatechange属性设置为要使用的JavaScript的函数 名:xmlhttp_request.onreadystatechange =FunctionName;FunctionName是用JS创建的函数名,也可直接将JS代码创建在onreadystatechange之后,例 如:

xmlhttp_request.onreadystatechange = function()
{
// JavaScript代码段
};
  
               2:检查请求的状态。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。readyState的取值如下:0 (未初始化);1 (正在装载);2 (装载完毕);3 (交互中);4 (完成)。所以只有当readyState=4时,函数才可以处理该响应。具体代码如下:接着,函数会检查HTTP服务器响应的状态值。当HTTP服务器 响应的值为200时,表示状态正常。 
if (http_request.readyState == 4)
{ // 收到完整的服务器响应 }
else { // 没有收到完整的服务器响应 }

      第四:处理从服务器得到的数据。有两种方式可以得到这些数据:
         1: 以文本字符串的方式返回服务器的响应;
            2: 以XMLDocument对象方式返回响应

      具体案例:我们有一批礼品想要送给用户,一般都会以文字列表的形式列出来,礼品名称上给个链接,当 用户点击链接时弹出一个窗口显示这个礼品的详细描述信息,当用户选中下拉框按钮时判断这个礼品在送给用户前需要不需要用户填写地址,如果要则动态在页面加 载相应的输入框。下面是两张效果图,一张时无需用户录入联系地址的,一张需要。


      第一:引用封装好的XmlHttp.js,这个包含了创建XMLHttpRequest对象,以及 发送请求与加载回调方法的函数,前端开发人员只需要传递简单的几个参数就可以实现异步调用,代码如下:
//------------------------------------------------------

//封装XMLHTTP的Request类的代码
var Request = new Object();
//定义一个XMLHTTP的数组

Request.reqList = [];
//创建一个XMLHTTP对象,兼容不同的浏览器

function getAjax()
{
    var ajax=false;
    try
    {
     aj