文档章节

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

中国安全联盟
 中国安全联盟
发布于 2016/06/15 13:13
字数 612
阅读 164
收藏 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在前端开发中有着举足轻重的地位,关于Ajax的使用和注意事项一直是一个重要的话题,借此机会,本文希望对Ajax做一个全面的总结,彻底揭开Ajax的神秘面纱。 一.什么是Ajax Ajax(Asynchron...

Lunaqi
2017/12/04
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

没有更多内容

加载失败,请刷新页面

加载更多

读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
30分钟前
0
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
32分钟前
0
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
2
0
20180921 su与sudo命令、限制root用户通过ssh远程登录

su 命令 用户切换。 su # 切换到root用户su username # 切换到username用户# su 后面加-时,会初始化当前用户的各种环境su - username # 指定用户执行某些命令 su - -c "touch /tm...

野雪球
今天
2
0
Windows 下双 Python 开发环境配置

Windows 下双 Python 开发环境配置作者:老农民(刘启华)QQ: 46715422Email: 46715422@qq.com微信: 46715422 本人曾经在 Windows 下被两个版本环境折腾够呛,现在总结两个 Python...

新疆老农民
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部