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 xml中是sql语句报错： Error creating document instance. Cause: org.xml.sax.SAXParseException: The
最近项目折腾了老半天,找了资料才知道是这么回事... 因为语句中有一个小于号“<”,在XML中,会被当成一个页面元素来解析,不会处理为mysql的SQL语句的组成部分,修改如下: 1.在xml的 ...
- docker.socks vul
在容器上获取 RCE 1)列出所有容器 第一步是获取主机上所有容器的列表.为此,你需要执行以下http请求: GET /containers/json HTTP/1.1 Host: <docke ...
- python pip settools 安装基于源码 gdal安装需要c++相关库
- [Oracle] Oracle中和MySql的limit对应的方法
MySql很贴心,有个限制范围查询的limit函数,用起来也很方便,SQL不用嵌套.如下: select id,name,age,cdate as ctime from emp order by id ...
- BitmapFactory: 通过Bitmap的getWidth和getHeight方法获取到的尺寸与实际尺寸不符的问题
问题 今天无意中发现了一个问题,通过Bitmap的getWidth和getHeight方法获取到的图片尺寸与实际的尺寸(1920*1080)不一致,后来更进一步发现,把这张图片分别放在raw.draw ...
- ES6内建对象的继承
在ES6之前, JS是无法通过继承的方式创建属于自己的特殊数组的, 也就是说可以使用原型链来继承数组的一些方法, 但是某些返回一个数组的方法返回的值还是一个Array的实例, 例如slice, len ...
- 123456---com.twoapp.huanYingMotro--- 幻影摩托
123456---com.twoapp.huanYingMotro--- 幻影摩托
- 利用python批量修改word文件名的方法示例
利用python批量修改word文件名的方法示例 最近不小心把硬盘给格式化了,由于当时的文件没有备份,所以一下所有的文件都没有了,于是只能采取补救措施,用文件恢复软件恢复了一部分的数据出来,但是恢复完 ...
- python 递归和匿名函数
1.理解函数执行流程 def foo1(b, b1=3): print("foo1 called", b, b1) def foo2(c): foo3(c) print(" ...
- Swift学习 （一）
以后会自己总结学习Swift的笔记与深化.希望能够帮助已经有Objective-C经验的开发者更快地学习Swift.我们一起学习,同时也品味到Swift的精妙之处. 结论放在开头:我认为Swift比O ...