ajax学习总结

ajax是什么

全称Asynchronous Javascript and XML(异步javascript和XML);它的出现揭开了无刷新更新页面的新时代；

ajax的5种状态

1.（0未初始化）还没有调用send（）方法；

　　此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。

2.（1载入）已调用send（）方法，正在发送请求；

　　此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。

3.（2载入完成）send（）方法执行完成，已经接收到全部响应内容；

　　此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。

4.（3交互）正在解析相应内容；

　　此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。

5.（4完成）响应内容解析完成，可以在客户端调用了；

　　此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

1. /*声明用来装入XMLHttpRquest对象*/
   var xhr;
   
   /*if ie5-ie6以ActiveXObject方式引入XMLHttpRequest对象;
      else windowsde的子对象；   
   */
   if(window.ActiveXObject){
      xhr=new Active XObject("Miceosoft.XMLHTTP");       
   }else{
      xhr=new XMLHttpRequest();   
   }
   
   /*实例化成功后，open()方法初始化XMLhHttpRequest对象，指定HTTP方法和使用的服务器url*/
   xhr.open("GET","test.php",true)
   xhr.open('post','test.php',true);/*注册XMLhHttpRequest对象回调函数，当readyState值改变时，激发onreadystatechange事件*/
   xhr.onreadystatechange=RequestCallBack;
   
   /*使用send（）方法发送请求,get方式参数可以为空*/
   xhr.send(null)
   xhr.send('name1=value1&name2=value2');
   
   /*请求状态改变时，调用RequestCallBack,当readystate=4并且http状态200，执行*/
   function RequestCallBack(){
     if(xhr.readyState==4){
        if(xhr.status==200){
          //xhr.responseText; 
        } 
       }
   }

jquery中的ajax

一、get和post方式的不同

1.get会将参数跟在url后面进行传递，而post请求则是作为http消息的实体内容发送给web服务器，在ajax中这两种区别对用户是不可见的；

2.get方式对数据的大小有限制（2kb），而post方式传递的数据要不get方式大得多；

3.get方式请求的数据会被浏览器缓存起来，存在安全问题，而post方式可以避免这些问题；

4.服务器端的获取方式不相同，get通过$_GET[]获取，post通过$_POST[]获取，都可用$_REQUEST[]来获取；

二、常用方法

load(url,[data],[callabck]);load()方法传递参数没有参数是get方式，有参数是post方式，自动指定；回调函数3个参数，返回的内容、请求状态（success/error/notmodified/timeout）、XMLHttpRequest对象；在load()方法中ajax请求成功与否回调函数都会被触发。

$.get(url,[data],[callback],[type]);$.post(url,[data],[callback],[type]);type包括xml/html/script/json/text/_default;回调函数只有在请求成功后才被执行；html最简单，xml文档可移植性很强是未来的主流数据交换格式；json应用也比较多。

$.getScript()用到js文件时候再加载；

$.getJSON()加载json，通过回调函数对返回的数据进行处理，利用$.each()遍历对象和数组。$.each()不同于jquery的each(）对象，不错做jquery对象，而是以一个数组或对象作为第一个参数，以一个回调函数作为第二个参数，回调函数拥有两个参数对象成员和数组索引，

$(function(){
  $("#send").click(function(){
    $.getJSON('test.php',function(){
      var html='';
      $.each(data,function(textindex,text){
        html+='<div class='xxx'></div>'
      })
      $("xxxx").html(html);
    })
  })
})

通过使用JSONP形式的回调函数加载器他网站的json数据。

$.ajax(options)方法

url：string 发送请求地址；

type：string  请求方式  默认是get方式；

timeout：number  设置请求超时时间；

data：object或string  ；

dataType：string  xml、html、script、json、jsonp、text；

beforesend：function ；

conplete：function 请求完成后调用的回调函数；

success：function 请求成功后调用的回调函数，有两个参数data、textStatus；

error：function 请求失败  三个参数XMLHttpRequest对象、错误信息、捕获的错误信息；

global：boolean 默认true触发全局ajax，AjaxStart或AjaxStop可用于控制各种ajax时间；

$.ajax()方法是jquery最底层的ajax实现，因此可以替代前面所有的方法；