AJAX总结

1.什么是ajax，为什么要使用ajax？
ajax是“Asynchronous JavaScript and XML”的缩写。它是指一种创建交互式网页应用的网页开发技术。
ajax包含下列技术：
基于web标准（standards-basedpressentation）XHTML+CSS的表示；
使用DOM（document objectModel）进行动态显示及交互；
使用XML和XSLT进行数据交换及相关操作；
使用XMLHttpRequest进行异步数据查询、检索；
使用JavaScript将所有的东西绑定在一起。

2.ajax最大的特点。
ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送哪些没有改变过的信息。

3.XMLHttprequest对象。
ajax的核心是JavaScript对象XMLHttprequest。该对象在Internet Explorer 5中首次引入，他是一种支持异步请求的技术。简而言之，XMLHttprequest可以在使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttprequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
通过XMLHttprequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
ajax开始流行始于Google在2005年使用“Google Suggest”。
“Google Suggest”就是使用XMLHttprequest对象来创建动态的Web接口：
当用户开始输入google的搜索框，JavaScript发送用户输入的字符到服务器，然后服务器返回一个建议列表。
XHMLHttprequest对象在IE 5.0+,Safari 1.2,Mozillal 1.0/Firefox,Opera 8+和NetScapt 7开始被支持。

4.HMLHttprequest对象常用方法和属性。
open（）建立对服务器的调用，第一个参数是HTTP请求，方式可以为GET,POST或者服务器所支持的方式；
第二个参数是请求页面的URL；
第三个参数是判断更新方式，true为异步，false为同步。
send（）方法，发送具体请求。
abort（）方法，停止当前请求。
readyState属性，请求的状态，有5个可取的值：0=为初始化，1=正在加载，2=已加载，3=交互中，4=完成。
reponseText属性 服务器的响应，表示为一个串。
reponseXML属性 服务器的响应，表示为XML。
status服务器的HTTP状态码，200对应ok，400对应not found。

5.XMLHttprequest对象在IE和Firefox中创建方式的不同。
IE中通过new ActiveXObject()得到，Firefox中通过new XMLHttprequest()得到。

6.XML。
XML是扩展标记语言，能够用一系列简单的标记描述数据。

7.HTTP协议的主要特点。
1>.支持客户端/服务端模式，即请求（request）-响应（reponse）模式；
2>.简单快捷，客户端向服务区发送请求时，只需要传送请求方式和路径即可，所以简单，由于HTTP协议简单，使得HTTP服务器的程序规模小，因而速度很快；
3>.灵活，传输数据类型种类多；
4>.无连接，请求一次服务器后立刻断开连接，即非长连接，即短连接。
5>.无状态，HTTP协议对事物处理没有记忆能力。

8.GET和POST的比较。
共同点：都是向服务器请求数据的方式

GET	POST
数据放在地址栏后 ?reg=123&psw=123	send(数据参数)
数据量小	数据量大
安全性低	安全性高
传输速度快	传输速度慢

9.ajax的一般封装

/* 参数：
    obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
    url           请求的地址与参数
    data        发送的数据，要求格式是对象

    async       是否是同步,  true / false
    fail        失败的处理回调函数
    success     成功的处理回调函数
 */
(function(){
ajax=window.ajax={};

ajax.get=function(obj){
  if(obj.async==undefined){
    obj.async=true;
  }
  if(obj.data==undefined){
    obj.data="";
  }

  var xhr=new XMLHttpRequest();
  var url=obj.url;
  url+="?";
  url+=translate(obj.data);
  xhr.open("GET",url,obj.async);
  xhr.send();

  if(obj.async==true){
  xhr.onreadystatechange=function(){
    
    if(xhr.readyState==4){
      if(xhr.status==200){
        var str=xhr.responseText;
        obj.success&&obj.success(str);
      }else{
        obj.fail&&obj.fail();
      }
    }
    }
  }else{
    if(xhr.status==200){
      var str=xhr.responseText;
      obj.success&&obj.success(str);
    }else{
      obj.fail&&obj.fail();
    }
  }
}

ajax.post=function(obj){
  if(obj.async==undefined){
    obj.async=true;
  }
  if(obj.data==undefined){
    obj.data="";
  }

  var xhr=new XMLHttpRequest();
  var url=obj.url;
  xhr.open("POST",url,obj.async);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(obj.data);

  if(obj.async==true){
    xhr.onreadystatechange=function(){
      if(xhr.readyState==4){
        if(xhr.status==200){
          var str=xhr.responseText;
          obj.success&&obj.success(str);
        }else{
          obj.fail&&obj.fail();
        }
      }
    }
  }else{
    if(xhr.status==200){
      var str=xhr.responseText;
      obj.success&&obj.success(str);
    }else{
      object.fail&&obj.fail();
    }
  }
}

function translate(obj){
  var str="";
  for(var i in obj){
  str+=i;
  str+="=";
  str+=encodeURIComponent(obj[i]);
  str+="&";
}
  var str=str.substr(0,str.length-1);
  return str;
}
})();

这里使用立即执行函数封装起来是为了防止变量污染。

10.同源和跨域
同源：要求1.协议一致；2.域名字符串一致（每个符号都要一致）；3.端口一致。
跨域：1.ajax不可以跨域（在服务器端不支持的情况下（默认），ajax不能跨域，请求不到数据）；2.img，css，script，iframe都可以跨域。