原生js实现的ajax请求

╰+攻爆jí腚メ 2021-07-24 13:10 519阅读 0赞

### **什么是ajax** ###

ajax = *A*synchronous *J*avaScript *A*nd *X*ML.

ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

### 什么是**XMLHttpRequest**  ###

XMLHttpRequest 对象用于同后台服务器交换数据；所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>new XMLHttpRequest()</td> 
   <td>创建新的 XMLHttpRequest 对象</td> 
  </tr> 
  <tr> 
   <td>abort()</td> 
   <td>取消请求</td> 
  </tr> 
  <tr> 
   <td>getAllResponseHeaders()</td> 
   <td>返回头部信息</td> 
  </tr> 
  <tr> 
   <td>getResponseHeader()</td> 
   <td>返回特定的头部信息</td> 
  </tr> 
  <tr> 
   <td>open(<em>method</em>,&nbsp;<em>url</em>,&nbsp;<em>async</em>,&nbsp;<em>user</em>,&nbsp;<em>psw</em>)</td> 
   <td> <p>请求</p> 
    <ul> 
     <li>method：请求类型 GET 或 POST</li> 
     <li>url：文件路径</li> 
     <li>async：true（异步）或 false（同步）</li> 
     <li>可选用户名、密码</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>send()</td> 
   <td>将请求发送到服务器，用于 GET 请求</td> 
  </tr> 
  <tr> 
   <td>send(<em>string</em>)</td> 
   <td>将请求发送到服务器，用于 POST 请求</td> 
  </tr> 
  <tr> 
   <td>setRequestHeader()</td> 
   <td>向要发送的报头添加标签/值对</td> 
  </tr> 
 </tbody> 
</table>

**XMLHttpRequest的属性：**

<table> 
 <tbody> 
  <tr> 
   <td>onreadystatechange</td> 
   <td>定义当 readyState 属性发生变化时被调用的函数</td> 
  </tr> 
  <tr> 
   <td>readyState</td> 
   <td> <p>状态</p> 
    <ul> 
     <li>0：请求未初始化</li> 
     <li>1：服务器连接已建立</li> 
     <li>2：请求已收到</li> 
     <li>3：正在处理请求</li> 
     <li>4：请求已完成且响应已就绪</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>responseText</td> 
   <td>返回字符串格式响应数据</td> 
  </tr> 
  <tr> 
   <td>responseXML</td> 
   <td>返回XML格式响应数据</td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td> <p>返回状态号</p> 
    <ul> 
     <li>200: "OK"</li> 
     <li>403: "Forbidden"</li> 
     <li>404: "Not Found"</li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

**ajax 如何工作：**

1.  网页中发生一个事件（页面加载、按钮点击）
2.  由 JavaScript 创建 XMLHttpRequest 对象
3.  XMLHttpRequest 对象向 web 服务器发送请求
4.  服务器处理该请求
5.  服务器将响应发送回网页
6.  由 JavaScript 读取响应
7.  由 JavaScript 执行正确的动作（比如执行代码更新页面）

先做一个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>

点击按钮：

![20201206201542307.png][]

再看一下post：

<!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>

![20201206202009982.png][]

把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>

若需要修改调用的方式或者传入的参数 ，只需要在option里面更改即可：

![20201206202837889.png][]

### ***欢迎指正交流，点个赞吧！！*** ###

[20201206201542307.png]: /images/20210724/0c5d84e080c54415876831928749bba2.png
[20201206202009982.png]: /images/20210724/71fb0b7974c149879121a3153da3aaa0.png
[20201206202837889.png]: /images/20210724/81a1d3e27afd4bc58e6eb4057b8c45f0.png