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

最新推荐文章于 2022-12-02 20:58:27 发布

殘血★戰狼王

最新推荐文章于 2022-12-02 20:58:27 发布

阅读量122

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/WLIULIANBO/article/details/110940029

版权

JavaScript 专栏收录该内容

22 篇文章 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>
	<!-- <script>
	  show()
	</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':''//注册全局路径
                }
            }
        }
    }
}

殘血★戰狼王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生Ajax的创建过程 == jsonp原理

原生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-
复制链接

扫一扫