<!DOCTYPE html>
<html>

<head>
<title></title>
<script type="text/javascript">
ajax({
url: "http://localhost:8080/save",
type: "POST",
data: {},
dataType: "json",
username: 'sss',
success: function(response, xml) {
// 此处放成功后执行的代码
debugger;
},
fail: function(status) {
// 此处放失败后执行的代码
debugger;
}
});

function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
//创建 - 非IE6 - 第一步
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else {
//IE6及其以下版本浏览器
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//接收 - 第三步
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.fail && options.fail(status);
}
}
} //连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true); //设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
}
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".", ""));
return arr.join("&");
}
</script>
</head>

<body>
</body>

</html>

js 发送ajax请求（XMLHttpRequest）的更多相关文章

  1. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  2. 原生JS发送Ajax请求、JSONP

    一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...

  3. js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...

  4. 在发送ajax请求时加时间戳或者随机数去除js缓存

    在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...

  5. js中使用队列发送ajax请求

    最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...

  6. Axios发送AJAX请求

    目录 Axios 特征 axios提供主要三种发起请求的方式 方式一:直接axios实例直接call方式 方式二:通过axios实例提供的不同http请求方式的方法 方式三:其实是从第二种方式中单独提 ...

  7. js的ajax请求

    1 js原生get请求 <script> window.onload = function(){ var oBtn = document.getElementById('btn'); oB ...

  8. jQuery发送ajax请求

    利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...

  9. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

随机推荐

  1. 开启Apache mod_rewrite模块（解决404 Not Found）

    网站搭建完成了,进入登录界面就是访问不了. 原因大概是没有开启Apache mod_rewrite模块,或者没有配置完全. 步骤1: 启用mod_rewrite模块 在conf目录的httpd.con ...

  2. BZOJ1690: [Usaco2007 Dec]奶牛的旅行

    1690: [Usaco2007 Dec]奶牛的旅行 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 552  Solved: 286[Submit][St ...

  3. 【转】ArrayList遍历的同时删除----不错

    原文网址:http://javag.iteye.com/blog/403097 方法一 ArrayList<String> list = new ArrayList<String&g ...

  4. linux 信号signal和sigaction理解

    今天看到unp时发现之前对signal到理解实在浅显,今天拿来单独学习讨论下. signal,此函数相对简单一些,给定一个信号,给出信号处理函数则可,当然,函数简单,其功能也相对简单许多,简单给出个函 ...

  5. iOS开发手记 - iOS9.3 Xcode7打包ipa文件在其他越狱机器上运行的方法和一些问题

    现在Xcode7可以用一个appleid就可以往手机上部署测试app,不再需要$99,这也是方便.但是要把app发给别人的手机上运行还是不行,除非别人的手机在你身边可以直接通过Xcode安装 关于怎么 ...

  6. Linux网络配置相关

    路由相关 #添加到主机的路由 route add -host 192.168.1.2 dev eth0 route add -host 192.168.1.2 gw 192.168.1.1 注1:添加 ...

  7. jquery绑定事件on的用法

    语法 $(selector).on(event,childSelector,data,function,map) 参数 描述 event 必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分 ...

  8. SMO(Sequential Minimal Optimization) 伪代码（注释）

    Algorithm: Simplified SMO 这个版本是简化版的,并没有采用启发式选择,但是比较容易理解. 输入: C: 调和系数 tol: 容差 (tolerance) max passes: ...

  9. HDU 5067-Harry And Dig Machine（DFS）

    Harry And Dig Machine Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  10. Java学习笔记——JDBC读取properties属性文件

    Java 中的 properties 文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件. 文件的内容是格式是"键=值"(key-valu ...