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请求与后台进行异步通讯的技术. 原理: ...
随机推荐
- 1.OC类
一.基础语法 1.在OC中,一般用2个文件来描述一个类: 1> .h:类的声明文件,用于声明成员变量.方法.类的声明使用关键字@interface和@end. 注意:.h中的方法只是做一个声明, ...
- mac 登陆phpmyadmin 提示 mysqli_real_connect(): (HY000/2002): No such file or directory
我们将下载的phpmyadmin 放在apache目录中,进入phpmyadmin目录, 首先将这个目录中的配置文件改名 sudo mv config.sample.inc.php config.in ...
- CF1174C Ehab and a Special Coloring Problem(数论)
做法 与\(x\)互质的数填不同的数,把有向关系表示出来,发现边数是不能承受的 反过来想,成倍数关系填相同的数,把这些数想象成一条链,而这条链开始的数一定是质数,\(\sum\limits_{prim ...
- 由Java正则表达式的灾难性回溯引发的高CPU异常：java.util.regex.Pattern$Loop.match
问题与分析 某天领导report了一个问题:线上的CPU自从上一个版本迭代后就一直处于居高不下的状况,领导看着这段时间的曲线图判断是有两条线程在不停的死循环. 接到任务后去查看了AWS的CloudWa ...
- linux process cycle
As already discussed, a new process is created through fork() and if a new executable is to be run t ...
- js 检测链接是否有效（包含跨域）
const checkUrl = function (url) { const promise = new Promise(function (resolve, reject) { if (!url) ...
- httpPostedFile实现WEBAPI文件上传
public void PostUpload() { var httpPostedFile = HttpContext.Current.Request.Files; foreach(string p ...
- 【Oracle/Java】以Insert ALL方式向表中插入百万条记录，耗时9分17秒
由于按一千条一插程序长期无反应,之后改为百条一插方式,运行完发现插入百万记录需要9m17s,虽然比MySQL效率差,但比单条插入已经好不少了. 对Oracle的批量插入语法不明的请参考:https:/ ...
- Angular中的routerLink 跳转页面和默认路由
1.创建新项目 2.创建home news newscontent 组件 3.找到app-rounting-moudle.ts配置路由 1)引入组件 import { HomeComponent } ...
- PorterDuffXfermode之PorterDuff.Mode.SRC_IN
package com.loaderman.customviewdemo.view; import android.content.Context; import android.graphics.B ...