一个完整的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. sublime text3 批量查找替换文件夹或项目中的字符

    1.点击左上角的“菜单”,在弹出的菜单中选择“打开文件夹”. 2.在文件夹上右击,选择“在文件夹中查找”选项 3.之后会软件底部会弹出对话框,分别输入要查找的内容和替换的内容,最后点击替换按钮 4.再 ...

  2. python简说(二十五)面向对象

    面向对象编程: 类 一个种类.一个模型 实例.实例化.对象 实例.对象: 根据模型制作出来的东西. 实例化: 就是做东西的这个过程. class My: my=My() 私有 方法 类里面的函数 属性 ...

  3. 20180307-Xen、KVM、VMware、hyper-v等虚拟化技术的比较

    xen和kvm,是开源免费的虚拟化软件. vmware是付费的虚拟化软件. hyper-v比较特别,是微软windows 2008 R2附带的虚拟化组件,如果你买了足够的授权,hyper-v(包括hy ...

  4. 20145319 《计算机病毒》动态分析lab3-2

    20145319 <计算机病毒>动态分析lab3-2(实践六) 实践过程 基础分析 拿到恶意代码时,首先使用PE ID打开,查看其中一些基础信息以及观察该恶意代码是否加壳,来确定下一步分析 ...

  5. 树之105 Construct Binary Tree from Preorder and Inorder Traversal

    题目链接:https://leetcode-cn.com/problems/construct-binary-tree-from-preorder-and-inorder-traversal/ 参考链 ...

  6. 【Python48--魔法方法:迭代器&生成器】

    一.迭代器 1.iter() __iter__() 2.next() __next__() 二.用while语句实现for语句相同的功能 for each in range(5): print(eac ...

  7. Node.js初探

    1, 设计高性能.Web服务器的几个要点:事件驱动.非阻塞I/O 2,常见Web服务器架构: Web服务器的功能: 接受HTTP请求(GET.POST.DELETE.PUT.PATCH) 处理HTTP ...

  8. python --- 11 第一类对象 函数名 闭包 迭代器

    一 .函数名的运用    ①函数名是⼀个变量, 但它是⼀个特殊的变量, 与括号配合可以执⾏函数的变量 ②函数名是一个内存地址    ③ 函数名可以赋值给其他变量         ④函数名可以当做容器类 ...

  9. ThreadPoolExecutor线程池

    为什么使用线程池: 1.创建/销毁线程伴随着系统开销,过于频繁的创建/销毁线程,会很大程度上影响处理效率. 2.线程并发数量过多,抢占系统资源从而导致阻塞. 3.对线程进行一些简单的管理. 在java ...

  10. 【做题】uoj#370滑稽树上滑稽果——巧妙dp

    一个显然的结论是最终树的形态必然是一条链.具体证明只要考虑选定树上的某一条链,然后把其他部分全部接在它后面,这样答案一定不会变劣. 那么,一开始的想法是考虑每一位的最后出现位置,但这并不容易实现.注意 ...