Ajax经常使用方法

Ajax的主要做用

Ajax的主要做用是向服务器请求数据的同时无需卸载页面，也就是局部刷新，能够带来了更好的用户体验，同时ajax也有他的不足，好比破坏了浏览器的前进后退按钮，对搜索引擎的支持不足，开发和调试工具缺少

javascript中的Ajax

在javascript中，ajax是经过XMLHttpRequest对象来实现的，这个对象用于和后台进行数据的交互。在ie7以前，XHR是经过MSXML库中的ActiveX对象实现的，ie7后咱们能够直接使用 var xhr = new XMLHttpRequest();建立一个XHR对象，建立好以后，咱们就能够经过xhr对象来调用相应的方法了。

javascript中Ajax的使用方法

在javascript中，调用Ajax主要分为两步，先open，再send
open指的是开启一个请求，而send负责发送这个请求

1. open()方法

   xhr.open('type','url',true);

   第一个参数是请求类型，get/post
   第二个参数是请求的地址
   第三个参数表示请求是同步仍是异步，true表明异步处理
   注意的一点就是，open方法不会发送请求，只是启动一个请求准备发送

2. send()方法

   xhr.send(null);

   send方法将请求送给服务器 send方法接受一个参数做为要发送的数据，若是不须要发送数据，参数设为null

3. 检测响应状态码
   通常请求发送以后，咱们能够根据xhr的status属性来判断下一步的操做，status属性会返回一个http状态码
   100-200表示请求已经接受，须要继续处理
   200-300表示请求已被服务器成功接收
   300-400表示重定向，须要客户端采起进一步操做
   400-500表示客户端发生错误， 妨碍了服务器的处理
   500-600表示服务器处理请求的过程发生错误

   `if((xhr.status>=200&&xhr.status<300)||xhr.status==304){    
      console.log(“request success”);
      }else{
          console.log(“request failed”);    
      } `

4. 检测 readyStatus属性
   发送异步请求的时候，通常要检测xhr的readyState属性，这个属性表示请求过程的当前活动阶段，一共有5个值，0,1,2,3,4
   0表明为初始化，open()未调用
   1表明启动 已调用open，未调用send
   2表明 已经调用send, 但尚未接受到响应
   3表明 接受到部分响应数据
   4表明 接受到所有响应数据
   当readyState的值发生变化时，就会触发一次readystatechange事件，用这个事件检测每次状态变化后的值。

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){ 
        if(xhr.readyState == 4){            
            if((xhr.status>=200&&xhr.status<300)||xhr.status==304){    
                console.log('request success');
            }else{
                console.log('request failed');    
            }
        }    
    } 
    xhr.open('get','test.php',true);        
    xhr.send(null);

get请求和post请求

get请求，经常使用于向服务器查询某些信息，get可将查询的字符串参数加在url的末尾

xhr.open('get','test.phpname1=value1&name2=value2',true);

post请求，一般用于向服务器发送应该被保存的数据，post请求的主体能够包含格式不限且大量的数据，

xhr.open('post','test.php',true);
 xhr.send('name1=value1&name2=value2');

get请求和post请求的区别

1. get请求会将参数跟在url后进行传递，而post则是做为http消息实体内容发送给服务器

2. get方式对于传输的数据有大小限制，一般不能大于2kb，而post方式传递的数据量大小没有限制

3. get方式会将请求的数据会被缓存起来，能够从浏览器的历史记录中读取这些数据，因此会带来一些安全性方面的问题，而post相对来讲安全不少

jQuery中的Ajax

javascript的ajax操做比较复杂， jQuery提供了一系列的方法，大大简洁了Ajax开发

1.load()方法

load(url,data,callback);

load方法主要是用来远程载入HTML代码并插入DOM
第一个参数是要访问的HTML的url地址
第二个参数是要发送至服务器的key:value数据
第三个参数是回调函数，须要注意的是：load方法的回调函数不管请求成功或者失败都会执行

load方法的传递方式是根据参数data来自动指定的

$('#submit').load('test.php',function(){});    //    无参数传递，get方式
$('#submit').load('test.php'{name:'fang',age:'30'},function(){});    //    有参数传递，post方式

2.$.get()方法

$.get(url,data,callback,type)

前两个参数和load方法是同样的
可是回调函数只有在载入成功的时候才会执行
第四个参数是服务器返回的内容格式，如xml,html,json,script,text

$.get('test.php',{
                name : 'fang',
                age : '33'
},function(){
//回调函数
},type)

3.$.post()方法

$.post(url,data,callback,type)

前两个参数和load,$.get()方法是同样的
可是回调函数只有在载入成功的时候才会执行
第四个参数是服务器返回的内容格式，如xml,html,json,script,text

$.post('test.php',{
                name : 'fang',
                age : '33'
},function(){
//回调函数
},type)

4.$.ajax()方法

$.ajax()方法，这是方法不只但是实现上面的load,$.get(),$.post()方法，并且还能够设定多种状态下的回调函数
$.ajax(options)是jQuery的最底层Ajax实现，这个方法只有一个参数，可是这个参数内包含了所须要的一切信息，参数以key:value形式存在，全部参数都是可选的
$.ajax(url,type,timeout,data,datatype,beforeSend,complete,success,error,global)这些是全部的参数
url:发送请求的地址
type:请求方式，默认get
timeout:设置请求超时时间
data:发送到服务器的数据
datatype:预期服务器返回的数据类型
beforeSend:发送请求前能够修改XMLHttpRequest对象的函数
complete:请求完成后调用的回调函数
success:请求成功后调用的回调函数
error:请求失败后调用的回调函数
global:表示是否触发全局Ajax事件，默认为true

$.ajax({
    url:'test.php',
    type:'GET',
    datatype:'json',
    beforeSend:function(){},
    success:function(){},
    error:function(){},
    complete:function(){}
})