如何使用Ajax

最新推荐文章于 2022-12-18 16:40:11 发布

战南城

最新推荐文章于 2022-12-18 16:40:11 发布

阅读量108

点赞数

分类专栏：个人笔记，不喜勿喷！！

本文链接：https://blog.csdn.net/qq_29948297/article/details/108354761

版权

个人笔记，不喜勿喷！！专栏收录该内容

329 篇文章 2 订阅

订阅专栏

要完整实现一个Ajax同步调用和局部刷新，通常需要以下几个步骤：

1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象

2.创建一个新的HTTP请求，并指定该HTTP请求的方法，URL

3.设置响应HTTP请求状态变化的函数

话不多说，代码伺候：

创建XMLHttpRequest对象：

// 封装通用的XMLHttpRequest对象 ，兼容各个版本 
	function createXHR(){
		// 判断浏览器是否将XMLHttpRequest最为本地对象实现，正对IE7，firefox,opera等
		if(typeof XMLHttpRequest != 'undefine'){
			// code for IE7+, Firefox, Chrome, Opera, Safari
			return new XMLHttpRequest();
		}else if(typeof ActiveXObject != 'undefine'){
			// code for IE6,IE5...
			var xmlArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
			var len = xmlArr.length, xhr;
			for(var i=0;i<len;i++){
				try{
					// 创建XMLHttpRequest对象
					xhr = new ActiveXObject(xmlArr[i]);
					break;
				}catch(ex){

				}
			}
			return xhr;

		}else{
			throw new Error('No XHR Ojbect available.');
		}
	}

也可以简写：

function crateXHR(){
			var xmlHttp;
			if(windown.XMLHttpRequest){
				//code for IE7+, Firefox, Chrome,Opera, Safari
				xmlHttp = new XMLHttpRequest();
			}else{
				// code for IE6, IE5
				xmlHttp = new ActiveXObject('Microsoft.XMLHttp');
			}
		}

　完整代码：

<html>
<head>
	
	<title>ajax</title>
</head>

<body>
	
<div id="banner" class="banner">
</div>

<script type="text/javascript">
	// 封装通用的XMLHttpRequest对象 ，兼容各个版本 
	function createXHR(){
		// 判断浏览器是否将XMLHttpRequest最为本地对象实现，正对IE7，firefox,opera等
		if(typeof XMLHttpRequest != 'undefine'){
			// code for IE7+, Firefox, Chrome, Opera, Safari
			return new XMLHttpRequest();
		}else if(typeof ActiveXObject != 'undefine'){
			// code for IE6,IE5...
			var xmlArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
			var len = xmlArr.length, xhr;
			for(var i=0;i<len;i++){
				try{
					// 创建XMLHttpRequest对象
					xhr = new ActiveXObject(xmlArr[i]);
					break;
				}catch(ex){

				}
			}
			return xhr;

		}else{
			throw new Error('No XHR Ojbect available.');
		}
	}

	// XMLHTTPRequest对象
	var xhr = createXHR(), data =null;


	// 响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readstatechagne属性发生改变时触发
	xhr.onreadystatechange = function(){
		if(xhr.readystate==4){
			if((xhr.status>=200 && xhr.status<300) || xhr.status === 304){
				// 获得服务器返回的数据
				// console.log(xhr.responseText);
				// responseText返回的数据是string类型
				// data = eval("("+xhr.responseText+")");
				data = JSON.parse(xhr.responseText)

				// 渲染数据到页面
				renderDataToDom();
			}
		}
	}

	// 创建请求  
	// open(method,url,async)方法有三个参数
	// method 请求方式，url 要请求的文件在服务器上的位置 async 请求是同步还是异步    
	xhr.open('get','./server.json',true);   
	// 发送请求
	xhr.send(null);
	// xhr.send({user:'zhangsan',id:6})
	// 设置http头部信息
	// xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');


	function renderDataToDom(){
 
	}


</script>

</body>
</html>

战南城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用Ajax

要完整实现一个Ajax同步调用和局部刷新，通常需要以下几个步骤：1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象2.创建一个新的HTTP请求，并指定该HTTP请求的方法，URL3.设置响应HTTP请求状态变化的函数话不多说，代码伺候：创建XMLHttpRequest对象：// 封装通用的XMLHttpRequest对象，兼容各个版本 func...
复制链接

扫一扫

专栏目录