Ajax基础知识

(1)什么是Ajax

其实质是利用浏览器内部的一个特殊的对象(XMLHttpRequest对象,一般称之为一个ajax对象)向服务器发请求(在发请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其它的任何操作)，服务器返回部分数据(不是一个完整的页面),在浏览器端，利用服务器返回的这些数据更新当前页面。整个过程，页面无刷新，不打断用户的操作。

(2)如何获取Ajax对象

 

function getXhr(){
			var xhr = null;
			if(window.XMLHttpRequest){
				//非ie浏览器
				xhr = new XMLHttpRequest();
			}else{
				//ie浏览器
				xhr = new ActiveXObject('MicroSoft.XMLHttp');
			}
			return xhr;
		}

 

(3)Ajax属性

•   onreadychangestate:绑订事件处理函数,处理readystatechange事件(当ajax 对象的readystate属性值发生了改变，比如从0变成了1,就会产生该事件)。

•   responseText:获得服务器返回的文本

 

•   resposeXML:获得服务器返回的xml文档。

•   status:获得服务器返回的状态码

      常用的状态码及其含义

       404：没有找到页面(not found)

       403：禁止访问(forbidden)

       500：内部服务错误(internal service error)

       200：一切正常(ok)

       304：没有被修改(not modified)

    在XMLHttpRequest对象中，服务器发送的状态保存在status属性中，通过和200或304比较，可以确保服务器是否发送一个成功的响应。 

•    readyState: 表示ajax对象与服务器进行通信的状态，有5个值，分别是0,1,2,3,4。比如4表示ajax对象已经获取了服务器返回的所有的数据。

(4)Ajax编程步骤

1. 获取Ajax对象
2. 发送请求

• get请求

      //true:表示发送异步请求

      //false:表示发送同步请求(发送同步请求时，浏览器会锁定当前页面，用户不能对当前页面做其它操作)。

           xhr.open('get','check_username.do?username=tom',true);

//绑订一个事件处理函数xhr.onreadystatechange=f1;

      //send方法会将请求数据包发送出去。

           xhr.send(null);

 

• post请求

      xhr.open('post','check_username.do',true);

      //添加一个content-type消息头

      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//post提交方式ajax默认没有content-Type

      xhr.onreadystatechange=f1;

      xhr.send('username=tom');

 

 3.编写服务器端逻辑，一般只需返回部分数据

 4.编写事件处理函数，处理服务器返回的数据