AJAX和JSON学习整理

ゝ一世哀愁。 2024-04-17 05:55 54阅读 0赞

# AJAX #

#### AJAX是什么 ####

AJAX全称Asynchronous JavaScript And XML，通常被叫做阿贾克斯，  
是一种创建交互式网页应用的网页开发技术。  
该技术可以通过JS异步的向服务器发出请求，并返回符合XML（JSON）格式的字符串。

#### 如何使用AJAX ####

###### 1、用原生JS封装一个AJAX函数（基础版） ######

ajax(url,method,body,successfn,failfn){ 
    
    	//1、实例化XMLHttpRequest对象
    	let request=new XMLHttpRequest;
    	
    	//2、设置请求方式，URL以及是否异步（默认为true，可以省略）
    	request.open(method,url,true) 
    	
    	//3、设置当返回状态发生改变时执行的函数
    	requset.onreponcechange=function(){ 
    		if(requset.readystates===4&&requset.staus<=200&&requset.staus<300){ 
    			successfn(JSON.parse(responce));
    			console.log("成功");
    		}else if(requset.staus>=400){ 
    			failfn();
    			console.log("失败了！"+requset.staus);
    			}
    		}
    		
    	//4、判断请求方式来确定是否需要请求主体
    	if(method!=="post"){ 
    		request.send();
    	}else{ 
    		request.send(body);
    		}
    }

###### 2、如何实现JQuery.ajax（promise） ######

window.jQuery = function(nodeOrSelector){ 
      let nodes = document.queryselectorall(nodeOrSelector)
      return nodes
    }
    window.$ = window.jQuery
    
    window.jQuery.ajax = function({ url, method, body, headers}){ 
    
      //1、返回一个promise对象，以便使用than
      return new Promise(function(resolve, reject){ 
      
        //2、实例化XMLHttpRequest对象
        let request = new XMLHttpRequest()
        //3、设置请求方式和url(是否异步默认true可不写)
        request.open(method, url, true) 
         //4、设置请求头
        for(let key in headers) { 
          let value = headers[key]
          request.setRequestHeader(key, value)
        }
        //5、设置当返回状态发生改变时执行的函数(promise)
        request.onreadystatechange = ()=>{ 
          if(request.readyState === 4){ 
            if(request.status >= 200 && request.status < 300){ 
              resolve.call(undefined, request.responseText)
            }else if(request.status >= 400){ 
              reject.call(undefined, request)
            }
          }
        }
       //6、判断请求方式来确定是否需要请求主体
    	if(method!=="post"){ 
    		request.send();
    	}else{ 
    		request.send(body);
    	}
      })
    }

--------------------

# JSON #

##### JSON是什么 #####

JSON全称是JavaScript Object Notation,中文译 JS 对象简谱，是一种轻量级的数据交换格式。  
由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用的带宽，所以当前几乎所有的前后端传输数据都用JSON。

##### JSON的语法 #####

JSON的语法和JS中的对象非常相似，  
数据在名称/值对中  
数据由逗号分隔  
花括号保存对象  
方括号保存数组  
**注意**：不同于JS对象的是，JSON中的key一定要用双逗号`"`分割，例如：  
`"key":"value"`  
等价于JS对象中的  
`key="value"`

##### JSON的数据类型 #####

JSON 值可以是：

数字（整数或浮点数），  
字符串（在双引号中），  
逻辑值（true 或 false），  
数组（在方括号中），  
对象（在花括号中），  
null

--------------------

参考:  
[JSON----MDN][]  
[AJAX----MDN][]

[JSON----MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON
[AJAX----MDN]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX