get、post、jsonp的封装

最新推荐文章于 2022-03-08 10:40:19 发布
最新推荐文章于 2022-03-08 10:40:19 发布
阅读量342 收藏
点赞数 1
分类专栏： JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Start_t/article/details/100079056
版权

get、post、jsonp的封装

get、post、jsonp的封装

get与post的区别

get与post都可以在ajax中都可以用来发送数据，那么它们两者的区别如下：

  1. POST主要用来发送数据，GET主要用来接受数据；
  2. PSOT发送数据的安全性较好，而GET较差；；
  3. POST发送数据不限制大小，而GET大小受限2~100k；
  4. POST发送的数据和GET发送的数据被请求地址接收到后显示的格式不一致；
  5. GET发送的数据被解析成key和value； POST发送的数据会被解析成字符串；
  6. get需要清除缓存，代码如下：ajaxGet(‘data/test.txt?t=’+ new Date().getTime(),fn)。

什么时候用GET和POST ：在数据获取时用GET方式，在操作数据时应使用POST方式。

jsonp与get、post的区别

jsonp可以解决跨域：

  1. 当网站发展壮大到一定地步的时候，会建立很多的节点，各个节点的IP是不同的；
  2. 当测试阶段数据和本机的IP不通用的时候；
  3. 当本机请求服务器上数据的时候。
    …

post和get只能解决本地服务器上的数据请求

后台的跨域解决方案：CORS跨域：
在php中加入以下两句就可以实现跨域访问
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

get封装

		<input type="text" id="a">
		<input type="text" id="b">
		<input type="button" id="btn" value="发送">
		
	<script type="text/javascript">
			
		var oa = document.getElementById("a");
		var ob = document.getElementById("b");
		var obtn = document.getElementById("btn");	
		
		// obtn.onclick = function(){
		// 	var url = `http://localhost/ajax/data/get.php?user=${oa.value}&pass=${ob.value}`;
		// 	ajaxGet(url,function(res){
		// 		alert(res);
		// 	})
		// }
		
		//或
		
		obtn.onclick = function(){
			var url = `http://localhost/ajax/data/get.php`;
			ajaxGet(url,function(res){
				alert(res);
			},{
				user:oa.value,
				pass:ob.value
			})
		}
		function ajaxGet(url,cb,data){
			data = data || {};
			var str = "";
			for(var i in data){
				str += `${i}=${data[i]}&`
			}
			//设置时间戳，清楚缓存
			var d = new Date();
			//_wtt可任意设置
			url = url + "?" + str +"_wtt=" + d.getTime();
			//设置兼容，另一种适应IE5的基本上已经被淘汰
			var xhr = new XMLHttpRequest();
			xhr.open("get",url);
			xhr.onreadystatechange = function(){
			//4表示（完成）响应内容解析完成，可以在客户端调用了；200表示交易成功
				if(xhr.readyState == 4 && xhr.status == 200){
					cb(xhr.responseText)
				}
			}
			xhr.send();
		}	
	</script>

	//这是用来接收的php文件	
<?php
   $u = @$_GET["user"];
   $p = @$_GET["pass"];
   echo "这是php接收到的get的数据：".$u."----".$p;
?>

注：
ajax的兼容问题：
ajax = new XMLHttpRequest();
ajax = new ActiveXObject(“Microsoft.XMLHTTP”); //IE5

post封装

		<input type="text" id="txt1">
		<input type="text" id="txt2">
		<input type="button" id="btn" value="发送">
	<script type="text/javascript">
		
		var otxt1 = document.getElementById("txt1")
		var otxt2 = document.getElementById("txt2")
		var obtn = document.getElementById("btn")
		
		obtn.onclick = function(){
			var url = "http://localhost/ajax/post.php";
			ajaxPost(url,function(res){
				console.log(res)
			})
		}
		
		function ajaxPost(url,cb){
			
			var xhr = new XMLHttpRequest();
			xhr.open("post",url)
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){
			        cb(xhr.responseText);
			    }
			}
			//在发送数据之前ajax.send("user=admin"),设置请求头信息
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send();
		}
	</script>

	//这是来自url内的文件,也就是post.php内的代码	
<?php
    $u = @$_POST["user"];
    $p = @$_POST["pass"];
    echo "这是php接收到的post的数据：".$u."---".$p;
?>

post在发送数据之前ajax.send(“user=admin”),设置请求头信息
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

jsonp的封装

	<script type="text/javascript">
	document.onclick = function(){
		var url = "http://127.0.0.1/jsonp/jsonp2.php";
		jsonp(url,function(res){
			console.log(res)
		},{
			user:"admin",
            pass:123,
            asd:"sadaasa",       //后台要执行的函数名
            cloumnName:"asd"  		//后台接收的要执行的函数名所在的字段名
		})
	}	
	function jsonp(url,success,data){
		
		data = data || {};
		var str = "";
		for(var i in data){
			str += `${i}=${data[i]}&`
		}
		url = url + "?" + str;
		
		var script = document.createElement("script");
		script.scr = url;
		document.body.appendChild(script);
		
		window[data[data.columnName]] = function(res){
			success(res)
		}
	}
	</script>	

	//这是url中的php代码	
	<?php
    $a = @$_GET["user"];
    $b = @$_GET["pass"];
    $cb = @$_GET["asd"];
    $data = "这是php通过jsonp接收到的跨域的数据，又还给你了：".$a."---".$b;
    echo $cb."('".$data."')";
	?>

