AJAX原理及使用
Posted 星空实地
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX原理及使用相关的知识，希望对你有一定的参考价值。
Ajax 即“Asynchronous javascript And XML”（异步 JavaScript 和 XML），
是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不需要重新加载整个网页的情况下，对网页的某部分进行更新，传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
Ajax可使因特网应用程序更小、更快，更友好。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
ajax原理图
应用解决告诉你什么时候该用ajax
第一、请求的提交是为了页面数据的显示，这时候用户一般不希望看到页面的刷新，是使用AJAX的一个最佳时候。
第二、如果请求提交后，用户能从页面感觉到提交结果，这时候，也最好不要有页面刷新，推荐使用AJAX技术。
第三、如果请求提交后，用户不能从页面感觉到提交动作，如绝大多数时候的数据的增加和修改，这时候则需要页面刷新，不能使用AJAX技术。
第四、复杂的UI，以前对于复杂的C/S模式的UI，B/S模式一向采取逃避的方法，现在则可以放心大胆的使用AJAX来加以解决。
jQuery的ajax方法：
$.ajax({
url:'/comm/test.json',
type:'POST', //GET
async:true, //或false,是否异步
data:{
name:'leo',age:25
},
timeout:10000, //超时时间
dataType:'json', //返回的数据格式：json/xml/html/script/jsonp/text
beforeSend:function(xhr){
console.log(xhr)
console.log('发送前')
},
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log('错误')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log('结束')
}
})
原生的ajax方法：
$('#send').click(function(){
//请求的5个阶段，对应readyState的值
//0: 未初始化，send方法未调用；
//1: 正在发送请求，send方法已调用；
//2: 请求发送完毕，send方法执行完毕；
//3: 正在解析响应内容；
//4: 响应内容解析完毕；
var data = 'name=leo';
var xhr = new XMLHttpRequest(); //创建一个ajax对象
xhr.onreadystatechange = function(event){ //对ajax对象进行监听
if(xhr.readyState == 4){ //4表示解析完毕
if(xhr.status == 200){ //200为正常返回
console.log(xhr)
}
}
};
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //可有可无
xhr.send(data); //发送
});
以上是关于AJAX原理及使用的主要内容，如果未能解决你的问题，请参考以下文章