Ajax学习笔记

一、Ajax简介
 asynchronous javascript and xml,为了解决传统的web应用当中“提交-等待-提交”模式而产生的一种
 技术，其实质是通过javascript调用浏览器内置的一个特殊对象(XmlHttpRequest)向服务器异步发送请求，
 服务器以xml或者文本的形式返回数据给XmlHttpRequest,然后，通过javascript从XmlHttpRequest中获取数据，
 更新页面。在整个过程当中，页面无刷新。
2、Ajax编程步骤
 step1:获得XMLHttpRequest对象，IE与其它浏览器不一样，其它浏览器都可以用new XMLHttpRequest()获得，而ie要使用ActiveXObject。
  function getXmlHttpRequest(){
    var xmlHttpRequest = null;
                if ((typeof XMLHttpRequest) != 'undefined') {
                    xmlHttpRequest = new XMLHttpRequest();
                }
                else { // IE
                    xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
                }
                return xmlHttpRequest;
   }
 
step2 :使用XMLHttpRequest发送请求->先open(连接)再send(发送)。
  1)发送get请求
     var url="some.do?name=zs";
     xhr.open("get",url,true);
         三个参数的含义:get:表示请求方式,可以大写。
                                 url:请求的地址，后面可以添加参数(?参数名=值)。
                              true:表示异步请求。
      xhr.send(null);//因为参数已经添加到url地址后面，所以指定null,注意不能不写
  2)发送post请求(推荐使用)
   var url="some.do";
   xhr.open("post",url,true);
   //发送之前设置消息头，固定写法
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   //发送请求，post方式参数放在send()内
   xhr.send("name=zs");

step3: 服务器处理请求，返回数据.
step4:使用回调函数来处理服务器返回的数据-onreadystatechange
   var url="some.do";
   xhr.open("get",url,true);
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//4表示从xhr中获取数据完毕,也就意味着此时可以处理数据了。
     var text = xhr.reponseText;//返回的是文本
     var xml = xhr.responseXML;//返回的是xml数据
     //使用返回的数据更新页面
     document.getElementById('a1').innerHTML=text;
    }
   };
   xhr.send(null); 
   //get方式，参数要加在url后面
   //post方式，参数要加在send()里
3、XmlHttpRequest对象的的关键属性介绍:
(1)readyState属性介绍
   含义:通过该属性获取XmlHttpRequest与服务器通讯的状态。
  0(创建完毕):XmlHttpRequest对象已经创建好,但没有调用open方法。
  1(初始化):XmlHttpRequest没有调用send()方法。
  2(发送):XmlHttpRequest开始发送数据给服务器。
  3(获取数据):XmlHttpRequest正获取服务器返回的数据.
  4(获取数据完毕):此时,可以通过XmlHttpRequest获得服务器返回的所有数据。
(2)reponseText属性:服务器返回的文本。
(3)responseXML属性:服务器返回的xml数据。
(4)onreadystatechange属性:用来设置回调函数，即根据通讯状态码处理服务器返回的数据。
   xhr.onreadystatechange=function(){
     //当xhr与server通讯状态为4,既从xhr中获取数据完毕。
     if(xhr.readyState==4){
        开始接收数据-->处理数据(既通过js的DOM操作更新页面)
     }
   }
(5)status属性:通过来判断xhr与服务器是否通讯正常。
                     返回服务器的状态码(200,500,404)。