Ajax——异步基础知识（三）
封装异步请求
1、将函数作为参数进行使用
2、因为获取数据是在一个注册事件中获取的，所以只有事件触发的时候才会调用此函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>发送请求1</button>
<button>发送请求2</button>
<script>
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
btn1.onclick = function () {
ajax_tool('05.php', '', 'get', function (msg) {
alert(msg);
})
}
btn2.onclick = function () {
ajax_tool_pro({
url: '05.php',
data: '',
method: 'get',
success: function (data) {
console.log(data);
}
});
} /*
参数1:url
参数2:数据
参数3:请求的方法
参数4:数据成功获取以后 调用的方法
*/
function ajax_tool(url, data, method, success) {
var ajax = new XMLHttpRequest();
if (method == 'get') {
if (data) {
url += '?';
url += data;
}
ajax.open(method, url);
ajax.send();
} else {
ajax.open(method, url);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
if (data) {
ajax.send(data);
} else {
ajax.send();
}
}
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
success(ajax.responseText);
}
}
} // url:请求的url
// data:发送的数据
// method:请求的方法
// success:请求成功以后 调用的函数 function ajax_tool_pro(option) {
var ajax = new XMLHttpRequest();
if (option.method == 'get') {
if (option.data) {
option.url += '?';
option.url += option.data;
}
ajax.open(option.method, option.url);
ajax.send();
} else {
ajax.open(option.method, option.url);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
if (option.data) {
ajax.send(option.data);
} else {
ajax.send();
}
}
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
option.success(ajax.responseText);
}
}
}
</script>
</body>
</html>
<?php
header("content-type:text/html;charset=utf-8");
echo '服务器已经收到请求';
?>
Ajax——异步基础知识（三）的更多相关文章
- Ajax——异步基础知识（一）
基础概念 1.异步请求可以做到偷偷向服务器发送请求,而页面却不刷新 2.get异步请求传递参数是通过url追加键值对的方式 3.post异步请求比较特殊,需要设置请求的类型 User-Agent:浏览 ...
- Ajax——异步基础知识（二）
XML数据格式 首行必须是版本号和格式等信息 <?xml version="1.0" encoding="utf-8" ?> 最外层需要一个根节点进 ...
- java 基础知识三 java变量
java 基础知识 三 变量 1.作用域 {} 包围起来的代码 称之为代码块,在块中声明的变量只能在块中使用 2.常量 就是固定不变的量,一旦被定义,它的值就不能再被改变. 3.变量 变量必须在程序 ...
- Python基础知识(三)
Python基础知识(三) 一丶整型 #二进制转成十进制的方法 # 128 64 32 16 8 4 2 1 1 1 1 1 1 1 例如数字5 : 101 #十进制转成二进制的方法 递归除取余数,从 ...
- 快速掌握JavaScript面试基础知识(三)
译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...
- C# 基础知识 (三).主子对话框数值传递
在C# winform编程中,我们经常会遇到不同窗口间需要传递数值的问题.比如数据库的应用,主窗口填写内容num1,点击按钮,在弹出的子窗口显示对应num1值;或者在子窗口填写新注册用户名信息,在主窗 ...
- Dapper基础知识三
在下刚毕业工作,之前实习有用到Dapper?这几天新项目想用上Dapper,在下比较菜鸟,这块只是个人对Dapper的一种总结. Dapper,当项目在开发的时候,在没有必要使用依赖注入的时候,如何做 ...
- Ajax——php基础知识（三）
上传文件 1.get是传不了文件的,只能用post 2.enctype需要重新设置,默认是application/x-www-form-urlencoded,会在发送到服务器之前,所有字符都会进行编码 ...
- Java的基础知识三
一.Java 集合框架 集合框架是一个用来代表和操纵集合的统一架构.所有的集合框架都包含如下内容: 接口:是代表集合的抽象数据类型.接口允许集合独立操纵其代表的细节.在面向对象的语言,接口通常形成一个 ...
随机推荐
- 【GC概述以及查看堆内存使用】Java内存管理和GC学习
内存划分 1.JAVA内存主要划分为方法栈.方法区.堆. 2.方法栈上内存会自动释放: 3.方法区上主要加载了类的元信息.静态变量.常量.改区域又称为持久代(Perm Gen),默认是最小16M,最大 ...
- 【Java基础】Java基本数据类型与位运算
1.赋值运算符 赋值使用操作符“=”.它的意思是“取右边的值(即右值),把它复制给左边(即左值)”.右值可以是任何 常数.变量或者表达式 (只要它能 生成 一个值就行).但左值必须是一个明确的,已命名 ...
- oracle中的类似BIN$MrkCYT9eTTK+0sStMwn7+Q==$0的表的作用
https://www.2cto.com/database/201211/166482.html https://docs.oracle.com/cd/E11882_01/server.112/e40 ...
- nyoj_528_找球号（三）_201404152050
找球号(三) 时间限制:2000 ms | 内存限制:3000 KB 难度:2 描述 xiaod现在正在某个球场负责网球的管理工作.为了方便管理,他把每个球都编了号,且每个编号的球的总个数都是 ...
- postgresql 创建函数
One of the most powerful features of PostgreSQL is its support for user-defined functions written in ...
- 一个经典的消费者和生产者的实现（linux ）
#include <stdio.h> #include <pthread.h> #define BUFFER_SIZE 16 // 缓冲区数量 struct ...
- Javascript MVC 学习笔记（三） 视图和模板
模板 Javascript中模板的核心概念是,将包括模板变量的HTML片段和Javascript对象做合并.把模板变量替换为对象中的属性值. 书中讲到了几种库作为模板引擎,可是链接失效了.能够在这里下 ...
- iOS 文字属性字典
iOS开发过程中相信大家常常遇到当须要给字体,颜色,下划线等属性的时候參数是一个NSDictionary 字典 可是字典里面究竟有哪些键值对了 我们把经常使用的总结一下 首先我们创建一个最简单的.设置 ...
- PHP移动互联网开发笔记（3）——运算符
原文地址:http://www.php100.com/html/php/rumen/2014/0326/6704.html 一.PHP的运算符 PHP中有丰富的运算符集,它们中大部分直接来自于C语言. ...
- Mongo使用
在用mongo进行查询时,$exists表示是否document是否包括这个field,即使field的value为null也算是包括. $exists Syntax: { field: { $exi ...