get与post二合一封装

	function ajxa(options){
		 // 解析参数，处理默认参数
		let {type,url,success,error,data} = options;
		type = type || "get";
		data = data || {};
		// 解析要发送的数据
		var str = "";
		for(var i in data){
			str += `${i}=${data[i]}&`;
		}
		
		if(type == "get"){
			var d = new Date();
			url = url + "?" + str + "_wtt=" + d.getTime();
		}
		
		var xhr = new XMLHttpRequest();
		xhr.open(type,url,true);
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				success(xhr.responseText)
			}else if(xhr.readyState == 4 && xhr.status != 200){
				error && error(xhr.status);
			}
		}
		
		if(type == "get"){
			xhr.send();
		}else if(type == "post"){
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send(str.slice(0,str.length-1));
		}
	}

<?php
	$u = @$_GET["user"];
    $p = @$_GET["pass"];
    echo "这是php接收到的数据：".$u."----".$p;
?>

<?php
	$u = @$_POST["user"];
    $p = @$_POST["pass"];
    echo "这是php接收到的post的数据：".$u."---".$p;
?>

get、post、jsonp三合一封装

function ajax(options){
    // 解析参数，处理默认参数
    let {type,url,success,error,data,timeout} = options;
    type = type || "get";
    data = data || {};
    timeout = timeout || 500;
    // 解析要发送的数据
    var str = "";
    for(var i in data){
        str += `${i}=${data[i]}&`;
    }
    // 处理url和数据
    if(type == "get" || type == "jsonp"){
        var d = new Date();
        url = url + "?" + str + "__qft=" + d.getTime();
    }
    
    // 区分jsonp和ajax的功能
    if(type === "jsonp"){
        var script = document.createElement("script");
        script.src = url;
        document.body.appendChild(script);

        window[data[data.columnName]] = function(res){
            success && success(res);
            error = null;
        }
        
        // jsonp的失败(超时)
        setTimeout(() => {
            error && error("timeout");
            success = null;
        }, timeout);
    }else{
        // 开启ajax
        var xhr = new XMLHttpRequest();
        xhr.open(type,url,true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                success(xhr.responseText);
            }else if(xhr.readyState == 4 && xhr.status != 200){
                // 首先保证ajax的过程结束了，如果http给失败，才是真正的失败
                error && error(xhr.status);
                // if(error) error(xhr.status);
            }
        }
        // 根据发送方式，决定发送的信息
        if(type == "get"){
            xhr.send()
        }else if(type == "post"){
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(str.slice(0,str.length-1));
        }
    }
}

<?php
	$u = @$_GET["user"];
    $p = @$_GET["pass"];
    echo "这是php接收到的get的数据：".$u."----".$p;
?>

<?php
	$u = @$_POST["user"];
    $p = @$_POST["pass"];
    echo "这是php接收到的post的数据：".$u."---".$p;
?>

<?php
	$a = @$_GET["user"];
    $b = @$_GET["pass"];
    $cb = @$_GET["callback"];
    $data = "这是php通过jsonp接收到的跨域的数据，又还给你了：".$a."----".$b;
    echo $cb."('".$data."')";
