文档章节

封装一个自己的ajax

zhngjan
 zhngjan
发布于 2014/12/01 21:36
字数 591
阅读 27
收藏 0

虽然jQuery用的很爽,但是还是看看ajax吧!

 

核心: XMLHttpRequest 

方法: open(method, url, async)

                  send(string) (使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方 法。)

例:

xmlHttpRequest.open("POST","login.jsp",true);
xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpRequest.send("user="+username+"&pwd="+password);

      属性: 

    1. responseText:作为响应主体被返回的文本
    2. responseXML:如果响应内容的类型是”text/xml”或”application/xml”,这个属性将保存包含着相应数据的XML文档 
    3. status:响应的HTTP状态(200,404,500等)
    4. statusText:HTTP状态说明
    5, readyState: XmlHttpRequest对象的状态

        0 --- 请求未初始化
        1 --- 服务器连接已建立
        2 --- 请求已接收
        3 --- 请求处理中
        4 --- 请求已处理完成,且响应已就绪
        6, onreadystatechange: 监听属性readyState

 

封装代码:

                function ajax(configs) { 
                    var settings = { 
                        "url": "",  //请求地址
                        "method": "post", //请求使用方法
                        "async": true, //默认使用异步
                        "data": null, //参数(text/json)
                        "responseType": "text", //返回值获取方式 text/xml 
                        "headers": {}, //自定义的HttpHeader
                        "enableCache":true, //是否使用缓存
                        "onSucceed": null, //成功回调
                        "onClientError": null, //客户端错误回调
                        "onServerError": null //服务器端错误回调
                    }; 
                    for (s in settings) { 
                        settings[s] = configs[s] ? configs[s] : settings[s];  //应用自定义配置
                    } 
                    var xhr = null;  //创建XHR对象
                    try {
                        // Firefox, Opera 8.0+, Safari,IE7+
                        xhr = new XMLHttpRequest();
                    }
                    catch (e) {
                        // Internet Explorer 
                        try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        }
                        catch (e) {
                            try {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                            }
                            catch (e) {
                                xhr = null;
                            }
                        }
                    }
                    xhr.onreadystatechange = function() { 
                        if (xhr.readyState == 4) {  //请求完成,响应就绪
                            var result = settings["responseType"] == "text" ? xhr.responseText : xhr.responseXML; //返回值类型
                            if (((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) && typeof settings['onSucceed'] == 'function') { //成功
                                settings['onSucceed'](result, xhr.status); 
                            } else if (xhr.status >= 400 && xhr.status < 500) { //客户端出错,404啊神马的
                                settings['onClientError'](result, xhr.status); 
                            } else if (xhr.status >= 500) { //服务器端出错
                                settings['onServerError'](result, xhr.status); 
                            } 
                        } 
                    } 
                    xhr.open(settings['method'], settings['url'], settings['async']); //发送请求
                  
                    if (typeof settings['headers'] == 'object') { //设置自定义headers
                        var headers = settings['headers']; 
                        for (h in headers) { 
                            xhr.setRequestHeader(h, headers[h]); 
                        } 
                    } 
                    if(!settings['enableCache']){ //禁用缓存
                        xhr.setRequestHeader("If-Modified-Since","0");
                        }
                    
                    if (settings["method"].toLowerCase() == "post") { //post请求
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); 
                        var data="";
                        if(typeof settings["data"]=='object')
                        {
                            for(d in settings["data"]){
                                data+=(d+'='+settings["data"][d]);
                                }
                          }else{
                            data=settings["data"];
                              }
                        xhr.send(data); //传递参数
                    } else { 
                        xhr.send(); //get请求
                    } 
                }

 

调用:

                    ajax({
						"method":"post", 
						"url":'login.do', 
						"async":true, 
						"onsuccess":function(data){
								alert(data); 
							    }
					});

 

就先这样吧!

 

© 著作权归作者所有

zhngjan
粉丝 4
博文 59
码字总数 22249
作品 0
朝阳
程序员
私信 提问
jquery 的ajax 上传进度条

一直在用ajax,但是没有做进度条,原来$.ajax里面封装了xhr,只要从这里面取得上传进度。 这是将回调写到变数里 将xhr对像放到 $.ajax({....,xhr}); 绑定到'progress' 这里要自己再定义progr...

吴孝青
2018/03/31
0
0
从零开始学 Web 之 Ajax(六)jQuery中的Ajax

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/07/20
0
0
温故js系列(12)-ajax&&优缺点&&node后端

前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:Ajax JavaScript-Ajax&&node后端 2005年Jesse James Garrett 发表了一篇...

xzavier
2018/08/27
0
0
非常适合新手的jq/zepto源码分析08---ajax的封装

1.现在看看对JSONP的封装 $.ajaxJSONP = function(options, deferred){                    //清除字段         //执行开始函数,返回false 则停止        ...

小结巴巴
2017/03/15
0
0
基于jQuery的ajax对WebApi和OData的封装

基于jQuery的ajax对WebApi和OData的封装   WebApi 的使用带来了一个显著的特点,对type有一定的要求。一般ajax的type无非就是两种,GET和POST。如果用JSONP来跨域的话,就只能用GET。但是现...

金色海洋
2017/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

texlive安装

Installing to: D:/bin/texlive/texlive/2019Installing [001/307, time/total: ??:??/??:??]: adobemapping [2130k]Installing [002/307, time/total: 00:03/08:57]: ae [84k]Installing......

MtrS
23分钟前
2
0
运维规范

命名规范 发布流程 监控告警 故障定位 状态 日志 监控

以谁为师
今天
2
0
约瑟夫环(报数游戏)java实现

开端 公司组织考试,一拿到考题,就是算法里说的约瑟夫环,仔细想想 以前老师将的都忘了,还是自己琢磨把~ package basic.gzy;import java.util.Iterator;import java.util.LinkedList;...

无极之岚
今天
3
0
Kernel字符设备驱动框架

Linux设备分为三大类:字符设备,块设备和网络设备,这三种设备基于不同的设备框架。相较于块设备和网络设备,字符设备在kernel中是最简单的,也是唯一没有基于设备基础框架(device结构)的...

yepanl
今天
3
0
Jenkins 中文本地化的重大进展

本文首发于:Jenkins 中文社区 我从2017年开始,参与 Jenkins 社区贡献。作为一名新成员,翻译可能是帮助社区项目最简单的方法。 本地化的优化通常是较小的改动,你无需了解项目完整的上下文...

Jenkins中文社区
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部