文档章节

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

中国安全联盟
 中国安全联盟
发布于 2016/06/15 13:13
字数 612
阅读 86
收藏 0
点赞 0
评论 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

Ajax学习日志

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

最美的回忆 ⋅ 2017/11/23 ⋅ 0

AJAX从入门到放弃

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

许渺 ⋅ 2017/11/16 ⋅ 0

Ajax 的全面总结

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

Lunaqi ⋅ 2017/12/04 ⋅ 0

Ajax简单总结

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

我是小个子啊 ⋅ 2016/04/15 ⋅ 0

javascript实现原生ajax的几种方法

自从js有了各种框架之后,比如jquery,使用ajax已经变的相当简单了。但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢?下面和大家分...

BearCatYN ⋅ 2015/06/04 ⋅ 1

JQuery真的不难~第六回 JQ中的异步调用方式

前言 今天主要讲一下JQ中的异步编程,它将ajax进行封装,在进行异步请求时显得非常容易,无论是GET,POST方式,还是text,xml,javascript,json等数据通讯都是那么的自然 现在,我们就走入jq的...

mcy247 ⋅ 2017/12/06 ⋅ 0

PHP判断一个请求是Ajax请求还是普通请求

Javascript中大多数的框架如 jquery(jquery ui、jquery easyui)、Mootools 等,在发出 Ajax 请求时,都会发送额外的 HTTPXREQUESTED_WITH 头部信息,因此每当发送一个ajax请求你就可以在服务...

Junn ⋅ 2013/08/05 ⋅ 1

Asp.Net MVC 使用 Ajax

Asp.Net MVC 使用 Ajax Ajax 简单来说Ajax是一个无需重新加载整个网页的情况下,可以更新局部页面或数据的技术(异步的发送接收数据,不会干扰当前页面)。 Ajax工作原理 Ajax使浏览器和服务...

JoeSnail ⋅ 2017/11/13 ⋅ 0

jquery+ajax+jsonp实现跨域请求

之前一篇博客详细的说明了jsonp协议,jquery ajax封装了jsonp协议,让跨域请求实现如此简单: $.ajax({ type : "post", url : "http://www.phpddt.com/ajax/test", dataType : "jsonp", jso...

zyt_1978 ⋅ 2016/06/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

IDEA创建SpringMVC+Mybatis+Maven项目

视频如下(加载有点慢请见谅,服务器不太好): 视频

影狼 ⋅ 11分钟前 ⋅ 0

前阿里P8架构师:精准定制Java架构师学习计划!

可以说,Java是现阶段中国互联网公司中,覆盖度最广的研发语言,掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地。 有不少朋友问,除了掌握J...

java高级架构牛人 ⋅ 14分钟前 ⋅ 0

zookeper学习

https://blog.csdn.net/u012152619/article/category/6470028

~少司命~ ⋅ 15分钟前 ⋅ 0

Spring MVC ,JSON,JQuery,不懂JQuery,跳过了

/spring-mvc-study/src/main/webapp/course_json.jsp <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD ......

颖伙虫 ⋅ 16分钟前 ⋅ 0

2018上海云栖大会workshop-日志数据采集与分析对接

摘要: 日志数据采集与分析对接 课程描述 通过日志服务采集用户、数据库、业务等访问数据。演示对于业务日志分析与处理,程序日志查询与监控,打通日志与数据仓库对接案例。 日志种类 网站访...

阿里云云栖社区 ⋅ 16分钟前 ⋅ 0

mahout demo

package com.datamine.CollaborativeFiltering.mysql; import org.apache.mahout.cf.taste.impl.neighborhood.NearestNUserNeighborhood; import org.apache.mahout.cf.taste.impl.recommend......

xiaomin0322 ⋅ 18分钟前 ⋅ 0

red hat openstack 12配置要求

安装 openstack 之前,一般要规划整个系统中,到底要多少台机器来参与openstack, 根据rhosp12的官方文档: 最低要求是3台物理机,1台作为director,一台作为 controller ,一台作为computer....

tututu_jiang ⋅ 19分钟前 ⋅ 0

Rocket-Chip在GitHub上的各个源码

在github上通过搜索Rocket-chip可以得到36个结果:其中 https://github.com/freechipsproject/rocket-chip https://github.com/ucb-bar/riscv-boom https://github.com/ucb-bar/fpga-zynq (......

whoisliang ⋅ 24分钟前 ⋅ 0

【HAVENT原创】CentOS 6.5 下 Nginx 的安装与配置

nginx是轻量级的Web服务器、反向代理服务器及邮件服务器,具有占用内存少,并发能力强的优点,已被广泛应用。本文介绍目前最新版本 1.12.2 的安装。 各版本nginx下载地址:http://nginx.org/...

HAVENT ⋅ 30分钟前 ⋅ 0

查看linux系统重启之前的log -- last_kmsg

当 Linux Kernel 出现 BUG 的时候,后走入 panic flow,这个时候由于 Kernel 出现了严重的问题,adbd 也无法响应 adb 连接请求,这个时候想透过读取 Kernel Log Buffer 来看 Kernel Log 是不...

zyzzu ⋅ 31分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部