Ajax

Ajax简介

概念：

• Ajax(Asynchronous JavaScript and XML)异步JavaScript 和
  XML/HTML，Ajax不是一种编程语言，而是指一种创建交互式网页应用的网页开发技术。
• Ajax是一种用于创建快速动态网页的技术，是一种无需重新加载整个网页的情况下，能更新部分网页的技术。
• 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必须重载整个网页页面。

优点：

• 使web应用程序更加敏捷，避免在网络上发送没有改变的信息。
• 不需要任何插件，但需要用户允许JavaScript在浏览器上执行。

XMLHttpRequest对象

XMLHttpRequest简称：XHR，是一个API对象，用于在后台与服务器交换数据，所有现代浏览器都支持XHR对象。

XHR对象作用：

	• 在不重新加载页面的情况下更新网页 	
	• 在页面已加载后从服务器请求数据 	
	• 在页面已加载后从服务器接收数据
	• 在后台向服务器发送数据

创建XMLHttpRequest对象

创建XHR对象实例：

<script>
     var xmlhttp;
     if(window.XMLHttpRequest){
         xmlhttp=new XMLHttpRequest();   //code for all new browsers
     }else if(window.ActiveXObject){
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //code for IE5 and IE6
     }
     if(xmlhttp!=null){
         xmlhttp.onreadystatechange=state_Change;
         xmlhttp.open("GET",url,true);             //open() 打开连接，方法详情见下方
         xmlhttp.send(null);
     }else{
         alert("Your browser does not support XMLHTTP.");
     }
     function state_Change(){
         if(xmlhttp.readState==4){
             if(xmlhttp.status==200){
                 //connecet is ok
             }else{
                 alert("Problem retrieving XML data");
             }
         }
     }
</script>

open()方法

open()用于用户创建HTTP请求，但是请求并未发送，其定义如下：

• method： 定义请求的类型，“get”，“post”大小写不敏感。
• url： 定义请求的url地址。
• async：定义是否异步处理请求，true：异步，false：同步，默认的是true。
• username，password：分别定义用户名和密码，不常用，默认为null。

send()方法

send()方法接收一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必要的。调用send()方法后，请求就会被分派到服务器。

onreadystatechange

onreadystatechange是一个事件句柄，值是(上面代码：state_Change)一个函数，当XHR对象状态发送变化时，调用此回调函数，我们可以在这个回调函数中判断请求是否成功。其中用于描述XHR对象的状态的是readyState.

readyState

readyState用来描述XHR对象的状态，无论是否成功都将响应的步骤。

Status

无论Ajax是否访问成功，由HTTP协议根据所提交的信息，服务器返回的HTTP头信息代码，使用ajax.status获得。

其中，readyState 代表了一个整体的状态，而 status 代表这个大状态下的小状态。

XHR对象的其他回调方法