模仿jQuery的ajax的封装
/*
* 我们使用了ajax 的xmlHttpRequest 跟服务器进行交互。
*
* 交互了有四个基本步骤
* 1:创建对象
* 2:建立连接
* 3:发送请求
* 4:接收数据
*
* 这些操作特别繁琐,一个页面有很多地方都发送ajax 请求。
* 这里面我们就使用了一个jQuery 的框架,它提供了一些方法
* 让我们来发送ajax 请求。 我模拟jQuery 封装一个方法出来
* 我们以后用我们自己的方法来发送ajax 请求。
/*
* $.ajax({
* url:"",
* type:""
* data:"",
* success:function(){
* }
* });
* */
var $={
/*
* 进来一个对象,出来一个字符串。
* username=zhangsan&age=11
*
* */
params:function(obj){
var data=''; for(var key in obj){ data+=key+"="+obj[key]+"&"
}
return data.substring(0,data.length-1);
},
/*
* 可以通过此方法来发送一个http 请求。
* */
ajax:function(obj){
//实现这样的功能,可以用来发送请求。 //接收用户传递的数据.
var type=obj.type;
var url=obj.url;
var data=obj.data;
var success=obj.success;
var complete=obj.complete;
var error=obj.error; //我必须创建一个XMLHttpRequest 对象。
var xhr=new XMLHttpRequest();
if(type=='get'){
url=obj.url+"?"+this.params(data);
data=null;
} xhr.open(type,url);
/*
* post要给服务器端一个请求头
* */
if(type=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
data=this.params(data);
}
//我在这里要进行一个判断,如果用户的请求时get
//发送服务器的参数的数据就应该在请求的地址的后面
//username=''&age=''
//如果我的请求是post 请求,
//假设get ,send(null);
//如果是post ,send("username=zhangsan&age=11")
xhr.send(data);
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var data=xhr.responseText;
success(data);
complete();
}
else if(xhr.readyState==4 && xhr.status!=200){ error();
//这个属于请求完成了之后调用
complete();
}
}
} };
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="ajax.js"></script>
<script>
$.ajax({
url:"ajax.php",
data:{
"username":"zhangsan"
},
type:"post",
success:function(data){
alert(data);
},
//这个肯定是success 完成之后调用
complete:function(){
alert("响应完成调用");
},
error:function(){
alert("出错了调用");
}
}); </script>
</head>
<body>
</body>
</html>
//jsonp demo。
$.ajax({
type: "get",
async: false,
url: "http://192.168.1.195:8080/yg_mobile/mobile/ygProduct/detail.do?id=1",
dataType: "jsonp",
jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "fn", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function (json) {
alert(json.id);
},
error: function () {
alert('fail');
}
});
/*生成任意长度的随机字符串。*/
function randomString(len) {
len = len || 32;
var $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
};
模仿jQuery的ajax的封装的更多相关文章
- Ajax学习(二):模仿jQuery的Ajax封装工具
通过上一节的学习,基本了解Ajax的使用, 但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用. 模仿jQuery的Ajax. 如下是jQuer ...
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- jQuery版AJAX简易封装
开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...
- js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装
function ajax(obj){ // 默认参数 var defaults = { type : 'get', data : {}, url : '#', dataType : 'text', ...
- 基于jquery的ajax方法封装
在实际的项目里,ajax的应用频率很高,所以尽管jquery或者其他的一些类似的js库做了非常不错的封装,仍然有进一步封装简化的空间和必要 举一个例子,很久很久以前,我的ajax是这么写的: $.aj ...
- jquery对于ajax的封装
第一层封装 $.ajax({ 属性名:值,属性名:值}) /* url: 请求服务器地址 data:请求参数 dataType:服务器返回数据类型 error 请求出错执行的功能 success 请求 ...
- 为jQuery的$.ajax设置超时时间
jQuery的ajax模块封装了非常强大的功能,有时候我们在发送一个ajax请求的时候希望能有一个超时的时间,想让程序在一段时间请求不到数据时做出一些反馈.幸运的是jQuery为我们提供了这样的参数: ...
- 【JavaWeb】jQuery对Ajax的支持
jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法 语法:$.ajax(options) 常用设置项 说明 url 发送请求地址 type 请求类型get|pos ...
- 模仿JQuery封装ajax功能
需求分析 因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...
随机推荐
- Python 枚举【一】
1. 枚举的定义 首先,定义枚举要导入enum模块. 枚举定义用class关键字,继承Enum类. 用于定义枚举的class和定义类的class是有区别[下一篇博文继续分享]. 示例代码: from ...
- RocketMQ msgId生成算法
当我们用RocketMQ发送信息的时候通常都会返回如下信息: SendResult [sendStatus=SEND_OK, msgId=0A42333A0DC818B4AAC246C290FD000 ...
- css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)
.katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...
- Java基础--对象的克隆
文章转载自https://www.cnblogs.com/Qian123/p/5710533.html 阅读目录 为什么要克隆? 如何实现克隆 浅克隆和深克隆 解决多层克隆问题 总结 假如说你想复制一 ...
- HTTP那些事儿
一.HTTP和HTTPSHTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS.HTTP是超文本传输协议,信息是明文传输 ...
- 查找最大或最小的 N 个元素
使用内置的heapd模块 In [1]: import heapq In [2]: nums = [1,8, 2, 23, 7, -4, 18, 23, 42, 37, 2] In [3]: prin ...
- grpc 使用流程、使用技巧
1.通过maven插件编译出java stub类. 2.对于批量调用的场景,我们可以使用FutureStub,对于普通的业务类型RPC,我们应该使用BlockingStub. 3.创建批量生成多个语言 ...
- 潭州课堂25班:Ph201805201 爬虫高级 第一课 pyspider框架 (课堂笔记)
利用wheel安装 S1: pip install wheelS2: 进入www.lfd.uci.edu/~gohlke/pythonlibs/,Ctrl + F查找pycurl 这个包名是pycur ...
- Bracket 使用指南
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由Adobe 创建和维护,根据MIT许可证发布,支持 Windo ...
- SharePoint 2019 图文安装教程
前言 SharePoint 2019刚刚发布,很多群友在寻找安装教程,霖雨正好也下载了进行体验,就把完整的安装过程做成图文教程,分享给大家了,有需要的人可以有个参考. 文章从创建虚拟机开始,可能有点啰 ...