ajax与jsonp中的几个封装函数
首先是ajax里的get
在页面上添加几个标签用作测试
<body>
<input type="text" id="user">
<input type="text" id="pass">
<input type="button" id="btn">
</body>
js部分：
var ouser = document.getElementById("user")
var opass = document.getElementById("pass")
var obtn = document.getElementById("btn")
obtn.onclick = function(){
var url = "http://localhost/ajax/data/data.php";
ajaxGet(url,function(res){
console.log(res)
},{
user:ouser.value,
pass:opass.value
});
}
function ajaxGet(url,cb,data){
// 1.处理data的默认值
data = data || {};
// "url?user=admin&pass=123"
// 2.解析要发送的数据
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
// 3.处理时间戳
var d = new Date();
// 4.拼接url，实现数据的发送和时间戳的拼接
url = url + "?" + str + "__qft="+d.getTime();
// console.log(url)
// 5.ajax的正式开启，请求，接收
var xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
cb(xhr.responseText);
}
}
xhr.send();
}
因为浏览器会优先拿出缓存中的数据，这样我们就不能实现无刷新加载新数据了。所以，拼接时间戳是为了浏览器每次请求的地址都不相同，以此来欺骗浏览器。
然后是post的封装
document.onclick = function(){
var url = "http://localhost/ajax/data/data.php";
ajaxPost(url,function(res){
console.log(res)
},{
user:"admin",
pass:"123123"
})
}
function ajaxPost(url,cb,data){
data = data || {};
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
// "user=admin&pass=123&"
// post发送的数据，不在url身上
var xhr = new XMLHttpRequest();
// 1.修改ajax的执行方式为post
xhr.open("post",url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
cb(xhr.responseText)
}
}
// 2.设置发送数据的格式为表单数据
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 3.将原来在url身上拼接的数据，交给send发送
xhr.send(str);
}
GET+POST的封装如下：
document.onclick = function(){
ajax({
// type:"get", //发送方式，可选，默认get
url:"http://localhost/1908/ajax/data/data.php", //要请求的地址，必选
success:function(res){ //请求成功之后的函数，必选
console.log(res)
},
// data:{ //要发送的数据，可选，默认不发
// user:"admin",
// pass:13123121123
// },
// error:function(res){ //请求失败之后的函数，可选，默认不处理
// console.log(res)
// },
// timeout:10 //请求超时的时间，可选，默认2000
})
}
function ajax(options){
// 1.处理默认参数
var {type,url,success,error,data,timeout} = options;
type = type || "get";
data = data || {};
timeout = timeout || 2000;
// 2.解析要发送的数据
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
// 3.根据方式，决定是否处理url
if(type == "get"){
var d = new Date();
url = url + "?" + str + "__qft=" + d.getTime();
}
// 4.开启ajax
var xhr = new XMLHttpRequest();
// 注意：open中的方式
xhr.open(type,url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
// 5.执行成功之前，先判断是否传入
success && success(xhr.responseText);
// 成功之后，不应有失败
error = null;
}else if(xhr.readyState == 4 && xhr.status != 200){
// 6.执行失败之前，先判断是否传入
error && error(xhr.status);
// 失败之后，不应有成功
success = null;
// 且失败不应多次执行
error = null;
}
}
// 7.如果请求超时，执行失败
setTimeout(() => {
error && error("timeout");
// 失败之后，不应有成功
success = null;
}, timeout);
// 8.最后根据type的方式，决定send的发送内容和格式
if(type == "post"){
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(str)
}else{
xhr.send()
}
}
封装jsonp：
document.onclick = function(){
var url = "http://127.0.0.1/jsonp/data/jsonp.php"
jsonp(url,function(res){
console.log(res)
},{
user:"root"
})
}
function jsonp(url,cb,data){
data = data || {};
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
var script = document.createElement("script");
script.src = url + "?" + str;
document.body.appendChild(script);
window.fn = function(res){
console.log(res)
}
}
放在博客上主要也是方便自己以后好找。看过的人觉得有点用就好
ajax与jsonp中的几个封装函数的更多相关文章
- 原生javascript封装ajax和jsonp
在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...
- ajax和jsonp的封装
一直在用jQuery的ajax,跨域也是一直用的jQuery的jsonp,jQuery确实很方便,$.ajax({...})就可以搞定. 为了更好的理解ajax和jsonp,又重新看了下书,看了一些博 ...
- 试试自行封装AJAX和jQuery中的ajax封装的基本使用
封装的套路: 1.写一个相对比较完善的用例2.写一个空函数,没有形参,将刚刚的用例直接作为函数的函数体3.根据使用过程中的需求抽象函数 代码记录如下: <script> function ...
- 从 AJAX 到 JSONP的基础学习
目录索引: 一.AJAX的概念二.POST && GET三.原生实现AJAX简单示例 3.1 实现代码 3.2 重点说明四.框架隐藏域 4.1 基本概念 4.2 后台写入脚本 4.3 ...
- ajax和jsonp使用总结
前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理:实例化xmlhttp对 ...
- ajax 和jsonp 不是一码事
由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...
- 关于jQuery.ajax()的jsonp碰上post详解
前言 以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑. 下面来一起看看详细的介绍: 关于跨域请求与 ...
- 原生 JavaScript 实现 AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- ajax和jsonp
ajax和jsonp 前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理: ...
随机推荐
- Mybatis 向statement传入多个参数
1.一般情况下可以将多个参数放入Map,让Map作为statement的参数 public void update(@Param("fieldMap") Map<String ...
- 使用jsonpath解析多层嵌套的json响应信息
Python自带的json库可以把请求转为字典格式, 但在多层嵌套的字典中取值往往要进行多次循环遍历才能取到相应的数据, 如: res_dict = { "code": 0, &q ...
- (转)kvm初识
一 虚拟化介绍 1 常见虚拟化软件VMware系列VMware workstation.VMware vsphere(VMware esxi).VMware Fusion(Mac) Xen 开源 半虚 ...
- fdisk交互
fdisk交互 命令 说明 指令 a 设置可引导标记 toggle a bootable flag b 编辑bsd磁盘标签 edit bsd disklabel c 设置DOS操作系统兼容标记 tog ...
- c++ homework 1
先交作业(急促) 电梯作业 elevator (不知道为啥,我BIN文件夹建立不了.) PTA练习 如图 如图
- Python_BDD概念
BDD概念 全称 Behavior-driven development 中文 行为驱动开发 概念 是敏捷软件开发技术的一种,鼓励各方人员在一个软件项目里交流合作,包括开发人员.测试人员和非技术人员或 ...
- mac电脑如何快速显示桌面及切换应用
使用mac电脑时,我们习惯打开很多应用,文档等等.如果打开应用非常多,需要操作桌面,却不知如何快速返回桌面和切换应用时,操作就非常不便了,下面简单介绍mac电脑系统如何快速显示桌面及切换应用? 工具/ ...
- .prop() vs .attr()
.prop() vs .attr() Update 1 November 2012 My original answer applies specifically to jQuery 1.6. My ...
- JavaScript WebSocket 使用总结
翻看之前写的 Highcharts使用总结 和 前后台交互之传参方式,想对 WebSocket 单独写一个使用总结. 一.认识 WebSocket . WebSocket 是 H5 新出的一种协议, ...
- 关于Android studio下V4包 KeyEventCompat 类找不到问题
V4包 KeyEventCompat 类找不到问题 本文链接:https://blog.csdn.net/shanshan_1117/article/details/84344557 今天我把su ...