/*模拟jQuery的写法 (简单写法)*/
var $={};
/*ajax*/
$.ajax = function (options) {
/*
* 请求
* 1.请求接口 type get post 默认的是get 决定是否设置请求头
* 2.接口地址 url 不确定 字符串 如果用户没有传 默认的接口地址为当前路径
* 3.是否是异步 async 默认的就是异步 true;false 是同步请求
* 4.提交数据 data 默认的是对象 {name:'XXX',age:'19'} 默认是{}
*
* 响应
* 1.成功回调函数 success 代表的是一个函数 用来处理成功之后的业务逻辑的函数
* 1.1 字符串 xml json格式的字符串 数据转换
* 2.失败回调函数 error 代表的是一个函数 用来处理失败之后的业务逻辑的函数
* 2.1 返回一些错误信息
* */ /*处理默认参数*/
if(!options || typeof options != 'object') return false;
/*如果没有传 使用默认的get方式提交*/
var type = options.type || 'get';
/*如果没有传 使用默认的当前路径*/
var url = options.url || location.pathname;
/*强制 是false的时候就是同步 否则都是异步*/
var async = options.async === false?false:true;
/*如果没有就是空对象*/
var data = options.data || {};
/*对象是无法进行传输 {name:'',age:''} 拼接字符串 name=xzz&age=18*/
var dataStr = '';
for(var key in data){
dataStr+=key+'='+data[key]+'$';
}
dataStr = dataStr && dataStr.slice(0,-1); /*ajax封装编程*/
/*初始化*/
var xhr = new XMLHttpRequest();
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){
if(xhr.status == 200){
/*请求成功*/
/*字符串 xml josn格式的字符串 数据转换*/
/*获取响应类型*/
var contentType = xhr.getResponseHeader("Content-Type");
var result = null; if(contentType.indexOf('xml')>-1){
/*xml*/
result = xhr.responseXML;
}else if(contentType.indexOf('json')>-1){
/*json*/
result = JSON.parse(xhr.responseText);
}else{
/*string*/
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*/
$.get = function (options) {
options.type = 'post';
$.ajax(options);
}

注:简单写法,仅供参考。

模拟jQuery简单封装ajax的更多相关文章

  1. jquery简单封装

    对Raphael画图标的一个jquery简单封装 公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封 ...

  2. jQuery简单的Ajax调用示例

    jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...

  3. 对Raphael画图标的一个jquery简单封装

    公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...

  4. 用javascript简单封装AJAX

    1.创建一个AJAX引擎对象 var CreateAjax = function () { var xhr = null; if (window.XMLHttpRequest) { //非IE游览器 ...

  5. jQuery简单的Ajax调用

    index.php 的代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"& ...

  6. 使用jquery再次封装ajax

    $.fn.ajaxSend = function (type, url, postdata, onSuccess) { $.ajax({ async: false, url: url, type: t ...

  7. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  8. ajx技术解析以及模拟jQuery封装

    1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  9. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

随机推荐

  1. Vue.js简单实践

    直接上代码,一个简单的新闻列表页面(.cshtml): @section CssSection{ <style> [v-cloak] { display: none; } </sty ...

  2. React学习——ListView组件

    (草稿) 先把代码放上来,再补充说明 <!DOCTYPE html> <html> <head> <title>React ListView</t ...

  3. ios 使用autolayout 后button 的frame 无法设置问题!

    问题见这里,只能通过bounds和center进行设置!http://www.cocoachina.com/bbs/read.php?tid-236862.html 待研究!!!!~~~

  4. Mac 下office 2013制作组合表

    1.选择所有数据,插入图表→柱状图.2.选中柱状图中得某一数据,如栏目量.这个在柱状图上单击一次橙色柱子就能全部选中.3.更改图表类型,改为饼状图,再单击饼状图改为折线图.

  5. ABP官方文档翻译 7.3 Quartz集成

    Quartz集成 介绍 安装 创建Jobs 计划安排Jobs 更多 介绍 Quartz是一个全功能的.开源的job计划安排系统,可以用在小的apps也可以用于大型的企业系统.Abp.Quartz包简化 ...

  6. BJOI2018 简要题解

    二进制 序列上线段树维护DDP好题. 题解可以看这篇 代码: #include<bits/stdc++.h> #define ri register int using namespace ...

  7. cocos2d JS-(JavaScript) 基础语法间的函数方法相互调用

    1.函数嵌套函数 function calcuate(opr, a, b) { // 定义函数,opr - -> 符号,a,b - -> 数值 //定义 + 函数 function add ...

  8. hdu 1159 Common Subsequence (最长公共子序列 +代码)

    Problem Description A subsequence of a given sequence is the given sequence with some elements (poss ...

  9. 「日常温习」Hungary算法解决二分图相关问题

    前言 二分图的重点在于建模.以下的题目大家可以清晰的看出来这一点.代码相似度很高,但是思路基本上是各不相同. 题目 HDU 1179 Ollivanders: Makers of Fine Wands ...

  10. Building Maintainable Software-java篇之Separate Concerns in Modules

    Building Maintainable Software-java篇之Separate Concerns in Modules   In a system that is both complex ...