<!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技术介绍－－（引言）

    软件设计因为引入面向对象思想而逐渐变得丰富起来.“一切皆为对象”的精义,使得程序世界所要处理的逻辑简化,开发者可以用一组对象以及这些对象之间的关系将软件系统形象地表示出来.而从对象的定义,进而到模块, ...

  2. Test 7.12 T2

    题目描述 ​ 有一张 n 个点 m 条边的无向图,其中有 s 个点上有加油站.有 Q 次询问(a,b,c), 问能否开一辆油箱容积为 c 的车从 a 走到 b. 输入格式 ​ 第一行三个整数 n,s, ...

  3. darknet-yolov3使用opencv3.4.8时，undefined reference 'imshow()'、'waitKey()'、'nameWindows()'

    解决办法:暴力卸载 卸载办法:进入到opencv3.4.8的安装目录下:make uninstall 然后重新安装了其他版本的,立马编译通过了.

  4. orm 查询数据库随机返回一条数据的解决办法用models.User.objests.all().order_by('?').first()

  5. django的安装和初步使用

    安装参考:步骤也可以参考这个 很详细 https://blog.csdn.net/zww1984774346/article/details/54408759 如果想在终端查看项目结构 需要用到tre ...

  6. django数据库迁移相关【sqlite3迁移到MySQL】(django2.0.3测试通过)

    前言 项目部署到服务器之后,用的数据库还是sqlite3. 发现一些问题,sqlite3是小巧,但是服务器上查看数据库比较费劲,不能直观看到数据.可是我们经常需要即时.直观查看数据,这就用到MySQL ...

  7. php strpos()函数 语法

    php strpos()函数 语法 作用:寻找字符串中某字符最先出现的位置.大理石平台怎么选择 语法:strpos(string,find,start) 参数: 参数 描述 string     必需 ...

  8. 20180716-Java正则表达式

    import java.util.regex.Matcher;import java.util.regex.Pattern; public class RegexMatches{ public sta ...

  9. 2019 年百度之星·程序设计大赛 - 复赛 Diversity （树形DP）

    题目:https://vjudge.net/contest/325352#problem/A 题意:给你一棵树,每个点给一个区间,可以选区间里面任何一个数,然后问怎么安排得到最大边两点之间的差值和,求 ...

  10. IntelliJ IDEA最新版配置Tomcat（完整版教程）

    查找该问题的童鞋我相信IntelliJ IDEA,Tomcat的下载,JDK等其他的配置都应该完成了,那我直接进入正题了. 1.新建一个项目 2.由于这里我们仅仅为了展示如何成功部署Tomcat,以及 ...