?>
Start_t
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsonp跨域访问(Get方式)
blogzlh的专栏
06-22 1860
前端代码： $.ajax({         type: "GET",         url: "http://127.0.0.1:8081/webp/servlet/PersonListServlet?pname="+encodeURI(encodeURI(pname))+"&email="+email,         dataType: "jsonp",         json
使用原生js封装的ajax实例(兼容jsonp)
11-28
* @param {string}opt.type http连接的方式，包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的 * @param {object}opt....
GET请求jsonp示例
提笔写忧伤
08-26 3680
众所周知GET请求可以用jsonp的方式解决跨域问题，下面会给出一个jsonp请求的示例。 1.后台接口 @Path("getscene") @MClientHandler public ContentResult getSceneTable() { HttpServletRequest request = beat.getRequest(); HttpServletRespon
JSONP原理优缺点(只能GET不支持POST)
热门推荐
z69183787的专栏
02-14 5万+
JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都 可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。 JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请
jsonpGet，跨域如此简单
weixin_34378767的博客
08-15 107
我们经常在项目中遇到跨域问题，比如有时候在做个人项目的时候，我们需要请求第三方的一些数据，比如请求豆瓣公开api的数据，或则qq音乐开放api 的数据等等。但是毫无疑问，在我们的web应用中直接请求这些api将出现跨域问题。所以笔者心血来潮写了个插件—— jsonpGet。我们可以通过它，利用jsonp的原理，来向跨域api发送get请求。下面直入主题，不多废话。 jsonpGet 简单易用的js...
JSONP实现跨域请求的原理-post-get
JackieDYH的博客
04-27 969
说到跨域，我们首先要了解到同源和不同源 原生实现跨域请求原理 -- JSONP JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。 JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。 JSONP 由两部分组成：回调函数和数据。...
php get post 封装,php中get post请求方法封装
weixin_39854681的博客
03-20 277
function ihttp_request($url, $post = '', $extra = array(), $timeout = 60) {$urlset = parse_url($url);if(empty($urlset['path'])) {$urlset['path'] = '/';}if(!empty($urlset['query'])) {$urlset['query'] =...
借助node实战JSONP跨域实例
10-20
此外，JSONP只支持GET请求，对于POST等其他HTTP方法的跨域，需要使用CORS（跨源资源共享）或其他技术。 总结，JSONP是解决跨域问题的一种有效手段，尤其在早期AJAX时代。通过Node.js搭建服务器，我们可以轻松实现...
js跨域jsonp的使用
08-04
- 只支持GET请求：因为JSONP基于`<script>`标签，所以只能发起GET请求，无法处理POST、PUT等其他HTTP方法。 - 安全性较低：由于服务器直接返回可执行的JavaScript代码，如果服务器端返回恶意代码，可能会导致安全...
jsonp实现跨域
02-10
- 只支持GET请求：JSONP只能用于发送GET请求，无法实现POST、PUT等其他HTTP方法。 - 安全性较差：由于JSONP是通过执行服务器返回的JavaScript来传递数据，如果服务器返回恶意代码，可能会导致安全问题。 - 无错误...
JSON数据前后传输例子，post，get请求例子，jquery
08-29
JSON数据前后传输例子，post，get请求例子，jquery
JSONP跨域GET请求
用心去记录
02-25 3091
在页面开发中遇到错误提示“No 'Access-Control-Allow-Origin' header is present on the requested resource.”查了下度娘，这个问题和安全机制有关，默认不允许跨域调用，这里记录一下解决方案，防止以后再犯相同的错误。 调用web接口，get请求，发现提示：No 'Access-Control-Allow-Origin'
为什么jsonp只支持get请求?
初漾的博客
10-03 9007
JSONP的原理JSONP 是一种【请求一段 JS 脚本，把执行这段脚本的结果当做数据】的玩法。所以，你能 POST 一段通过 script 标签引入的脚本吗？（如果看过 JSONP 库的源码就知道，常见的实现代码其实就是 document.createElement(‘script’) 生成一个 script 标签，然后插 body 里而已。在这里根本没有设置请求格式的余地）。所以JSONP的实现
GET ,POST，JSON请求响应
qq_48240947的博客
03-08 691
GET ,POST，JSON请求响应
get，post、jsonp请求与测试
weixin_43467870的博客
08-03 403
文章主要内容： get请求 post请求 jsonp请求 各种请求测试 附录（jsonp简介，让属性或对象中属性以我们想要的参数名传给前台） 一.控制层 注意这几个注解：@PathVariable(“”) @requestParam(value=””,defaultValue=”0”) get请求 第一种：不需要从请求路径这获取请求参数 @Autowired private ItemC...
get请求和post请求获取jsonp数据
qq_37225699的博客
05-28 872
package com.trt.framework.ixm.api; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpEntity; import org.springframework.http.HttpHeaders; import org....
getjsonp的ajax方法,使用JSONP时,如何捕获jQuery $ .getJSON(或数据类型设置为'jsonp'的$ .ajax)错误？...
weixin_32774233的博客
08-05 322
Matt..16检测JSONP问题如果您不想下载依赖项,则可以自己检测错误状态.这很简单.您只能通过使用某种超时来检测JSONP错误.如果在某个时间内没有有效响应,则假定出错.但错误基本上可以是任何错误.这是一个检查错误的简单方法.只需使用一个success标志:var success = false;$.getJSON(url, function(json) {success = true;//...
jsonp跨域ajax跨域get方法
weixin_34162695的博客
02-02 74
原理： 就是利用<script >标签没有跨域限制的，从而达到与第三方网站通讯的目的。当需要通讯时，本站脚本创建一个<script>标签，src地址指向第三方网站的的一个网址。形如： <script src="http://www.abc.com/index.php/?param1=1&callback=fnName"></scri...
JSONP跨域原理和jQuery.getJSON用法
weixin_30794499的博客
12-06 86
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。本文主要介绍JSONP跨域原理，一起来看。 JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅...
axios jsonp解决跨域
最新发布
06-28
比如Jsonp只支持GET请求，无法使用POST等其他请求方法。同时，也存在安全性问题，因为Jsonp并不是一个真正的Ajax请求，所以无法像Ajax那样对请求进行全面的验证。如果需要更加严格的安全控制，我们需要考虑使用CORS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值