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请求与后台进行异步通讯的技术. 原理: ...
随机推荐
- 用Python匹配HTML tag的时候，<.>和<.?>有什么区别？
答:术语叫贪婪匹配( <.> )和非贪婪匹配(<.?> ) 例如: test <.*> : test <.*?> :
- MySQL 5.7：聊聊sql_mode
1.sql_mode=only_full_group_by 导致的语法错误问题 MySQLSyntaxErrorException Caused by: com.mysql.jdbc.exceptio ...
- jenkins之docker安装(jenkins/jenkins:lts)
建议使用此镜像安装,不要使用官网推荐的jenkinsci/blueocean镜像,使用它构建node程序会出现问题. 1.宿主服务器jenkins_home目录权限 为了方便安装插件,升级,迁移,因此 ...
- Spring MVC 三大组件
㈠ HandlerMapping 处理器映射(一般通过扫描包配置) 通过处理器映射,你可以将Web 请求映射到正确的处理器 Controller 上.当接收到请求时,DispactherServlet ...
- Alpha项目冲刺！ Day5-产出
各个成员今日完成的任务 林恩:任务分工,博客撰写,了解安卓环境搭建 杨长元:安卓本地数据库基本建立 李震:改了图标和背景 胡彤:完善服务端 寇永明:研究测试代码 王浩:研究测试代码 李杰:研究测试代码 ...
- vsCode中如何根据屏幕宽度自动换行
在设置中搜索editor.wordWrap 文章来源:外星人来地球 欢迎关注,有问题一起学习欢迎留言.评论
- [Java]某日期时间加上若干分钟得到新的日期时间
使用Java自带类库实现日期时间增减还是比自己人工拆分编写要牢靠,代码也简洁多了. 下面代码实现了在原有日期时间上加上一些分钟得到新的日期时间的功能,稍加改造还可以实现逆向运算. 代码: packag ...
- 流式数据处理在百度数据工厂的应用与实践 原创： 李俊卿 AI前线 今天
流式数据处理在百度数据工厂的应用与实践 原创: 李俊卿 AI前线 今天
- PHP无限级树形结构算法（递归和引用）
测试数组 $array = [ [, , 'name' => '这是主类'], [, , 'name' => '这是主类'], [, , 'name' => '父级为1子类'], [ ...
- 从零配置webpack(react+less+typescript+mobx)
本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...