Ajax,ajax封装
/**
* Created by liyinghao on 2016/8/23.
*/
/*仿jQuery中的ajax方法,简单版实现;封装ajax的工具函数*/
/*
* 1 请求方式 type get post 默认是get方式
* 2.接口地址 url 都是地址 默认的是当前地址
* 3.是否异步 async true false 默认的true 异步请求
* 4.请求数据 data {}对象形式 默认是空对象
*
*
* 5.成功回调函数(成功需要做的事情) success
* 6.失败回调函数(失败需要做的事情) error
*
* 比如 发送前要做的事情 beforeSend
* */
window.$ ={
/* ajax:function(){
}*/
};
/*定义一个ajax工具函数*/
/*options 是一个对象*/
$.ajax =function(options){
/*如果你什么都没传呢?停止执行*/
/*if(options && typeof options == 'object'){
}*/
if(!options ||typeof options !='object')return fasle;
/*如果传了*/
var type = options.type ||'get';
var url = options.url || location.pathname;
/* false true "" false */
var async = options.async ===false?false:true;
/*需要传递的数据*/
var data = options.data ||{};
/*需要data转化成ajax传递数据的格式 {name:'',age:''} ===>>> name=gc&age=10 */
var dataStr ='';
for(key in data){
dataStr += key+'='+data[key]+'&';
};
/*str.slice(0,-1); 取到倒着数几个字符*/
dataStr = dataStr && dataStr.slice(0,-1);
/*ajax编程*/
/*初始化*/
var xhr =newXMLHttpRequest();
/*设置请求行*/
/*如果是get请求 参数是不是该拼接在url后面*/
xhr.open(type,type=='get'?url+'?'+dataStr:url,async);
/*设置请求头*/
if(type =='post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
/*设置请求内容*/
xhr.send(type=='get'?null:dataStr);
/*响应*/
xhr.onreadystatechange =function(){
/*首先确定通讯完全完成*/
if(xhr.readyState ==4){
/*如果是成功的请求 status == 200 */
if(xhr.status ==200){
/*成功*/
/*知道后台想要返回什么数据类型 application/json;charset=utf-8*/
/*application/xml application/json text/html text/xml text/json text/css*/
var contentType = xhr.getResponseHeader('Content-Type');
var result =null;
if(contentType.indexOf('xml')>-1){
/*返回什么数据类型xml*/
result = xhr.responseXML;
}elseif(contentType.indexOf('json')>-1){
/*返回什么数据类型json*/
var data = xhr.responseText;
result = data && JSON.parse(data);
}else{
result = xhr.responseText;
}
/*执行成功回调函数*/
options.success && options.success(result);
}else{
/*失败*/
options.error && options.error({status:xhr.status,statusText:xhr.statusText});
}
}
}
};
/*get*/
$.get=function(options){
options.type ='get';
$.ajax(options);
}
/*post*/
$.post =function(options){
options.type ='post';
$.ajax(options);
} 来自为知笔记(Wiz)
Ajax,ajax封装的更多相关文章
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- 【前端学习笔记04】JavaScript数据通信Ajax方法封装
//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- Ajax入门(二)Ajax函数封装
如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...
- js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
- jQuery-实现简单的Ajax请求封装
封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...
- JQ中的Ajax的封装
1.认识JQ中ajax的封装 jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...
- Ajax的封装。
封装 Ajax 因为Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用GET 还是POST:到 底是使用同步还是异步等等,我们需要封装一个Ajax 函数,来方便我们调用. 封装支持接收来 ...
- Jquery Ajax简单封装(集中错误、请求loading处理)
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
- Ajax的封装,以及利用jquery的ajax获取天气预报
1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...
随机推荐
- Java 反射简介(转载)
反射机制是什么 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为java ...
- flask实现异步任务
最近在开发同步mysql数据到redis的接口,因为数据同步涉及各种增删查改,如果用同步实现,可能回造成连接超时.堵塞,所以,使用python实现异步任务. 代码实现from flask import ...
- python 简易计算器
import tkinter import tkinter.messagebox import math ''' 波波版计算器可实现的功能 1.能进行简单的加减惩处 2.能进行开根号操作 3.能进行后 ...
- MYSQL 使用存储过程批量更新表数据
功能:实现将表result_good_city_dzl中的字段lat更新为表 result_good_city_lh中的lat,条件是两个表中的id一样 即: update result_good_c ...
- __attribute__ ((packed))字节对齐
1. __attribute__ ((packed)) 的作用就是告诉编译器取消结构在编译过程中的优化对齐,按照实际占用字节数进行对齐,是GCC特有的语法.这个功能是跟操作系统没关系,跟编译器有关,g ...
- centos 7 设置开机启动脚本
vi /etc/rc.d/rc.local 在末尾追加 sh脚本 sh脚本要提前赋予执行权限 下面是测试,开机同步北京时间 [root@commonTest bin]# vi /usr/local/b ...
- [Java 教程 04] Java基础语法
在上一篇文章中我们已经运行了个简单的java程序,但是没有给大家讲解代码部分的内容与含义.学习,我们要做到知其然而知其所以然,所以本篇文章我们就来讲解java程序的基本语法,学完这篇文章你再回头看上篇 ...
- ubuntu 安装 docker
安装命令 sudo apt-get update sudo apt-get install docker.io 启动docker后台服务 sudo service docker start 1.删除镜 ...
- Supervisor 在ubuntu系统下添加自启动
最近在使用frp内网穿透,以便自己的工具能在外网访问.自己内网主机有时需要重启,为了工具能正常访问,所以使用supervisor工具进行进程管理,supervisor的自启动成个很必要的需求.下面简单 ...
- Winsock编程原理——面向连接
Winsock编程原理——面向连接 Windows Sockets使用套接字进行编程,套接字编程是面向客户端/服务器模型而设计的,因此系统中需要客户端和服务器两个不同类型的进程,根据连接类型的不同,对 ...