模仿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方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...
随机推荐
- P1593 因子和
P1593 因子和新算法:#define ni 逆元先质因数分解,(1+p1^1+p1^2...p1^x)*(1+p2^1+p2^2...p2^x)然后套等比数列公式就可以了. #include< ...
- 玩转SpringCloud（F版本） 三．断路器（Hystrix）RestTemplate+Ribbon和Feign两种方式
此文章基于: 玩转SpringCloud 一．服务的注册与发现(Eureka) 玩转SpringCloud 二．服务消费者(1)ribbon+restTemplate 转SpringCloud 二．服 ...
- 安装JDK提示: 该项不适于在指定状态下使用的错误
解决办法有两个,两个办法不相关,运用其中一个就能解决问题. 解决方法:http://www.360doc.com/content/15/0407/14/19179788_461278604.shtml
- thumbs.db是什么文件
thumbs.db是什么文件 这是图片缓存文件 Thumbs.db文件是一个数据库,里面保存了这个目录下所有图像文件的缩略图(格式为jpeg) thumbs.db删除不掉 反射获取某个类的 所有字段 ...
- CODEVS.3990.中国余数定理2(CRT)
题目链接 颓了一天 写个模板吧.. Chinese_Remainder_Theorem: MashiroSky.远航之曲 #include <cstdio> #include <cc ...
- Eclipse中修改包名，提交SVN时报 is out of date，怎么办？
问题:Eclipse中修改包名,提交SVN时报 is out of date,怎么办?描述: Hi,大家好! 我的问题如题,在不考虑用TortoiseSVN客户端直接删除目录这个方法的情况下,有什么方 ...
- BZOJ4122 : [Baltic2015]File paths
对于在$o$点的某个询问,有两种情况: 情况1:走到任意一个点$x$然后超链接跳到$o$的某个祖先$y$再走到$o$. 枚举所有$y$看看是否存在$x$即可. 时间复杂度$O(nm)$. 情况2:走到 ...
- ajax请求的完整步骤
AJAX = 异步JavaScript和XML,可以使网页实现异步更新,达到局部更新的目的. 一.AJAX请求步骤如下: 1.创建XMLHttpRequest对象 var xhr; if(window ...
- UnityEditor研究学习之EditorWindow
在unity使用过程中,其实我们都是在各个不同功能的Window下工作. 比如在Scene窗口中操作物体,在Inspector中操作物体属性,在Game视窗中观察游戏状态. 所以窗口是Unity的灵魂 ...
- 奇怪吸引子---GenesioTesi
奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...