自己封装的ajax
/**
* ITCAST WEB
* Created by lsy on 2016/5/24.
*/
/*
* 1. 请求的类型 type get post
* 2. 请求地址 url
* 3. 是异步的还是同步的 async false true
* 4. 请求内容的格式 contentType
* 5. 传输的数据 data json对象
*
* 6.响应成功处理函数 success function
* 7.响应失败的处理函数 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的更多相关文章
- 先定一个小目标,自己封装个ajax
你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...
- 封装的ajax请求
在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的 ...
- 自己封装个ajax
你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...
- 封装一个Ajax工具函数
/*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type string 请求的方式 默认是get * 2. url ...
- 原生封装的ajax
原生封装的ajax的代码如下: //将数据转换成 a=1&b=2格式; function json2url(json){ var arr = []; //加随机数防止缓存; json.t = ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- 自己封装的AJAX (带JSON)
最简单的封装的AJAX: function myajax(url,onsuccess,fail){ //确定是否支持xhr var xhr = new XMLHttpRequest ? new XML ...
- mui封装的ajax请求
由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XM ...
- jQuery 封装的ajax
jquery封装的ajax 具体操作: $.get(url [,data] [,fn回调函数] [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...
- Jquery封装的ajax的使用过程发生的问题
Jquery封装的ajax的使用过程发生的问题 今天在做项目的时候使用到了ajax来完成项目前后端数据交互,在之后发现在前端没有数据显示,而后端数据确实存在,在多次检查代码之后,发现代码并不存在问题, ...
随机推荐
- python基础-动态加载lazy_import(利用__import__)
看了一天动态加载,普遍有这么几种方法,总结一下,由简入深,本文仅对查到的栗子们做个引用……省去你们大把查资料的时间= = 主要思想:把模块(文件)名.类名.方法名当成了变量 然后利用__import_ ...
- vue--拖动排序
https://blog.csdn.net/jx950915/article/details/79803485?from=singlemessage
- import tkinter与from tkinter import *的区别
from tkinter import * class DirList(object): def __init__(self,initdir=None): self.top= Tk() ##可以不加t ...
- codeforces 14A - Letter & codeforces 859B - Lazy Security Guard - [周赛水题]
就像title说的,是昨天(2017/9/17)周赛的两道水题…… 题目链接:http://codeforces.com/problemset/problem/14/A time limit per ...
- 【紫书】【重要】Not so Mobile UVA - 839 递归得漂亮
题意:判断某个天平是否平衡,输入以递归方式给出. 题解:递归着输入,顺便将当前质量作为 &参数 维护一下,顺便再把是否平衡作为返回值传回去. 坑:最后一行不能多回车 附:天秀代码 #defin ...
- 2018/03/10 每日一学PHP 之 修饰符 public/private/protected
对于面向对象 修饰符的使用是我们最常用,也是很容易忽略的小细节. 对于编程来说,把握好每一个小细节,就能构造出漂亮,优雅的程序. public 使用最多的修饰符,公共方法,允许所有访问,就像一个公交车 ...
- 非常可乐---hdu 1495(BFS)
http://acm.hdu.edu.cn/showproblem.php?pid=1495 题意: 有3个杯子a b c:a=b+c:然后刚开始时只有a是满的,其它为空的,然后a b c三个之间互相 ...
- 洛谷P3966 单词 [TJOI2013] AC自动机
正解:AC自动机 解题报告: 传送门! 先来提供一个40pts错解QAQ 首先看到这题就会想到AC自动机板子题2鸭!然后就照着那题的套路打一下,随便改一点儿,简单来说就是每次经过一个节点都要++,然后 ...
- ubuntu 下关闭apache服务自动启动
最近在自己的ubuntu安装了apache服务器,每次开机的时候通过: ps -A 命令发现apache服务总是自动启动,如下: 本来自己的电脑内存就小,现在也不用这个服务,所以想让apa ...
- [vue]webpack&vue组件工程化实践
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...