Ajax的优缺点及工作原理?

2,819 阅读2分钟

一、定义和用法
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/…