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负责发送这个请求-
open()方法
xhr.open('type','url',true);第一个参数是请求类型，get/post
第二个参数是请求的地址 第三个参数表示请求是同步还是异步，true代表异步处理 注意的一点就是，open方法不会发送请求，只是启动一个请求准备发送 -
send()方法
xhr.send(null);
send方法将请求送给服务器 send方法接受一个参数作为要发送的数据，如果不需要发送数据，参数设为null
-
检测响应状态码
一般请求发送之后，我们可以根据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”); } ` 检测 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请求的区别
get请求会将参数跟在url后进行传递，而post则是作为http消息实体内容发送给服务器
get方式对于传输的数据有大小限制，通常不能大于2kb，而post方式传递的数据量大小没有限制
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:请求方式，默认gettimeout:设置请求超时时间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(){}})