AJAX入门

Ajax 由 HTML、JavaScript™技术、DHTML和 DOM组成,总体名称是Asynchronous+Java+And+XML

出现的原因:

      现在软件编程领域,毫无疑问的有两种方式,一种是客户端的APP,可以直接在电脑或移动端进行下载安装包安装,还有一种就是通过网络页面与服务器相连接,从而完成一定的工作.两者相比较而言,桌面应用程序更加简单方便,可以拥有更加简单的操作和更加绚丽的界面，最重要的是反应速度比传统Web页面要迅速的多，尤其是Web程序如果后台运行太过复杂或功能太多的话，那么让用户的等待时间会更加漫长，用户体验度会大大降低。AJAX的出现解决了这种问题。

老技术，新思想：

1、使用XHTML和CSS的基于标准的表示技术

2、使用DOM进行动态显示和交互

3、使用XML和XSLT进行数据交换和处理

4、使用XMLHttpRequest(处理所有服务器通信的对象)进行异步数据检索

5、使用JavaScript将以上的技术融合在一起，帮助改进与服务器应用程序的通信

总体来说，AJAX是Web应用程序创建的基础技术的再次创新和结合

 

传统与现代：

传统同步交互方式：用户点击链接或按钮，向服务器提出请求——用户等待服务器的响应——服务器进行相应的处理——响应结果通过一个新的HTML页面返回给用户。

                                   

现代异步交互方式：用户点击链接或按钮，向服务器提出请求不需要等待服务器的响应，可以继续自己的用户体验。当服务器处理完成以后，返回给浏览器过程中，会有XMLHttpRequest对象接收数据结果，并通过相应的程序将响应的结果呈现给用户（用户活动没有中断，并始终在一个页面去查看服务器的相应响应结果）

                    

AJAX方式下的Web应用优势：

1、改善表单验证方法，不需要再打开新的页面，也不需要将整个页面数据提交

2、不需要刷新页面就可以改变页面内容

3、按需求获取数据

4、读取外部数据，进行数据处理整合

5、异步与服务器交互，交互过程中用户无需等待，仍可以继续操作。

       

AJAX应用的五个步骤：

GET方法

<span style="font-size:18px;">//定义全局变量  
var　xmlhttp;  
  
/* <strong>1、创建XMLHttpRequest对象  </strong>
*说明：这是一个相对复杂的过程，因为要使用不同的浏览器  
*/  
if(window.XMLHttpRequest){  
    //适用于IE7、IE8、FireFox、Opera等浏览器  
    xmlhttp = new XMLHttpRequest();  
    if(xmlhttp.overrideMineType){  
        xmlhttp.overrideMineType("text/xml")  
    }  
}else if(window.ActiveXObject){  
    //IE6、IE5、IE5.5  
    var MSXML = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
              "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
               "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP"];  
    for(var n =0 ;i<MSXML.length;n++){  
        try{  
            xmlhttp = new ActiveXObject(activexName[n]); 
            break; 
        }catch(e){  
              
        }  
    }  
}  
if(xmlhttp == undefind || xmlhttp == null){  
    alert("当前浏览器不支持创建XMLHttpRequest对象");  
    return;  
}  

/*2<strong>、给XMLHttpRequest对象注册回调方法 </strong> 
*注意：虽然callback是一个方法，但是这里必须使用方法名，后面不用加（）  
*/  
xmlhttp.onreadystatechange = callback;  
  
/*  
*<strong>3、设置和服务器交互的相应的参数  ，使用open方法与服务器建立链接</strong>
*/  
//UserName是页面中的控件id  
var userName = document.getElementById("UserName").value;  
  
xmlhttp.open("GET","AJAX?name="+userName,true);  
//open方法几个重要的参数：get/post，服务器地址，  
//XMLhttpRequest对象的交互方式即同步/异步,true表示异步方式)  
  
/*  
*<strong>4、设置向服务器发送的数据，启动和服务器的交互  </strong>
*/  
xmlhttp.send(null);  
  
function callback(){  
/*  
*<strong>5、回调函数的实际工作判断和服务器交互是否完成，还要判断服务器是否正确返回了数据  ,针对不同响应状态进行处理</strong>
*/    
    if(xmlhttp.readyState == 4){  
        //表示和服务器端的交互已经完成  
        if(xmlhttp.status == 200){  
        //表示服务器的响应代码是200，正确的返回了数据  
        //纯文本数据的接受方法  
        var message = xmlhttp.responsText();  
        //如果使用的是DOM对象的接受方法，则  
        //var doxXml = xmlhttp.responseXML();  
        //但是有一个前提，服务器端需要设置content-type为text/xml  
          
        var div = document.getElementById("页面div的ID")         
        div.innerHTML = message;  
  
        }  
    }  
}  
</span>

POST方式（3、4步与Get方式不同）

<span style="font-size:18px;"> /*  
 *<strong>3、设置和服务器交互的相应的参数  </strong>
 */  
 //UserName是页面中的控件id  
 var userName = document.getElementById("UserName").value;  
   
 xmlhttp.open("POST","AJAX",true);  
 //open方法几个重要的参数：get/post，服务器地址，  
 //XMLhttpRequest对象的交互方式即同步/异步,true表示异步方式)  
   
 /*  
 *<strong>4、设置向服务器发送的数据，启动和服务器的交互  </strong>
 */  
 xmlhttp.setRequestHeader("Content-Type","application/x-www-fora-urlencoded");  
 xmlhttp.send("name="+userName);  
</span>

总结（注意事项）：

1、不同浏览器的兼容性

2、回调函数callback没有括号

3、GET和POST方式代码写法的不同，通常我们在服务器端的Servlet中，doGet和doPost做的是一样的工作，因此由于POST传递的信息没有大小限制，所以在实际应用中比较多的使用POST。

（A、Get方式传递给服务器的信息一般以后缀参数方式存在于URL地址中，而URL的长度通常都有限制，这些也就限制了Get方式传递给服务器的内容大小

  B、Post方式传递给服务器的信息并不位于URL地址中所有没有大小限制）