模仿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方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...
随机推荐
- 高级Bash脚本编程指南《Advanced Bash-Scripting Guide》 in Chinese
<Advanced Bash-Scripting Guide> in Chinese <高级Bash脚本编程指南>Revision 10中文版 在线阅读链接:http://ww ...
- pyinstaller打包pyqt文件（转）
pyinstaller打包pyqt文件 https://www.cnblogs.com/dcb3688/p/4211390.html 打包pyqt文件 如何将pyqt生成exe的二进制文件呢,p ...
- hdu 1686 Oulipo 【KMP】(计算模式串匹配的次数——与已匹配的字串可以有交集)
题目链接:https://vjudge.net/contest/220679#problem/B 题目大意: 输入一个T,表示有T组测试数据: 每组测试数据包括一个字符串W,T,T长度大于W小于100 ...
- Linux学习之文件系统常用命令(七)
Linux文件系统常用命令 目录 df命令 du命令 fsck命令 dump2fs命令 df命令 df命令 统计文件系统的占有情况,分区用了多少空间,还剩多少空间 df [选项] [挂载点] 选项: ...
- iOS 11开发教程（二十一）iOS11应用视图美化按钮之实现按钮的响应(1)
iOS 11开发教程(二十一)iOS11应用视图美化按钮之实现按钮的响应(1) 按钮主要是实现用户交互的,即实现响应.按钮实现响应的方式可以根据添加按钮的不同分为两种:一种是编辑界面添加按钮实现的响应 ...
- 设置Sublime Text 3的光标样式
升级了Sublime Text 3,结果光标变成了这个样子,非常不习惯: 查了文档http://www.sublimetext.com/3 ,Build 3059中得描述: Added setting ...
- zabbix 创建监控项
项目是在Zabbix收集数据的基础 ,所有项目都是围绕主机,找到创建的主机 点击 Configuration > hosts > ltems 点击 Create item Name:输入C ...
- JUnit accuracy/failure/stress test区别
accuracy test(结果准确性测试) 例如,Assert.assertEquals(expected, actual). 如果结果不符合期望则产生failure.说明程序逻辑有问题. fail ...
- webstorm安装教程
之前有些一些破解的,但是独独忘记了安装的这个教程,现在补上:见下: 先来一官方的解释:WebStorm是JetBrains 推出的一款强大的HTML5编辑工具,拥有丰富的代码快速编辑,可以智能的补全代 ...
- jsp get参数乱码问题
摘自:username2.iteye.com/blog/1597917个人理解中文传送的时后需要转码: js代码: 要进行两次转码才不会出现乱码(默认为UTF-) encodeURI(encodeUR ...