模仿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方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...
随机推荐
- HDU 6114 Chess【逆元+组合数】(组合数模板题)
<题目链接> 题目大意: 車是中国象棋中的一种棋子,它能攻击同一行或同一列中没有其他棋子阻隔的棋子.一天,小度在棋盘上摆起了许多車……他想知道,在一共N×M个点的矩形棋盘中摆最多个数的車使 ...
- python的pickle和shelve模块
python中用于序列化的模块总结 目录 pickle模块 shelve模块 xml模块 pickle模块 介绍 Pickle的问题和所有其他编程语言特有的序列化问题一样,就是它只能用于Python, ...
- 虚拟机克隆后导致两台机器的IP都不显示的解决方法
centos7中输入ifconfig出现ens33,没有eth0,也没有ip,不能上网,输入ifconfig后如下图 之前在网上也找了很多的方法,比如删除文件70-persistent-ipoib.r ...
- Android应用开发-数据存储和界面展现(一)
常见布局 相对布局(RelativeLayout) 相对布局下控件默认位置都是左上角(左对齐.顶部对齐父元素),控件之间可以重叠 可以相对于父元素上下左右对齐,相对于父元素水平居中.竖直居中.水平竖直 ...
- python在使用MySQLdb模块时报Can't extract file(s) to egg cacheThe following error occurred while trying to extract file(s) to the Python eggcache的错误。
这个是因为python使用MySQLdb模块与mysql数据库交互时需要一个地方作为cache放置暂存的数据,但是调用python解释器的用户(常常是服务器如apache的www用户)对于cache所 ...
- 虚拟机Ping不通主机解决
最近,装了一个虚拟机(Ubuntu-server-12.04),使用的桥接的方式.装完之后发现,主机可以ping通虚拟机,但是虚拟机可以ping通除主机之外的所有的IP(包括网关,DNS,还有其他的i ...
- CF643E. Bear and Destroying Subtrees 期望dp
题目链接 CF643E. Bear and Destroying Subtrees 题解 dp[i][j]表示以i为根的子树中,树高小于等于j的概率 转移就是dp[i][j] = 0.5 + 0.5 ...
- 专业方向系列-00-Python与有限元初探
案例1 给出4个弹簧的劲度系数,离散后,求其总的刚度矩阵. 代码: import numpy as np k1, k2, k3, k4 = 500, 250, 2000, 1000 ki = np.a ...
- BZOJ3861 : Tree
把集合看成左边的点,图中的点看成右边的点,若集合$i$不包含$j$,则连边$i->j$,得到一个二分图,等价于求这个二分图的完备匹配个数. 设$f[i][j]$表示考虑了前$i$个集合,匹配了$ ...
- 在linux上安装tomcat
(1)主要参考https://jingyan.baidu.com/article/3065b3b6e0fad2becff8a419.html(这个看后基本知道怎么安装tomcat) 其次参考:http ...