Ajax

发布时间：2020-12-15 21:07:39 所属栏目：百科来源：网络整理

导读：一、什么是Ajax 浏览器与服务器之间采用HTTP协议通信，Ajax技术就是允许JavaScript脚本向服务器发起HTTP请求。Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和XML，也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用，不是一门新语

一、什么是Ajax

浏览器与服务器之间采用HTTP协议通信，Ajax技术就是允许JavaScript脚本向服务器发起HTTP请求。Ajax是(AsynchronousJavaScriptAnd XML)是异步的JavaScript和XML，也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用，不是一门新语言。与XML的关系就是可以读取和返回XML文件。

二、核心对象

Ajax的核心对象就是XMLHttpRequest，ajax通过XMLHttpRequest对象执行操作，其中XMLHttpRequest对象是在浏览器中内置的一个对象

三、运行原理

其运行原理就相当于创建了一个请求代理，通过代理去完成与服务器的交互，交互的过程中客户不需要等待，还可以进行其它的工作，交互完成以后，代理再将交互的结果返回给客户页面。

四、AJAX包括以下几个步骤：

1.创建AJAX对象

2.发出HTTP请求

3.接收服务器传回的数据

4.更新网页数据

概括起来就是一句话：AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。

	<script type="text/javascript">
		//1.创建一个ajax的对象
		if(window.XMLHttpRequest) {  
			var xhr = new XMLHttpRequest(); //非IE  
		} else {  
			var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE6  
		}
		//2.链接服务器
		xhr.open('get','test.html','true');//分别是：访问方式 访问地址 是否异步，一般都异步
		xhr.open('post','true');//若用post方法要加下面一句话,并且将加的内容放在send()中；若用get方法,将内容拼接在open访问地址中
		xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
		//3.发出HTTP请求
		xhr.send();//正式发送请求
		//4.接收服务器传回的数据
		xhr.onreadystatechange = function(){//.onreadystatechange当请求的状态发生改变的时候触发
			if(xhr.readystate == 4){//请求的状态码
				/*
				0:请求还没有建立（open执行前）
				1：请求建立了还没发送（执行了open）
				2：请求正式发送（执行了send）
				3：请求已受理，有部分数据可以用，但还没有处理完成
				4：请求完全处理完成
				*/
				alert(xhr.responseText);//返回的数据
			}
		}
	</script>

五、简单实例

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <script type="text/javascript">  
            window.onload = function() {  
                var oBtn = document.getElementById('btn');  
  
                oBtn.onclick = function() {  
                    ajax('aa.txt',function(str) {  
                        alert(str);  
                    },function() {  
                        alert('失败');  
                    });  
                };  
            };
			function ajax(url,fnSucceed,fnFaild) {   
				if(window.XMLHttpRequest) {  
					var xhr = new XMLHttpRequest(); //非IE  
				} else {  
					var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE6  
				} 
				
				xhr.open('GET',url,true);  			  
				xhr.send();  
			  
				xhr.onreadystatechange = function() {  
					if(xhr.readyState == 4) {  
						//alert(xhr.responseText);  
						if(xhr.status == 200) {  
							//alert('成功' + xhr.responseText);  
							fnSucceed(xhr.responseText);  
						} else {  
							if(fnFaild) {  
								//alert('失败' + xhr.status);  
								fnFaild();  
							}  
						}  
					}  
				}  
			}  
        </script>  
    </head>  
    <body>  
        <input type="button" id="btn" value="快点我" />  
    </body>  
</html>

（编辑：李大同）

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