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
);
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地址中所有没有大小限制）