ajax封装
/**
* ITCAST WEB
* Created by zhousg on 2016/5/24.
*/
/*
* 1. 请求的类型 type get post
* 2. 请求地址 url
* 3. 是异步的还是同步的 async false true
* 4. 传输的数据 data json对象
*
* 5.响应成功处理函数 success function
* 6.响应失败的处理函数 error function
*
* 这些都是动态参数 参数对象 options
* */ /*封装一个函数*/
window.$ = {};
/*申明一个ajax的方法*/
$.ajax = function(options){ if(!options || typeof options != 'object'){
return false;
} /*请求的类型*/
var type = options.type || 'get';/*默认get*/
/*请求地址 */
var url = options.url || location.pathname;/*当前的地址*/
/*是异步的还是同步的 */
var async = (options.async === false)?false:true;/*默认异步*/
/*请求内容的格式 */
var contentType = options.contentType || "text/html"; /*传输的数据 */
var data = options.data || {};/*{name:'',age:''}*/
/*在提交的时候需要转成 name=xjj 这种格式*/ var dataStr = ''/*数据字符串*/ for(var key in data){
dataStr += key+'='+data[key]+'&';
} dataStr = dataStr && dataStr.slice(0,-1); /*ajax 编程*/
var xhr = new XMLHttpRequest(); /*请求行*/
/*(type=='get'?url+'?'+dataStr: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 && xhr.status == 200){
/*success*/
var data = '';
var contentType = xhr.getResponseHeader('Content-Type');
/*如果我们服务器返回的是xml*/
if(contentType.indexOf('xml') > -1){
data = xhr.responseXML;
}
/*如果我们的服务器返回的是json字符串*/
else if(contentType.indexOf('json') > -1){
/*转化json对象*/
data = JSON.parse(xhr.responseText);
}
/*否则的话他就是字符串*/
else{
data = xhr.responseText;
} /*回调 成功处理函数*/ options.success && options.success(data);
}
/*计时请求xhr.status不成功 他也需要的响应完成才认作是一个错误的请求*/
else if(xhr.readyState == 4){
/*error*/
options.error && options.error('you request fail !'); } }
}
$.post = function(options){
options.type = 'post';
$.ajax(options);
}
$.get = function(options){
options.type = 'get';
$.ajax(options);
}
ajax封装的更多相关文章
- Javascript:来一个AJAX封装函数
前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 ...
- 妹味6:ajax与ajax封装
(功能)ajax能且仅能 从服务器读取文件 (环境)需要服务器环境才能测试,可以用工具建立本地服务器环境 (缓存)解决缓存问题:url加时间戳让每次请求地址唯一,如 url='abc.txt?t='+ ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- Ajax封装函数笔记
Ajax封装函数: function ajax(method, url, data, success) { //打开浏览器 //1.创建一个ajax对象 var xhr = null; try { x ...
- 原生ajax封装,包含post、method方式
原生ajax封装,包含post.method方式 function ajax(method, url, data, success) { var xhr = null; try { xhr = new ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 我的前端工具集(六)Ajax封装token
我的前端工具集(六)Ajax封装token liuyuhang原创,未经允许禁止转载 在单点登陆中,或登陆验证后,不应该每次都验证用户名和密码, 也不应该将用户名密码存入cookie中(虽然很多都 ...
- AJAX - 封装的传参改为传入对象 XML JSON 数据格式
Ajax封装函数,上次是直接传参,这次在原来的基础上改进,模仿jQuery 直接传入对象,把之前的参数都变为这个对象的属性. 这样可以随意调换传入数据的次序. 其他优点? 需要再复习一下. Ajax处 ...
- 简单的基于promise的ajax封装
基于promise的ajax封装 //调用方式: /* ajaxPrmomise({ url:, method:, headers:{} }).then(res=>{}) */ ;(functi ...
- ajax 封装(集中 认证、错误、请求loading处理)
一.为什么要对 ajax 进行封装: (在使用antd pro 开发项目时,里面默认是把请求进行了封装的,放在 utils/request.js 中.使用起来非常方便 https://pro ...
随机推荐
- Qt开始学习的一些问题
1.需要将qmake.moc和qvfb的路径加入到系统的环境变量: qmake.moc:export PATH=$PATH:/usr/local/Trolltech/QtEmbedded-4.6.1- ...
- 在spring+hibernaet+mysql事务处理中遇到的一些坑
spring的事务处理本来就是依赖于底层的实现,比如hibernate及数据库本身. 所以,当使用mysql数据库时,首先要确定的是,所操作的对象表是innodb格式的. 1. read-only方法 ...
- Linux Tomcat7.0安装配置实践总结
一,安装JDk 先下载jdk,链接http://www.oracle.com/technetwork/java/javase/downloads/index.html,选择相对应平台的JDK.由于笔者 ...
- smaba服务的搭建
一. samba配置1. 什么是sambaSamba服务类似于windows上的共享功能,可以实现在Linux上共享文件,windows上访问,当然在Linux上也可以访问到.是一种在局域网上共享文件 ...
- Gridview 多重表头 (二)
多重表头之排序 这是个有点忧桑的故事...Cynthia告诉我,研究一个问题,我们不可能有超过一天的时间... 结果好好几天过去鸟~~还没有完成... 由于不再使用Gridview自带的表头行,于是无 ...
- Reverse Words in a String (JAVA)
Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...
- ThinkPHP框架搭建及常见问题(Apache或MySQL无法启动)----简单的初体验
有一定基础的人勿进,这篇讲的只是零基础入门,都是我刚接触以及我所了解到的人刚开始有疑惑的地方,具体框架介绍会在后面的博客中介绍 这一篇只是为了一个简单的页面显示而介绍的方法,不涉及代码,开发环境,所以 ...
- 常用的SQL数据库语句总结
1as 的用处 as可以对表和列取别名 在开发过程中经常遇到开始给某一个的字段去field1的名称,但后来有感觉field1字段指定不确切,于是又把此字段改成了field2,由于开始认 为field1 ...
- 纪念SlingShot 矩阵
第一次独立做矩阵,只WA了一次,好高兴~~ 题意:已知 F(n)=3 * F(n-1)+2 * F(n-2)+7 * F(n-3),n>=3,其中F(0)=1,F(1)=3,F(2)=5,对于给 ...
- python虚拟环境Virtualenvwrapper无法升降级虚拟环境软件解决方法
virtualenv用于创建独立的Python环境,多个Python相互独立,互不影响,它能够在没有权限的情况下安装新套件,不同应用可以使用不同的套件版本,套件升级不影响其他应用. Virtaulen ...