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 编写监听器