javascript实现Ajax

爱撒谎的男孩

发布于 2019-12-31 15:03:13

5820

发布于 2019-12-31 15:03:13

文章被收录于专栏：码猿技术专栏码猿技术专栏码猿技术专栏

文章目录

javascript实现Ajax

定义

异步的javascript和XML，实现异步提交功能的技术(XMLHttpRequest)
不响应页面的前提下，服务器可以响应其中的一小部分数据到页面上

实现的步骤

创建XMLHttpRequest

解决浏览器兼容问题

function getXHR(){
	var xmlhttp;
	//判断当前浏览器是否识别XMLHttpRequest
	if (window.XMLHttpRequest)
 			{// code for IE7+, Firefox, Chrome, Opera, Safari
 				xmlhttp=new XMLHttpRequest();
 			}
	else
 			{// code for IE6, IE5
 				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 			}
 		return xmlhttp;  
}

打开

//第一个参数：请求的方式
//第二： 请求的url
//第三个：是否为异步，true表示异步，false表示同步
xhr.open("GET","Url",true);

发送请求

xhr.send();

接收服务器响应数据

xhr.onreadystatechange : 表示从发送请求到响应请求的状态变化，根据状态的变化，处理数据5种状态
xhr.readyState ：获取状态值
- 0 : 表示xhr对象创建，但是还未初始化
- 1 ：初始化完成，发送请求
- 2 ：接收服务器的响应
- 3：解析服务器断响应的数据
- 4：响应数据
xhr.status : 获取响应状态码
- 200 ：表示ok
- if(xhr.status==200)
xhr.responseText : 获取文本数据

//用于监听
		xhr.onreadystatechange=function(){
			//如果数据响应成功，并且状态码为200
			if (xhr.readyState==4&&xhr.status==200) {
				//处理数据
				var text=xhr.responseText;   //获取文本数据

			}
		}

实例

请求本地的file.text文件

function LoadText(){
	var xhr;
	//判断当前浏览器是否识别XMLHttpRequest
	if (window.XMLHttpRequest)
 			{// code for IE7+, Firefox, Chrome, Opera, Safari
 				xhr=new XMLHttpRequest();
 			}
	else
 			{// code for IE6, IE5
 				xhr=new ActiveXObject("Microsoft.XMLHTTP");
 			}
 		
 		//用于监听
 		xhr.onreadystatechange=function(){
 			//如果数据响应成功，并且状态码为200
 			if (xhr.readyState==4&&xhr.status==200) {
 				//处理数据
 				var text=xhr.responseText;   //获取文本数据
 				alert(text);
 			}
 		}
	
             //异步请求
 		xhr.open("GET","file.text",true);  
 		xhr.send();  //发送请求

}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-05-04，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript