一个完整的AJAX请求包括五个步骤:

  1.创建XMLHTTPRequest对象

  2.使用open方法创建http请求,并设置请求地址

  3.设置发送的数据,开始和服务器端交互

  4.注册事件

  5.获取响应并更新界面

function ajax_method(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

// get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{

}
        // 设置 方法 以及 url
        ajax.open(method,url);

// send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url);

// 需要设置请求报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }

// 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

// 将 数据 让 外面可以使用
            // return ajax.responseText;

// 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

// 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }

}

原生ajax的请求封装get和post的更多相关文章

  1. 原生ajax的请求过程

    原生ajax的请求过程 创建全平台兼容的XMLHttpRequest对象: function getXHR(){ var xhr = null; if(window.XMLHttpRequest) { ...

  2. 微信小程序request(ajax)接口请求封装

    微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...

  3. 使用原生ajax及其简单封装

    原生ajax配置详解 // 原生ajax // 1. 创建ajax对象 if(window.XMLHttpRequest){ // // IE7+, Firefox, Chrome, Opera, S ...

  4. 原生ajax异步请求基础知识

    一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请 ...

  5. 原生ajax的请求函数

    ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应 ...

  6. 原生Ajax发送请求

    ajax  get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...

  7. javascript js原生ajax post请求 实例

    HTML代码: 注意: xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencod ...

  8. 原生 ajax get请求数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js原生Ajax的封装与使用

    一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...

随机推荐

  1. 使用dockerfile构建自己的镜像

    CentOS Linux release 7.2.1511 Docker version 17.03.1-ce 首先应该了解docker镜像的分层机制,这个网上文章很多,简单说就是对镜像的每次修改都是 ...

  2. Linux普通用户使用sudo免输密码(Debian/Redhat通用)

    今天使用的Debian,由于使用的是普通用户,而使用的sudo都需要输入密码的繁琐操作, 下面是使用sudo时免输入密码. 需要管理员权限进行以下操作. 修改sudoers vim /etc/sudo ...

  3. NOIP 2016 换教室 (luogu 1850 & uoj 262) - 概率与期望 - 动态规划

    题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有 2n2n 节课程安排在 nn 个时间段上.在第 ii(1 \leq i \leq n1≤ ...

  4. 浅谈Windows用户帐户控制(User Account Control,UAC)

    Microsoft一个事实:大多数用户都用一个Administrator(管理员)帐户来登录Windows.利用这个帐户,用户几乎没有任何限制地访问重要的系统资源,因为该帐户被授予很高的权限.一旦用户 ...

  5. Eclipse自动生成方法注释 快捷键

    自动生成方法的注释格式,例如 /*** @param str* @return* @throws ParseException*/ 快捷键是 ALT + SHIFT + J,将光标放在方法名上,按快捷 ...

  6. topcoder srm 510 div1

    problem1 link 令$f(x)$表示[0,x]中答案的个数.那么题目的答案为$f(b)-f(a-1)$ 对于$f(x)$来说,假设$x$有$d$位数字,即$[0,d-1]$,那么可以进行动态 ...

  7. POJ 1679 The Unique MST 【判断最小生成树是否唯一】

    Description Given a connected undirected graph, tell if its minimum spanning tree is unique.  Defini ...

  8. 最最简单的c语言函数汇编分析

    0x01 环境 xp+vc6.0 0x02 代码 int plus(int x, int y) { return 0; } 以下是vc6.0的反汇编窗口 1: int plus(int x, int ...

  9. git删除远程分支文件,不改变本地文件

    git提交项目时候踩的Git的坑 特别 由于准备春招,所以希望各位看客方便的话,能去github上面帮我Star一下项目 https://github.com/Draymonders/Campus-S ...

  10. Cannot retrieve metalink for repository: epel 错误解决办法

    centos下安装完EPEL源, 然后更新一下yum缓存, 如果发现这样的错误:Error: Cannot retrieve metalink for repository: epel. Please ...