ajax基本流程,Ajax编程的基本步骤

ajax这门技术实在是过于重要,因此将上一篇文章做个精简处理,总结下实际使用过程中的方法和注意事项:

ajax的请求方式有很多,但是他们基本上都具有如下几个步骤:

获取ajax对象(XmlHttpRequest)

使用 XmlHttpRequest向服务器发送请求

在服务器端处理请求

在监听器当中，处理服务器返回的响应

1. 获取ajax对象

function getXhr() {

var xhr;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest(); // 非ie浏览器

}else{

xhr = new ActiveXObject('Microsoft.XMLHttp'); // ie浏览器

}

}

var xhr = getXhr();

2 发送请求

xhr.open(请求方式, 请求地址, 异步还是同步);

请求方式: get/post

请求地址:如果是get请求，请求参数要添加到请求地址的后面。

true表示异步请求: ajax对象发请求的同时，用户可以对当前 页面做其它的操作。一般常用异步。

false表示同步请求:ajax对象发请求的同时,浏览器会锁订当 前页面，用户需要等待处理完成之后才能做下一步操作。

方式一: get请求

var xhr = getXhr();

xhr.open('get', 'check_name.action?name=zs', true);

xhr.onreadystatechange=callBack; //绑定回调函数

xhr.send(null);

方式二: post请求

var xhr = getXhr();

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

// 如果发送的是 post请求，需要设置消息头的编码格式为 “application”

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

xhr.onreadystatechange=callBack; //绑定回调函数

xhr.send('username=' + $F('username'));

3 服务器端响应

一般在服务端获取到了ajax请求之后自己做处理，最后一般会返回一个结果出来

4 编写监听器