原生js实现的ajax请求

最新推荐文章于 2024-06-19 11:25:09 发布

小果子^_^

最新推荐文章于 2024-06-19 11:25:09 发布

阅读量404

点赞数

分类专栏： js 文章标签： javascript ajax servlet

原文链接：https://blog.csdn.net/dkm123456/article/details/110750062

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原生js实现的ajax请求

1. ajax定义
ajax = Asynchronous JavaScript And XML.
ajax允许通过与场景后的Web服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不是重新加载整个页面。
（1）什么是XMLHttpRequest
XMLHttpRequest对象用于同后台服务器交换数据；所有现代浏览器（Chrom、IE7+、Firefox、Safari以及Opera）都有内建的XMLHttpRequest对象。
在这里插入图片描述
（2）XMLHttpRequest的属性：

（3）ajax如何工作：
① 网页中发生一个事件（页面加载、按钮点击）
②由JavaScript创建XMLHttpRequest对象
③XMLHttpRequest对象向web服务器发送请求
④服务器处理请求
⑤服务器响应数据发送会网页
⑥由JavaScript读取响应
⑦由JavaScript执行正确的动作（比如执行代码更新页面）

2. 请求
（1）get请求

	<!DOCTYPE html>
	<html>
	    <head>
	        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
	        </head>
	        <body>
	        
	        <p id="txt"></p>
	        <button onclick="do_get()">获取数据</button>
	        </body>
	<script>
	 
	function getXhr(){
		if (window.XMLHttpRequest) {
		    // 用于现代浏览器的代码
		     xmlhttp = new XMLHttpRequest();
		 } else {
		    // 应对老版本 IE 浏览器的代码
		     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		 }
		 return xmlhttp;
	}
	 
	function get(url,async){
		var xhr = getXhr();
			xhr.open('GET',url,async);
			xhr.send(null);
			xhr.onreadystatechange=function(){
				if(xhr.readyState ===4){
					var text ;
					if(xhr.status === 200){
						text=xhr.responseText;
					}else{
						text='获取失败';
					}
					callback(text);
				}
			}
	}
	 
	function callback(text){
		document.getElementById("txt").innerText=text;
	}
	 
	function do_get(){
		get("ajax_test.txt",true);
	}	
	</script>
	</html>
	```
（2）post请求
```javascript
	<!DOCTYPE html>
	<html>
	    <head>
	        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
	        </head>
	        <body>
	        
	        <p id="txt"></p>
	        <button onclick="do_post()">获取数据</button>
	        </body>
	<script>
	 
	function getXhr(){
		if (window.XMLHttpRequest) {
		    // 用于现代浏览器的代码
		     xmlhttp = new XMLHttpRequest();
		 } else {
		    // 应对老版本 IE 浏览器的代码
		     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		 }
		 return xmlhttp;
	}
	 
	function get(url,async){
		var xhr = getXhr();
			xhr.open('GET',url,async);
			xhr.send(null);
			xhr.onreadystatechange=function(){
				if(xhr.readyState ===4){
					var text ;
					if(xhr.status === 200){
						text=xhr.responseText;
					}else{
						text='获取失败';
					}
					callback(text);
				}
			}
	}
	 
	function post(url,async){
		var xhr = getXhr();
			xhr.open('POST',url,async);
			//post需加上这句，不然报错
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xhr.send();
			xhr.onreadystatechange=function(){
				if(xhr.readyState ===4){
					var text ;
					if(xhr.status === 200){
						text=xhr.responseText;
					}else{
						text='获取失败';
					}
					callback("POST "+text);
				}
			}
	}
	 
	function callback(text){
		document.getElementById("txt").innerText=text;
	}
	 
	function do_get(){
		get("ajax_test.txt",true);
	}	
	function do_post(){
		post("ajax_test.txt",true);
	}
	</script>
	</html>

（3）get、post合并，并加上参数的调用

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        </head>
        <body>
        
        <p id="txt"></p>
        <button onclick="do_ajax()">获取数据</button>
        </body>
<script>
	function _doAjax(option){
		var xhr = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject('Microsoft.XMLHTTP');
		if(!xhr){
			throw new Error('不支持发起http请求！');
		}
		var opt = option || {},
			url = opt.url,
			async = opt.async ,
			type = (opt.type || 'GET').toUpperCase(),
			data = opt.data || {};
			
			if(typeof async === 'undefined'){
				async = true ;//如果跨域，这个参数用false不行
			}
			if(!url){
				throw new Error('请填写url!');
			}
			xhr.open(type,url,async);
			type === 'POST' && xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
			xhr.send(type === 'GET'?null : formatData(data));
			xhr.onreadystatechange=function(){
				if(xhr.readyState ===4){
					if(xhr.status === 200){
						cb(type+" "+xhr.responseText,'suc');
					}else{
						cb(type+" "+xhr.responseText,'fail');
					}
				}
			}
				
		function formatData(data){
			var rData='';
			for(var key in data){
				rData += key + '=' + data[key] + '&';
			}
			return rData.replace(/&$/,'');
		}
	}
	
	function cb(text,result){
		document.getElementById("txt").innerText=text;
	}
	
	function do_ajax(){
		var option = {
			url:'ajax_test.txt',
			type:'get',
			async:true,
			data:{}
		}
		_doAjax(option);
	}
	
	
</script>
</html>