一、定义和用法
1. AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
2. AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
3. AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
4. AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
二、优点
1. 减轻服务器的负担,按需取数据,最大程度的减少冗余请求。
2. 局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。
3. 基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离。
三、缺点
1. AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性。
2. AJAX只是局部刷新,所以页面的后退按钮是没有用的。
3. 对流媒体还有移动设备的支持不是太好等。
四、AJAX的工作原理
1. 创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))
2. 判断数据传输方式(GET/POST)
3. 打开链接 open()
4. 发送 send()
5. 当ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status)200-300之间或者304(缓存)执行回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送,请等待响应...');
jquery中的ajax方法参数总。 www.cnblogs.com/tylerdonet/…