AJAX的实现

var sAjax = function () {
var sendMsg = {
url: "",
sendType: "POST",
ContentType: "application/x-www-form-urlencoded",
msgType: "JSON",
data: {},
success: function (data) { },
error: function (data) { },
send: function () {
var url = "";
if (sendMsg.sendType == "POST") {
url = sendMsg.url;
} else {
url = sendMsg.url + "?" + postData(sendData.data);
}
var xhr = new XMLHttpRequest();
xhr.open(sendMsg.sendType, url, true);
xhr.setRequestHeader("Content-type", sendMsg.ContentType);
xhr.onreadystatechange = function () {
var XMLHttpReq = xhr;
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var text = XMLHttpReq.responseText;
if (sendMsg.msgType == "JSON") {
console.log(text);
sendMsg.success(eval('(' + text + ")"));
} else {
sendMsg.success(text);
}
} else {
sendMsg.error(XMLHttpReq.status);
}
}
};
xhr.send(postData(sendMsg.data));
}
}
function postData(obj) { // 转成post需要的字符串.
var str = "";
for (var prop in obj) {
str += prop + "=" + obj[prop] + "&"
}
return str;
};
return sendMsg;
}

注意1:

构造函数中的sendMsg内的send方法中不可使用this.的方式获取sendMsg对象中的属性,因为this是静态的,当使用var a =new sAjax()实例化对象时this就已经生成了,这个时候this中的属性还没有被赋值this.url=null。

注意2:

使用eval()函数转换json字符串时应当使用sendMsg.success(eval('(' + text + ")"))的方式进行解析,使用sendMsg.success(eval( text))会报错提示“VM444:1 Uncaught SyntaxError: Unexpected token

javaScript AJAX的更多相关文章

  1. JavaScript Ajax之美~

    JavaScript Ajax之美~ 曾经有一段时期,因为开发人员对JavaScript的滥用导致其遭受了一段时间的冷门时期,不被大家看好,后来,到了2005年,Google公司的很多技术都是用了aj ...

  2. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  3. 2、.net NVelocity中原生javascript ajax封装使用

    在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var x ...

  4. javascript ajax 脚本跨域调用全解析

    javascript ajax 脚本跨域调用全解析 今天终于有点时间研究了一下javsscript ajax 脚本跨域调用的问题,先在网上随便搜了一下找到一些解决的办法,但是都比较复杂.由是转到jqu ...

  5. 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  6. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  7. [转载]javascript+ajax+jquery教程11--正则表达式

    原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...

  8. JavaScript AJAX原生写法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. 非常优秀的Javascript(AJAX) 开发工具:Aptana

    非常优秀的Javascript(AJAX) 开发工具:Aptana 下面我要向你介绍一款非常优秀的Javascript(AJAX) 开发工具:Aptana.应为它实在太棒了,所以我忍不住想向你推荐它. ...

  10. javascript --- Ajax基础

    神马是Ajax? Ajax即‘Asynchronous javascript and XML’(异步javascript和XML),也就是所谓的无刷新页面读取技术. http请求 首先要了解http请 ...

随机推荐

  1. JMeter学习-038-JMeter Linux 环境配置

    1.1.下载 Download URL:http://mirrors.tuna.tsinghua.edu.cn/apache//jmeter/binaries/apache-jmeter-3.0.tg ...

  2. [转]Android - 文件读写操作 总结

     转自:http://blog.csdn.net/ztp800201/article/details/7322110 Android - 文件读写操作 总结 分类: Android2012-03-05 ...

  3. mysql主键uuid、uuid_short和int自增对比

    数据库主键性能对比: 名称 存储长度 生成方式 1. uuid 32+4 uuid()函数 2. uuid20 20 UUID_SHORT()函数 3. bigint自增 20 auto_increm ...

  4. [SharePoint 2010] 自定义字段类型开发(二)

    在SharePoint 2010中实现View Action Button效果. http://www.sharepointblogs.be/blogs/vandest/archive/2008/06 ...

  5. understanding-论文

    understanding temporal and spatial travel paterns of individual passengers by mining smart card data ...

  6. 链接属性rel=’external’、rel=’nofollow’、rel=’external nofollow’三种写法的区别

    链接属性rel='external'.rel='nofollow'.rel='external nofollow'三种写法的区别   大家应该都知道rel='nofllow'的作用,它是告诉搜索引擎, ...

  7. NLog输出目标及类型

    targets:输出目标节点 target:配置一个输出目标 Type输出类型: Console        输出到控制台 Debugger     输出到VS输出窗口 File        输出 ...

  8. c#-二分查找-算法

    折半搜索,也称二分查找算法.二分搜索,是一种在有序数组中查找某一特定元素的搜索算法. A 搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束: B 如果某一特定元素大于或者小 ...

  9. 夺命雷公狗-----React_native---4---初始化项目

    我们首先在android目录下创建一个apps的文件夹: 然后我们在apps目录下,按住shift键加鼠标右键选择--在此打开命令窗口输入命令初始化项目 然后就是等了................. ...

  10. js基础教程四之无缝滚动

    前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...