AJAX小总结

     学习AJAX后，就此写个小总结。简单概述下ajax的原理和应用，只是发觉什么地方要用到AJAX技术，实现什么功能，知道AJAX在哪些地方具有优势，然而具备的哪些不足之处还不甚清楚，也就google了下， 发现很多高手描述的也确实是很有道理。AJAX用起来还是比较方便的，就是总的说，AJAX不难，关键的几个步骤都是差不多的，多练习练习就知道怎么实现了，只不过容易出错，里面用javascript实现太繁琐了 ，js函数要求很高啊 ，多写些头都是大的了，晕头转向的。但是有了细心加耐心，功能就差不多达到啦！具体实现怎么样的请求可以自己定义，常用的功能有，动态替换页面内容、级联下拉、无刷新持续更新数据、解析xml文件到页面、AutoSuggest实现等。下面简单说说AJAX。

 

AJAX技术概述

     JAX不是一种新的技术，而是几种技术的结合体，组成的一种技术。它有一下几种技术组成：

     1.Javascript：绑定和调用，实现客户端数据发送和界面更新；

     2.XMLHttpRequest：异步请求对象，浏览器内置的用以进行异步数据发送和接受，是AJAX的核心；

     3.css+div：界面设置；

     4.DOM模型：使用js响应dom组件事件或更新组件；

     5.xml：ajax常以xml格式在c/s间通信；

     6.html：浏览器上界面的显示。

 

AJAX原理和核心XMLHttpRequest对象

      AJAX的原理可以简单的来说是通过XMLHttpRequest异步请求对象来对服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM组件而更新页面，其中XMLHttpRequest对象是AJAX的核心内容。也可以说是在不刷新页面的情况下用javascript及时的向服务器提出请求和请求响应，并根据数据的处理结果按你想要的方式对页面作出即时更改。

      从AJAX概述的技术来说，就XMLHttpRequest对象陌生外，其他的技术都在Web上广泛的应用。XMLHttpRequest总的来说还是挺使用的，实现浏览器到服务器的异步通信，简化了大数据量的传送。并且现在所有的主流浏览器上都支持异步请求对象XMLHttpRequest，不过不同的浏览器XMLHttpRequest对象都不同。

      XMLHttpRequest对象的属性包括有：

      1.readyState:异步对象的状态值，有后面的几种状态：0（未初始化）对象已建立，但是尚未初始化（尚未调用open方法），1（初始化）对象已建立，尚未调用send方法，2（发送数据）send方法已调用，但是当前的状态及http头未知，3（数据传送中） 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，4（完成）数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据；

      2.status:从服务器返回的数字代码，比如常见的404（代表未找到），200（已经成功，可以执行）；

      3.status Text：伴随状态码的字符串信息；

      4.responseText：从服务器返回数据的字符串形式；

      5.responseXML：从服务器返回数据的XML格式

      6.onreadystatechange：每次状态改变所触发事件的事件处理程序

     XMLHttpRequest对象的两个重要的方法，open和send方法：

     1.open方法-----XMLHttpRequest.open("GET/POST",url,true/false);

         a、第一个参数是向服务器提交数据的类型是用get还是用post；

         b、第二个参数是请求的url地址和传递的参数；

         c、第三个参数是传输的方式，false为同步，true是异步。默认值是true，如果是异步通信方式（true），客户机

             需要等待服务器的响应；如果是同步（false），客户机就要等服务器返回消息后采取执行下一个操作。

     2.send方法：用来发送请求

 

    ajax的javascript的函数简单流程如下：

var xmlHttpRequest;//定义异步请求对象

//创建XMLHttpRequest对象
function createXMLHttpRequest(){
     //定义不同的浏览器
   if(window.XMLHttpRequest){//如果是火狐浏览器
        xmlHttpRequest = new XMLHttpRequest();
    }
     else if(window.AciveXObject){//如果是IE浏览器
        try{
           xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP")
        }catch(e){
           try{
              xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")
           }catch(ex){}
        }
     }
     else{//如果是其它的浏览器
      window.alert("你的浏览器不支持XMLHTTPRequest，无法使用AJAX！");
     }
}

//回调函数
function processResponse(){
     if(xmlHttpRequest.readyState==4)
         document.getElementById("组件id").innerHTML="数据正在加载...";
         if(xmlHttpRequest.status==200){
              //显示到指定的组件中
       document.getElementById("组件id").innerHTML=request.responseText;
         }
     }
}

//发送请求
function sendRequest(){
     //创建异步请求对象
   createXMLHttpRequest();
    //绑定回调函数
   xmlHttpRequest.onreadystatechange=processResponse();
     //发送请求
   xmlHttpRequest.open("GET",url,true);
    xmlHttpRequest.send(null);
}

//其他的js数据操作函数
function newFunction(){}

 

      由上知道了ajax的基本流程，而XMLHttpRequest对象的作用也就完全是用来向服务器发送异步请求的，但是它的作用却是整个AJAX实现的关键。因为AJAX无非就两个过程，发送请求和相应请求，也就是完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器和客户端通信的问题才显得非常重要了，以此作为AJAX的核心。

      我们可以把服务器看成是一个数据接口，它返回一个纯文本流，当然这个纯文本可以是xml格式，可以是HTML,可以是javascript代码，可以只是一个字符串。此时，XMLHttpRequest对象向服务器请求这个页面，服务器端将文本的返回结果写入这个页面，这个和普通的Web页面没有什么区别，不同的就是，客户端在异步获取这个结果后，不是直接显示在页面上，而是由javascript来处理，然后再显示到页面，这样就可以控制数据的输出，实现无刷更新的效果。

 

      突然要用到这个地方了，就觉得AJAX的强大了，嘿嘿...

     看看吧，具体了解了AJAX的五板斧：

    1.动态替换页面内容；

       动态替换页面内容是AJAX常用的一种功能，如页面上帐号信息验证提示。

    2.无刷持续更新数据：

       即时统计在线人数，在线消息发送或一线聊天。

    3.联动下拉列表：

      一般的就是第二个下拉列表（select或list）需要根据第一个下拉列表的变动而变动，如地区的查询最常见。

    4.解析xml文件到页面

      可以连数据库，从数据库提取数据转换为xml格式或直接提取xml文件，解析xml文件，数据显示到界面

    5.AutoSuggest

      实现文本输入框自动完成功能的 JavaScript 组件，可以通过 Ajax 方式从服务器端获取包括XML和JSON格式的数据。

 

AJAX的优缺点

      至于AJAX的优点吗，在学会用AJAX，知道AJAX用在什么地方后，基本知道了AJAX的好处啦！最大的就是实现页面无刷更新数据；还有是使用异步方式与服务器通信，不需要打断其他的操作，具有更加迅速的响应速度；可以把一些服务器负担的工作转移到客户端来实现，利用客户端的闲置能力来处理，减轻服务器和宽带的负担，节约空间和宽带租用成本，同时也是减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度减少冗余请求，和响应对服务器造成的负担；基于标准化的并被广发使用，不需要下载插件，只要js函数实现就可以了。

     一种技术除了优点外，肯定也有它的缺陷，笔者在网上全部查看了下，对此也有较深的理解。首先AJAX干掉了back按钮，即浏览器后退机制的破坏，后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的；安全问题也是一个问题，ajax技术就如同对企业数据建立了一个直接通道，这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等；对搜索引擎的支持比较弱；破坏了程序的异常机制；另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷；还有就是一些手持设备（如手机、PDA等）现在还不能很好的支持ajax。

 

     到此，对AJAX会用了，知道它的原理是什么了！知道在什么地方用到AJAX会达到更好的效果！