javascriptajax总结

1、ajax是什么?

ajax: asynchronous javascript and xml: 异步的javascript和xml。

  ajax是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回)来部分更新当前页面。

  使用ajax技术之后，页面无刷新，并且不打断用户的操作。

2、ajax对象

(1)如何获得ajax对象?

  XMLHttpRequest并没有标准化，要区分浏览器:

  function getXhr()

{

     var xhr;

     if(window.XMLHttpRequest){

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

     }else{

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

     }

  }

(2)ajax对象的属性

     a. onreadystatechange: 绑订一个事件处理函数(即: 注册一个监听器)

当ajax对象的readyState值发生了改变(比如，

从0–>1)，就会产生readystatechange事件。

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

     c. responseXML:  获得服务器返回的XML dom对象

     d. status:        获得状态码

     e. readyState:   返回ajax对象与服务器通讯的状态。返回值是一个number类型的值，不同的值表示不同的含义:

0: (为初始化) --> 对象已建立，但是尚未初始化(尚未调用 open方法)

1: (初始化) --> 对象已建立，尚未调用send方法

2: (发送数据) --> send方法已调用

3: (数据传送中) --> 已接受部分数据

4: (响应结束) --> 接收了所有的数据

(3)ajax编程的基本步骤

     1) 获取ajax对象(XmlHttpRequest)

2. 使用 XmlHttpRequest向服务器发送请求

3. 在服务器端处理请求

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

     1) 获取ajax对象(XmlHttpRequest)
   

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=f1;

           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=f1;

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

  注意:

     因为按照http协议的要求，如果发送的post请求，请求数据包里面，应该有一个消息头 content-type。但是，ajax对象默认没有，所以，需要调用setRequestHeader方法。



     3) 编写服务器端的代码，服务器端一般不需要返回完整的页面，只需要返回部分的数据，比如一个简单的字符串。

     4) 编写监听器

        function f1(){

           if(xhr.readyState == 4){

              //获得服务器返回的数据

              var txt = xhr.responseText;

              //dom操作

           }

        }