封装异步请求

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——异步基础知识（三）的更多相关文章

  1. Ajax——异步基础知识（一）

    基础概念 1.异步请求可以做到偷偷向服务器发送请求,而页面却不刷新 2.get异步请求传递参数是通过url追加键值对的方式 3.post异步请求比较特殊,需要设置请求的类型 User-Agent:浏览 ...

  2. Ajax——异步基础知识（二）

    XML数据格式 首行必须是版本号和格式等信息 <?xml version="1.0" encoding="utf-8" ?> 最外层需要一个根节点进 ...

  3. java 基础知识三 java变量

    java  基础知识 三 变量 1.作用域 {} 包围起来的代码 称之为代码块,在块中声明的变量只能在块中使用 2.常量 就是固定不变的量,一旦被定义,它的值就不能再被改变. 3.变量 变量必须在程序 ...

  4. Python基础知识(三)

    Python基础知识(三) 一丶整型 #二进制转成十进制的方法 # 128 64 32 16 8 4 2 1 1 1 1 1 1 1 例如数字5 : 101 #十进制转成二进制的方法 递归除取余数,从 ...

  5. 快速掌握JavaScript面试基础知识(三)

    译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...

  6. C# 基础知识 (三).主子对话框数值传递

    在C# winform编程中,我们经常会遇到不同窗口间需要传递数值的问题.比如数据库的应用,主窗口填写内容num1,点击按钮,在弹出的子窗口显示对应num1值;或者在子窗口填写新注册用户名信息,在主窗 ...

  7. Dapper基础知识三

    在下刚毕业工作,之前实习有用到Dapper?这几天新项目想用上Dapper,在下比较菜鸟,这块只是个人对Dapper的一种总结. Dapper,当项目在开发的时候,在没有必要使用依赖注入的时候,如何做 ...

  8. Ajax——php基础知识（三）

    上传文件 1.get是传不了文件的,只能用post 2.enctype需要重新设置,默认是application/x-www-form-urlencoded,会在发送到服务器之前,所有字符都会进行编码 ...

  9. Java的基础知识三

    一.Java 集合框架 集合框架是一个用来代表和操纵集合的统一架构.所有的集合框架都包含如下内容: 接口:是代表集合的抽象数据类型.接口允许集合独立操纵其代表的细节.在面向对象的语言,接口通常形成一个 ...

随机推荐

  1. hdu 1533KM算法

    #include<stdio.h> #include<string.h> #include<math.h> #define inf 0x3fffffff #defi ...

  2. WCF 配置文件中的MaxStringContentLength & MaxReceivedMessageSize

    中午测试员在测试系统模块时发现无法通过WCF从服务器下载数据,检查配置文件后,建议开发人员修改站点的WEB.CONFIG文件,具体修改对比如下: 旧的: <binding name=" ...

  3. ssh连接断开后 shell进程退出

    问题描述:当SSH远程连接到服务器上,然后运行一个服务 ./catalina.sh start,然后把终端开闭(切断SSH连接)之后,发现该服务中断,导致网页无法访问.   解决方法:使用nohup命 ...

  4. UVa 10315 - Poker Hands

    题目:两个人手里各有五张牌,比較两牌型大小. 比較规则例如以下:(按优先级排序,优先级同样按以下内部规则比較) 1.straight-flush:同花顺,牌面连续,花色同样,按最大的值比較. 2.fo ...

  5. Behavioral模式之Interpreter模式

    1.意图 给定一个语言,定义它的文法的一种表示.并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 2.别名 无 3.动机 假设一种特定类型的问题发生的频率足够高,那么可能就值得将该问题的各种 ...

  6. HDU 4499 Cannon （暴力搜索）

    题意:在n*m的方格里有t个棋子,问最多能放多少个炮且每一个炮不能互相攻击(炮吃炮) 炮吃炮:在同一行或同一列且中间有一颗棋子. #include <stdio.h> #include & ...

  7. ES 2016+

    ES2016(ES7)新增: Array.prototype.includes Exponentiation Operator 求冥运算 ES2017 (ES8)新增: ECMAScript® 201 ...

  8. mySql学习笔记：比sql server书写要简单

    在学mySql.总的感觉,mySql与Sql Server差不多,语法都很象,但mySql也许是吸取了SQL SERVER的一些经验,SQL语句书写起来更加简单. 比如说,设置主键.索引,SQL SE ...

  9. JS高级技巧学习小结

    安全类型检測 var isArray = value instanceof Array; 以上代码要返回true,value必须是一个数组,并且还必须与Array构造函数在同一个全局作用域中(Arra ...

  10. kentico9开始移除的webpart

    https://devnet.kentico.com/articles/fighting-featuritis https://blog.intercom.com/product-strategy-m ...