文档章节

自己动手简单封装ajax的get和post请求

中国安全联盟
 中国安全联盟
发布于 2016/06/15 13:13
字数 612
阅读 236
收藏 0

前言

    每次在做项目的时候,在ajax这块,都是用的jqury框架本身封装的$.ajax,$.get,$.post等方法进行异步请求,但是还是想知道他到底是怎么进行异步请求的封装,于是自己动手封装了个最简单的get,post请求。

GET请求

    首先我们需要创建一个 XMLHttpRequest对象,XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力等。

 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

    ActiveXObject() 用于支持IE5,6浏览器

    构造好了XMLHttpRequest请求后就可以构造请求以及发送请求


    xhr.open('GET',url,true);//构造请求,url为请求的网址,true为是否进行异步请求
    xhr.send();//发送请求

    之后我们需要设置一个监听器来接受返回的数据

 xhr.onreadystatechange = function(){
        if( xhr.readyState == 4 && xhr.status == 200 ){
            alert(xhr.responseText);//xhr.responseText为请求所返回的内容
        }
    };

    这里通过监听返回码的变化来确定请求是否成功以及处理返回的数据

    之后只需要进行简单的封装之后,一个简单的ajax get请求就完成了,完整代码如下。

function get(url,callback){

    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    function checkTimeout(){ 
        if(xhr.readyState !== 4){
            aborted = true;
            xhr.abort();//关闭请求
        }
    }
    setTimeout(checkTimeout,5*1000);//设置超时时间
    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4 && xhr.status == 200 ){
            callback(xhr.responseText); 执行监听器方法
        }
    };

    xhr.open('GET',url,true);
    xhr.send();
}

    调用它其实很简单,需要设置一个方法监听器

    get('http://localhost:8087/rxd/pre/user/login',function(data){
       //执行你的操作 
    });

POST请求

    post请求和get请求差不多,区别主要的就是POST请求需要在发送的时候传递参数

xhr.send(params);

    完整代码如下:

function post(url,params,callback){
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    function checkTimeout(){
        if(xhr.readyState !== 4){
            aborted = true;
            xhr.abort();
        }
    }
    setTimeout(checkTimeout,5*1000);
    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4 && xhr.status == 200 ){
            callback(xhr.responseText);
        }
    };
    xhr.open('POST',url,true);
    xhr.send(params);
}

    调用方法:

    post('http://localhost:8087/rxd/pre/user/login',{username:'asd',password:'asd'},function(data){
        alert(data);
    })

总结

    以上即是最简单的ajax的get和post封装,还有许许多多的地方没有处理,没有涉及,但是我们至少知道了平时我们是用的$.ajax,$.get,$.post是如何进行基本的网络请求的,以及自己也可以写出一个简单的ajax的gei,post请求。

© 著作权归作者所有

共有 人打赏支持
中国安全联盟
粉丝 6
博文 17
码字总数 12043
作品 0
成都
程序员
私信 提问
一步一步理解Ajax(二)

ajax方法:通过 HTTP 请求加载远程数据 get方法: 通过远程 HTTP GET 请求载入信息 post方法:通过远程 HTTP POST 请求载入信息 1、创建XMLHttpRequest对象 function createXHR() { return ...

爱六六
2012/01/12
0
0
Ajax学习日志

在IE浏览器中发送Ajax请求 浏览器端的代码 服务器端的代码 using Sys

最美的回忆
2017/11/23
0
0
AJAX从入门到放弃

AJAX简单介绍 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术;AJAX = 异步 Javascript和XML;通过在后台与服务器进行少量数据交换,...

许渺
2017/11/16
0
0
Ajax简单总结

AJAX总结 1. Ajax流程 1.1 创建XMLHttpRequest对象 var req; if (window.XMLHttpRequest) { // 适用于所有新型浏览器 req = new XMLHttpRequest(); } else if (window.ActiveXObject) { // ......

我是小个子啊
2016/04/15
88
0
Ajax 的全面总结

Ajax在前端开发中有着举足轻重的地位,关于Ajax的使用和注意事项一直是一个重要的话题,借此机会,本文希望对Ajax做一个全面的总结,彻底揭开Ajax的神秘面纱。 一.什么是Ajax Ajax(Asynchron...

Lunaqi
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
4
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
8
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
12
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
6
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部