Ajax get/post 方法封装

 1 function get(url, options, callback){
 2     var xml = new XMLHttpRequest();
 3     xml.onreadystatechange(){
 4         if(xml.readyState === 4){
 5             if(xml.status >= 200 && xml.status < 300 || xml.status === 304){
 6                 callback(xml.responseText);
 7             }else{
 8                 throw new Error("请求未成功:" + xml.status )
 9             }
10         }
11     }
12     var seriUrl = url + ‘?‘ + serialize(options);
13     xml.open(‘get‘, seriUrl, true);
14     xml.send(null);
15 }
16 function serialize(data){
17     if(!data) return ‘‘;
18     var pairs = [], value;
19     for(name in data){
20         if(!data.hasOwnProperty(name)) continue;
21         if(typeof data[name] === ‘function‘) continue;
22         value = data[name].toString();
23         name = encodeURIComponent(name);
24         value = encodeURIComponent(value);
25         pairs.push(name + ‘=‘ + value);
26     }
27     return pairs.join(‘&‘);
28 }

上面封装了一个接受三个参数的get方法,分别为url, 以及一个options的键值对的配置对象,以及一个以Ajax请求成功返回的responseText为参数的回调函数。

第二个函数声明定义了一个序列化对象,将配置对象转化为一个可以传递的字符串。

封装一个接受一个对象作为发送数据的自定义post函数的话也差不多,都要用到serialize这个函数,无非是将serialize转化后的字符串通过send方法发送。

encodeURIComponent()是对统一资源标识符(URI)的组成部分进行编码的方法。它使用一到四个转义字符串来替换UTF-8编码字符串中的每个字符(只有由两个Unicode代理区字符组成的字符才用四个转义字符串编码)。

关于 encodeURIComponent()

参考 MDN:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

时间: 2024-08-08 13:52:55

Ajax get/post 方法封装的相关文章

通用ajax请求方法封装,兼容主流浏览器

ajax简介 没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面.如果没有AJAX,在youku看视频的过程中如果点击了"顶.踩".评论.评论翻页,页面就会刷新,视频就会被打断.开发一个看效果:用<video src="diaosi.mp4" autoplay controls></video>播放视频(只有支持html5的浏览器能播放),然后放一个"赞"按钮的功能(赞的数量存到数据库),看

jQuery教程 - Ajax之load()方法

jQuery教程 - Ajax之load()方法 标签: jqueryajaxxmlhttprequesthtmlcallback 2009-10-05 14:54 3700人阅读 评论(3) 收藏 举报  分类: jQuery(7)  版权声明:本文为博主原创文章,未经博主允许不得转载. jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是laod().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON(

javascript中最最最常用的方法封装

javascript 常用方法的封装,小编持续升级中... 方法封装(js原生): 一.Object 类型 MHQ.ajaxUtils 定义一个ajax工具类 ajax 定义一个ajax工具函数 get 方法 post 方法 MHQ.elementUtils DOM元素工具类 replaceClassName 替换字符串,设置className属性 getInnerText 获取DOM元素内部文本的兼容方法 setInnerText 设置DOM元素内部文本的兼容方法 getNextElement

js 实现对ajax请求面向对象的封装

AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在js中使用ajax请求一般包含三个步骤: 1.创建XMLHttp对象 2.发送请求:包括打开链接.发送请求 3.处理响应 在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写 var xmlHttp = xmlHttpCreate();//创建对象 xmlHttp.onreadysta

Ajax.BeginForm返回方法OnSuccess

在MVC3里面--程序集 System.Web.Mvc.dll, v4.0.30319有这么一个Ajax.BeginForm异步登录验证的类型,我们在下面给出一个例子:在登录页面Logion.cshtml.使用@using (Ajax.BeginForm("Login", "Home", new AjaxOptions { HttpMethod = "Post", OnSuccess = "tips", OnBegin = &

对象不支持ajax属性或方法

今天在做泛微流程开发的时候,遇到一件很奇怪的事情,流程流转到第二个节点,居然报错了,提示”对象不支持ajax属性和方法“,但是第一个节点测试并未报错了, /(ㄒoㄒ)/~~,然后试着把jQuery的简写“$"改成”JQuery“后,不在提示”对象不支持ajax属性和方法“错误,而是变成了“automation服务器不能创建对象”问题,看下了错误的代码 行”var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLH

html --- ajax --- javascript --- 简单的封装

Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教程:http://java.itcast.cn/news/8308d118/740a/4dcd/8dbf/c73d2fe5bc60.shtml 其实已经有好多框架对它进行了封装,但是还是有好多时候用到自己封装的 透露一下,本人是宇多田光的听众之一哦! 封装后的代码如下: 文件路径:\web\Ajax

animate动画方法封装:原生JS实现

1 /** 2 * Created by guoyongfeng on 2014/7/7. 3 * @Author guoyongfeng 4 * @Date 2014-07-07 5 * @Version 1.0.0 6 * @update 2014-07-07 7 * @described tween动画库函数封装 8 * 9 */ 10 define('animate/0.0.1', function(){ 11 /** 12 * 13 */ 14 return function(ele,

Ajax的load方法演示

load方法的参数形式为: load(url,[data],[callback]); 其中url为请求HTML页面的URL地址.[data]表示发送至服务器的key/value数据.callback表示请求完成时的回调函数,无论请求成功或者失败. 下面的实例就演示了关于Ajax的load方法来请求另一个页面的内容. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/ht