ajax学习总结

一、什么是ajax

AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

　　ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

　　ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

　　ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。

　　ajax的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

　　ajax前景非常乐观，可以提高系统性能，优化用户界面。AJAX现有直接框架AjaxPro，可以引入AjaxPro.2.dll文件，可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组建，需要添加AjaxControlToolkit.dll文件，可以在控件列表中出现相关控件。

　　ajax的优点：

　　1、最大的一点是页面无刷新，用户的体验非常好。
　　2、使用异步方式与服务器通信，具有更加迅速的响应能力。。
　　3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
　　4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
　　5、ajax可使因特网应用程序更小、更快，更友好。

　　ajax的缺点：

　　1、ajax不支持浏览器back按钮。
　　2、安全问题 AJAX暴露了与服务器交互的细节。
　　3、对搜索引擎的支持比较弱。
　　4、破坏了程序的异常机制。
　　5、不容易调试。

二、ajax的工作原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
首先，我们先来看看XMLHttpRequest这个对象的属性。
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据。

三、ajax的用法

**

1、 纯原生态的ajax

----------

第一步：ajax引擎对象的创建（相对简单的创建方法，更严格的方式请参考W3C）：

//创建Ajax引擎对象 
function getXmlHttpRequest(){
    var xmlHttpRequest= "";
    if(window.XMLHttpRequest){ // 火狐
        xmlHttpRequest = new XMLHttpRequest();
    }
    else{ // IE
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlHttpRequest;
}

函数getXmlHttpRequest()返回一个ajax对象，所以使用的时候可以直接赋值：

var myAjaxObject=null; 
myAjaxObject = getXmlHttpRequest();

第二步：创建请求机制：（建立与服务器端的通信接口）

ajax请求方式有两种：get和post，下面分别介绍如何建立连接以及它们之间的区别。

◆ get 方式请求格式：

/**** 方式一：get 方式请求 ******/
var url = "process.php?userName="+$("userName").value;
myAjaxObject.open("get",url,true);
//回调处理函数指定为 calback();
myAjaxObject.onreadystatechange=callBack; 
myAjaxObject.send(null);

其中open方法的三个参数解释：

1、请求方式：get / post :
2、向服务器请求的 url（后台处理的地址） :
3、 true:异步机制；false:同步机制（ajax的最大好处就是异步，所以基本选择true）

onreadystatechange=callback 意思就是服务器返回的状态改变的时候所选择的处理方式，callback为一个函数（不可写成callback()），也可写成：

onreadystatechange=function(){ /*code here...*/ }

◆post 方式请求格式：

/******** 方式二：post 方式请求 ********/
var url = "process.php";
//【不同之处1】发送的数据另写
var data = "userName="+$("userName").value; 
myAjaxObject.open("post",url,true);
// 【不同之处2】post方式一定要加上这句话
myAjaxObject.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded"); 
//回调处理函数指定为 callback();
myAjaxObject.onreadystatechange=callBack; 
myAjaxObject.send(data); //【不同之处3】 send()函数带参数

最后说明get和post在形式上和性能上的差异：

▪ post传输数据时，不需要在URL中显示出来，而get方法要在URL中显示。
▪ post传输的数据量大，可以达到2M，而get方法由于受到URL长度的限制,只能传递大约1024字节.
▪ post是为了将数据传送到服务器段,get是为了从服务器段取得数据。当然get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据，post的信息作为http请求的内容，而get是在Http头部传输的。

第三步：如何处理返回的数据？

当 readyState 等于 4 且状态为 200 时，表示响应已就绪，可以在前端进行数据处理了。

其次，返回的数据格式主要有文本（.responseText）、JSON（.responseText）和XML（.responseXML），它们各自的处理方式都不相同。

● 文本格式的处理方式：

此时对应于服务器端的process.php文件大致为：

header("Content-type: text/html; charset=utf-8");
header("Cache-Control: no-cache");
$username=$_POST['userName'];
if($username=="tangbc" || $username=="admin"){ 
/*只做简单的判断例子，实际项目中应该查找数据库*/
echo "<b>抱歉！不可用</b>";
}else{
echo "<b>恭喜！可以使用！</b>";
}

此时前端的处理函数callback为：

function callBack(){
    if(myAjaxObject.readyState==4 && myAjaxObject.status==200){
        /* 1，返回格式是 文本格式 (responseText) 的处理方式：*/
        $("isExist").innerHTML=myAjaxObject.responseText;
        }
}

● JSON格式的处理方式：

此时对应于服务器端的process.php文件大致为：

header("Content-Type: text/html; charset=utf-8");
header("Cache-Control: no-cache");
$username=$_POST['userName'];
if($username=="tangbc" || $username=="admin"){
        //输出的是 类JSON格式 的字符串
    echo '{"msg":"抱歉！不可用！！"}';  
}else{
    echo '{"msg":"恭喜！可以用"}';
}

此时前端的处理函数callback为：

function callBack(){
    if(myAjaxObject.readyState==4&&myAjaxObject.status==200){
        // str为服务器返回来的字符串 {"msg":"抱歉！不可用！！"} 
        var str = myAjaxObject.responseText; 
        // 将字符串str转换为JSON格式(对象数组) 
        var obj = eval("("+str+")");
        // obj.msg 即为要在浏览器显示的数据 “抱歉！不可用！！”  
        $("isExist").innerHTML=obj.msg;         
    }
}

● XML格式的处理方式：

此时对应于服务器端的process.php文件大致为：

header("Content-type: text/xml; charset=utf-8");
header("Cache-Control: no-cache");
$username=$_POST['userName'];
if($username=="tangbc" || $username=="admin"){
    echo "<res><mes>抱歉！不可用</mes></res>";
}else{
    echo "<res><mes>恭喜！可以用</mes></res>";
}

此时前端的处理函数callback为：

function callBack(){
  if(myAjaxObject.readyState==4&&myAjaxObject.status==200){
  /* 2，返回格式是 XML(responseXML) 的处理方式：*/
  //获取服务器端生成的XML的标签名
var tag=myAjaxObject.responseXML.getElementsByTagName('mes');
  //获取该标签名下的文本内容（需要的信息）
   var val = tag[0].childNodes[0].nodeValue;
   $("isExist").innerHTML=val;
   } 
}

**

呵呵以上说了这么多，却不是我们项目中经常见到的，因为写大量的源码会加重我们的工作量而导致效率下降，下面重点来了，看看框架中的ajax是什么样子的呢

2.jquery中的ajax

$.ajax({
            type: "GET",
            url: "Services/EFService.svc/Members",   //数据提交的服务器路径
            data: "{}",//需要提交的数据，键对值的形式提交。逗号隔开例如｛"name":name,"pwd":pwd｝
            contentType: "application/json; charset=utf-8",
            dataType: "json",//数据类型
            success: function (data) {
                // Play with returned data in JSON format
            },
            error: function (msg) {
                alert(msg);
            }
        });

过多的就不多解释了，到这了，对于ajax相信大家已经了解个大概了，如果想看更过关于ajax在jquery中的用法可以去http://www.w3school.com.cn/jquery/ajax_ajax.asp
当然了，项目中还是用到框架中的ajax的多，比较框架做了一些内部封装处理使我们用起来更方便。建议大家多了解了解