<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>title</title>

</head>

<body>

</body>

</html>

<script>

  /*

    封装的过程

      重复的代码写出来

      不能固定的 作为 参数

    ajax工具函数

      回调函数的作用

  */

  // get请求

  // 因为是我们封装的函数 约定

  // data的格式是 key1=value1&key2=value2

  function get(url,data,success){

    // 创建异步对象

    var xhr = new XMLHttpRequest();

    // 请求行

    if(data){

      url+='?';

      url+=data;

    }

    xhr.open('get',url);

    // 请求头(get可以省略)

    // 回调函数

    xhr.onreadystatechange = function(){

      if(xhr.readyState==4&&xhr.status==200){

        // 调用 传入的 回调函数

        success(xhr.responseText);

        // 普通字符串

        console.log(xhr.responseText);

        // JSON

        console.log(JSON.parse(xhr.responseText));

        // XML

        console.log(xhr.responseXML);

        // 这里用return 获取不到数据的

        // return xhr.responseText;

      }

    }

    // 请求主体 发送

    xhr.send(null);

  }

  // post请求

  function post(url,data,success){

    // 创建异步对象

    var xhr = new XMLHttpRequest();

    // 请求行

    xhr.open('post',url);

    // 请求头

    // 有数据 才要设置

    if(data){

      xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

    }

    // 回调函数

    xhr.onreadystatechange = function(){

      if(xhr.readyState==4&&xhr.status==200){

        console.log(xhr.responseText);

        success(xhr.responseText);

      }

    }

    // 请求主体 发送

    xhr.send(data);

  }

</script>

ajax_封装函数_步骤1的更多相关文章

  1. ajax_封装函数_升级_传递多个参数和传递一个参数

    HTML: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...

  2. day16_函数作用域_匿名函数_函数式编程_map_reduce_filter_（部分）内置函数

    20180729    补充部分代码 20180727    上传代码 #!/usr/bin/env python # -*- coding:utf-8 -*- # ***************** ...

  3. Javascript:来一个AJAX封装函数

    前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 ...

  4. eclipse快速移动项目到另一台机器_步骤

    ​快速移动项目到另一台机器_步骤 1.设置好eclipse的编码,必须对应个人项目文件的编码{ window--preferences--general--workspace-text file en ...

  5. jQuery封装函数

    //1,插件命名:jQuery.插件名.js 为拉避免和其他库的冲突// //2,自定义插件尽量避免使用$ 如果非要使用$就一定要将jQuery传递进去,//写在最后加一个小括号写jquery ;结束 ...

  6. Eclipse中通过Android模拟器调用OpenGL ES2.0函数操作步骤

    原文地址: Eclipse中通过Android模拟器调用OpenGL ES2.0函数操作步骤 - 网络资源是无限的 - 博客频道 - CSDN.NET http://blog.csdn.net/fen ...

  7. 浏览器兼容——DOM事件封装函数

    //封装函数var eventUtil={    //添加事件    addHandler:function(element,type,handler){        if(element.addE ...

  8. WMI 获取硬件信息的封装函数与获取联想台式机的出厂编号方法

    原文:WMI 获取硬件信息的封装函数与获取联想台式机的出厂编号方法 今天玩了一把WMI,查询了一下电脑的硬件信息,感觉很多代码都是可以提取出来的,就自己把那些公共部分提出出来,以后如果要获取 某部分的 ...

  9. Ajax封装函数笔记

    Ajax封装函数: function ajax(method, url, data, success) { //打开浏览器 //1.创建一个ajax对象 var xhr = null; try { x ...

随机推荐

  1. 向Hive中导入数据的方式

    一.Hive客户端:根据数据源不同划分 1.从本地文件系统中导入数据到hive表中: load data local inpath "path" [OVERWRITE] into ...

  2. maven-enforcer-plugin查看冲突

    我们会经常碰到这样的问题,在pom中引入了一个jar,里面默认依赖了其他的jar包.jar包一多的时候,我们很难确认哪些jar是我们需要的,哪些jar是冲突的.此时会出现很多莫名其妙的问题,什么类找不 ...

  3. [USACO17FEB]Why Did the Cow Cross the Road III G (树状数组,排序)

    题目链接 Solution 二维偏序问题. 现将所有点按照左端点排序,如此以来从左至右便满足了 \(a_i<a_j\) . 接下来对于任意一个点 \(j\) ,其之前的所有节点都满足 \(a_i ...

  4. elasticsearch-head插件添加安全认证

    elasticsearch-head是集群管理.数据可视化.增删查改.查询语句可视化工具;它可以对数据进行增删查改,对于数据安全来说是有风险的,因此在生产环境中尽量少用,使用该插件至少要限制ip地址或 ...

  5. 20180821-Java封装

    java 封装 在面向对象程式设计方法中,封装(英语:Encapsulation)是指,一种将抽象性函式接口的实作细节部份包装.隐藏起来的方法. 封装可以被认为是一个保护屏障,防止该类的代码和数据被外 ...

  6. PHP实现多服务器SESSION共享

    为什么要session共享? 现在稍微大一点的网站基本上都有好几个子域名,比如www.feiniu.com, search.feiniu.com, member.feiniu.com,这些网站如果需要 ...

  7. Linux shell 归纳之 cp

    1. 复制文件夹folder1(包括所有子文件夹和文件), 并命名为folder2 # cp -r /usr/folder1 folder2 2. 复制文件file1 到它的上一级的目录的abc文件夹 ...

  8. php面试专题---10、网络协议考点

    php面试专题---10.网络协议考点 一.总结 一句话总结: 网络的考点其实就是这些:常见状态码,常见协议,osi七层模型,http和https 1.HTTP/1.1中,状态码200.301.304 ...

  9. Zsh vs. Bash不完全对比解析,zsh是一种更强大的被成为“终极”的Shell

    https://www.zhihu.com/question/21418449 Mort | Zsh vs. Bash:不完全对比解析(1) 2014-10-07  bdpqlxz     Zsh和B ...

  10. EZOJ #362历史

    分析 就是保存前pi-1个数每个ai出现多少次 然后维护这些数当前剩余的最大值 每次和新加进来的比较即可 如果新的大直接取 否则新的最大值一定不大于原来的最大值 因此o(n) 代码 #include& ...