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',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,callback,type)

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

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

3.$.post()方法

$.post(url,type)

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

$.post('test.php',type)

4.$.ajax()方法

$.ajax()方法，这是方法不仅可是实现上面的load,$.get(),$.post()方法，而且还可以设定多种状态下的回调函数
$.ajax(options)是jQuery的最底层Ajax实现，这个方法只有一个参数，但是这个参数内包含了所需要的一切信息，参数以key:value形式存在，所有参数都是可选的
$.ajax(url,type,timeout,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(){}
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!