<!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. AOP切面详解

    一.spring-aop.xml文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns= ...

  2. 线程数设置和CPU数的关系

    一般说来,大家认为线程池的大小经验值应该这样设置:(其中N为CPU的个数) 如果是CPU密集型应用,则线程池大小设置为N+1 如果是IO密集型应用,则线程池大小设置为2N+1(因为io读数据或者缓存的 ...

  3. css 块级格式化上下文（BFC）

    一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为 ...

  4. 【leetcode】1051. Height Checker

    题目如下: Students are asked to stand in non-decreasing order of heights for an annual photo. Return the ...

  5. 【テンプレート】LCA

    LCA目前比较流行的算法主要有tarjian,倍增和树链剖分 1)tarjian 是一种离线算法,需要提前知道所有询问对 算法如下 1.读入所有询问对(u,v),并建好树(建议邻接表) 2.初始化每个 ...

  6. Harbor修改暴露端口

    把原来的端口映射改成1180 一 修改docker-compose.yml [root@topcheer ~]# cat /mnt/harbor/docker-compose.yml version: ...

  7. <自动化测试>之<自动获取手机短信验证码>

    第一次写博,最近解决了做自动化测试短信验证码自动获取填入的方法减少了脚本的人工干预,并非拦截短信,所以不存在安全警报提醒,拿出来分享给大家,有感兴趣的大家可以加Q1856100 目前在职测试开发,,写 ...

  8. 20180822-Java接口

    Java 接口 接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 接口并 ...

  9. vue项目适应不同屏幕做的适配器

    一般宽度是1920的,但是有的电脑屏幕很窄,导致页面样式错乱,那么可以设置app.vue以及主页面里的样式宽度为1920px,超过了就auto. 如下: (app.vue) (home.vue) 原效 ...

  10. 浅谈关于SQL优化的思路

    零.为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 一.观察 MySQL优 ...