原生Ajax的创建过程 == jsonp原理

阳光穿透心脏的1/2处 2022-12-27 08:55 89阅读 0赞

# 原生Ajax的创建过程 #

##### 1、创建xhr 核心对象 #####

var xhr=new XMLHttpRequest();

###### 2、调用open 准备发送 ######

*  ###### 参数一：请求方式 ######
 *  ###### 参数二: 请求地址 ######
 *  ###### 参数三：true异步，false 同步 ######

xhr.open('post','http://www.baidu.com/api/search',true)

###### 3、如果是post请求，必须设置请求头。 ######

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

###### 4、调用send 发送请求 （如果不需要参数，就写null） ######

xhr.send('user=tom&age=10&sex=女')

###### 5、监听异步回调 onreadystatechange ######

*  ###### 判断readyState 为4 表示请求完成 ######
 *  ###### 判断status 状态码 为 200 表示接口请求成功 ######
 *  ###### responeseText 为相应数据。字符串类型。 ######

xhr.onreadystatechange=function(){ 
              if(xhr.readyState==4){  
                if(xhr.status==200){ 
                  console.log(xhr.responseText);
                  var res=JSON.parse(xhr.responseText);
                  console.log(res);
                  if(res.code==1){ 
                    modal.modal('hide');
                    location.reload();
                  }
                }
              }

#### 备注：如果是post请求，想要传json格式数据。 ####

###### 设置请求头 ######

xhr.setRequestHeader('Content-Type', 'application/json')

###### open发送数据 ######

xhr.open({ _id:xxx,user:xxxx,age:xxxx})

===================================================================

# jsonp原理 #

## 前言 ##

> 下面是原生jsonp的使用案例。后端使用node搭建的简易服务器。

### 1. 前端代码 ###

<!DOCTYPE html>
    	<html lang="en">
    	
    	<head>
    	  <meta charset="UTF-8">
    	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    	  <title>Document</title>
    	  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    
    	</head>
    	
    	<body>
    	  <script>
    	    function showInfo123(data) { 
    	      console.log(data)
    	    }
    	  </script>
    	
    	
    	<script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
    	
    	
    	
    	<button id="btn">jsonp</button>
    	
    	</body>
    	
    	</html>
    	
    	<script>
    	$('#btn').click(function(){ 
    	  var frame = document.createElement('script');
    	  frame.src = 'http://localhost:3000/getscript?callback=showInfo123';
    	  $('body').append(frame);
    	})
    	</script>

### 2. 后端代码 node.js ###

// 导入 http 内置模块
    		const http = require('http')
    		// 这个核心模块，能够帮我们解析 URL地址，从而拿到 pathname query 
    		const urlModule = require('url')
    		
    		// 创建一个 http 服务器
    		const server = http.createServer()
    		// 监听 http 服务器的 request 请求
    		server.on('request', function (req, res) { 
    		
    		  // const url = req.url
    		  const {  pathname: url, query } = urlModule.parse(req.url, true)
    		
    		  if (url === '/getscript') { 
    		    // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用
    		    // var scriptStr = 'show()'
    		
    		    var data = { 
    		      name: 'xjj',
    		      age: 18,
    		      gender: '女孩子'
    		    }
    		
    		    var scriptStr = `${ query.callback}(${ JSON.stringify(data)})`
    		    // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
    		    res.end(scriptStr)
    		  } else { 
    		    res.end('404')
    		  }
    		})
    		
    		// 指定端口号并启动服务器监听
    		server.listen(3000, function () { 
    		  console.log('server listen at http://127.0.0.1:3000')
    		})

### 话术总结：JSONP原理 ###

###### ajax 请求受同源策略影响，不允许进行跨域请求，我们利用 script 标签的 src 属性不受同源策略的约束，利用这个特性jsonp需要以下步骤： ######

> 1、动态创建`<script></script>(document.createElement('script'))`  
> 2、设置src 属性，(src中要包含参数`callback=fn`)进行跨域请求  
> 3、将 `<script></script>`添加到页面中执行 `（body.appendChild('script')）`  
> 4、页面要提前定义好`callback。`  
> 5、后端会返回回调函数执行并包裹参数`callback(data)`

###### 备注： ######

###### 服务端不再返回JSON格式的数据，而是返回回调函数包裹数据（fn(\{name:‘tom’,age:18\}），在src中进行了调用，这样实现了跨域。 ######

#### CORS设置跨域请求 ####

//设置允许跨域的域名，*代表允许任意域名跨域 CORS跨域
     res.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:3003");

#### vue-cli如何设置代理跨域 ####

###### vue组件中： ######

fn(){ 
          this.$axios.get('/api/api/v1/home').then(res=>{ 
               console.log(res.data);
          })
        }

module.exports={ 
        devServer: { 
            proxy:{ 
                '/api':{ 
                    target:'http://127.0.0.1:3002/',//跨域请求资源地址
                    ws:false,//是否启用websockets
        /*开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据， 这样服务端和服务端进行数据的交互就不会有跨域问题*/
                    changeOrigin:true
                    pathRewrite:{ 
                        '^/api':''//注册全局路径
                    }
                }
            }
        }
    }