首页 > 其他分享 >原生js实现http请求--模拟jquery的ajax函数

原生js实现http请求--模拟jquery的ajax函数

时间：2024-07-02 11:42:05浏览次数：22  
标签：jquery http 请求 request js var HTTP data name

 有时页面用到请求，但又不想引入jquery或者其他网络请求，增加代码冗余，增加对代码简便化，那不使用ajax情况下，可以直接使用原生js进行封装函数。原生的js通过XMLHttpRequest 对象进行的的。具体可查阅W3school的XMLHttpRequest 对象。

1、封装可供请求调用的函数

  1.   function httpRequest(paramObj,fun,errFun) {
  2.   var xmlhttp = null;
  3.   /*创建XMLHttpRequest对象，
  4.   *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP")
  5.   * */
  6.   if(window.XMLHttpRequest) {
  7.   xmlhttp = new XMLHttpRequest();
  8.   }else if(window.ActiveXObject) {
  9.   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.   }
  11.   /*判断是否支持请求*/
  12.   if(xmlhttp == null) {
  13.   alert('你的浏览器不支持XMLHttp');
  14.   return;
  15.   }
  16.   /*请求方式，并且转换为大写*/
  17.   var httpType = (paramObj.type || 'GET').toUpperCase();
  18.   /*数据类型*/
  19.   var dataType = paramObj.dataType || 'json';
  20.   /*请求接口*/
  21.   var httpUrl = paramObj.httpUrl || '';
  22.   /*是否异步请求*/
  23.   var async = paramObj.async || true;
  24.   /*请求参数--post请求参数格式为：foo=bar&lorem=ipsum*/
  25.   var paramData = paramObj.data || [];
  26.   var requestData = '';
  27.   for(var name in paramData) {
  28.   requestData += name + '='+ paramData[name] + '&';
  29.   }
  30.   requestData = requestData == '' ? '' : requestData.substring(0,requestData.length - 1);
  31.   console.log(requestData)
  32.    
  33.   /*请求接收*/
  34.   xmlhttp.onreadystatechange = function() {
  35.   if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  36.   /*成功回调函数*/
  37.   fun(xmlhttp.responseText);
  38.   }else{
  39.   /*失败回调函数*/
  40.   errFun();
  41.   }
  42.   }
  43.    
  44.   /*接口连接，先判断连接类型是post还是get*/
  45.   if(httpType == 'GET') {
  46.   xmlhttp.open("GET",httpUrl,async);
  47.   xmlhttp.send(null);
  48.   }else if(httpType == 'POST'){
  49.   xmlhttp.open("POST",httpUrl,async);
  50.   //发送合适的请求头信息
  51.   xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  52.   xmlhttp.send(requestData);
  53.   }
  54.   }

2、调用方法

  1.   /*请求参数*/
  2.   var paramObj = {
  3.       httpUrl : 'https://mp.csdn.net',
  4.       type : 'get',
  5.       data : {
  6.           name : 'xuexi',
  7.           sex : '学习'
  8.       }
  9.   }
  10.   /*请求调用*/
  11.   httpRequest(paramObj,function(respondDada) {
  12.       //这里编写成功的回调函数
  13.       console.log(respondDada)
  14.   },function() {
  15.       alert('网络错误')
  16.   });

总结：在简单的Html页面不需要引入额外的类库时，可以使用原生请求，或者是引入的库，不满足自己的需求时，可以使用原生来达到自己的需要，掌握原生是根本，其他都是变种;

 

2024-07-02 11:34:50【出处】：https://blog.csdn.net/u010774409/article/details/136671702

=======================================================================================

对原生HTTP请求的理解与总结

全手打原创，转载请标明出处：https://www.cnblogs.com/dreamsqin/p/10946165.html，多谢，=。=~

 

术语

HTTP：超文本传输协议，规定Web浏览器如何从Web服务器获取文档和向Web服务器提交表单内容，以及Web服务器如何响应这些请求和提交；

（HTTP不在脚本控制下，只当用户点击链接、提交表单、输入URL时发生。但是js可操纵HTTP，例如设置window对象的location属性、调用表单的submit()方法会初始化HTTP请求，页面会重新加载。）

Ajax：使用脚本操纵HTTP的Web应用架构，实现与Web服务器的数据交换，不会导致页面重载，客户端从服务器“拉”数据，可利用XMLHttpRequest对象实现；

Comet：使用脚本操纵HTTP的Web应用架构，与Ajax相反，服务器向客户端“推”数据，可利用EventSource对象实现；

XMLHttpRequest：定义了用脚本操纵HTTP的API；

（XMLHttpRequest对象支持包括XML在内的任何基于文本的格式，能用于HTTP和HTTPS请求，涉及HTTP请求或响应的所有活动）

 

XMLHttpRequest的使用

实例化（IE7及以后）：

var request = new XMLHttpRequest();

模拟XMLHttpRequest构造函数（IE5、IE6）：

复制代码 
if (window.XMLHttpRequest === undefined) {
    window.XMLHttpRequest = function() {
        try {
            return new ActiveXObject("MSXML2.XMLHttp.6.0");
        }
        catch (e1) {
            try {
                return new ActiveXObject("MSXML2.XMLHttp.3.0");
            }
            catch (e2) {
                throw new Error("XMLHttpRequest is not supported");
            }
        }
    }
}
复制代码

HTTP请求（请求的方法或动作、请求的URL、请求头、请求体）：

request.open("GET", "/log.php");    // 请求的方法、URL
request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");   // 请求头
request.send(null);   // 请求体

HTTP响应（数字+文字的状态码、响应头、响应体）：

复制代码 
request.onreadystatechange = function() {
    // HTTP的请求状态readyState
    // 0：open尚未调用
    // 1：open已调用
    // 2：接收到头信息
    // 3：接收到响应主体
    // 4：响应完成
    
    // HTTP状态码status
    // 2xx：代表请求已成功被服务器接收、理解、并接受
    if(request.readyState === 4 && request.status === 200) {
        // responseText属性：MIME类型的文本响应，如：text/css
        // responseXML属性：Document对象类型，如：XML、XHTML
        console.log(request.responseText);
    }
};
复制代码

 响应解码

复制代码 
request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        var type = request.getResponseHeader("Content-type");
        if (type.indexOf("xml") !== -1 && request.responseXML) {
            console.log(request.responseXML);   // Document对象响应
        } else if (type === "application/json"){
            console.log(JSON.parse(request.responseText));   // Json响应
        } else {
            console.log(request.responseText);   // 字符串响应
        }
    }
};
复制代码

 

请求主体编码（POST请求）

1、表单编码（对名字和值进行URL编码（即使用十六进制转义码替换特殊字符）、使用=分开编码后的名字和值、使用&连接名/值对）

PS：<input type="submit">定义用于向表单处理程序（form-handler）提交表单的按钮，自带表单编码功能。

POST请求必须设置请求头：

request.open("POST",url);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(encodeFormData(data));

 GET请求只需跟在url连接后即可：

request.open("GET", url + "?" + encodeFormData(data));
request.send(null);

表单编码函数encodeFormData：

复制代码 
// 对象属性的表单编码
function encodeFormData(data) {
    if (!data) return "";   // 如果data非对象则返回空字符串
    var paris = [];   // 保存名=值对
    for(var name in data) {
        if (!data.hasOwnProperty(name)) continue;   // 跳过继承属性
        if (typeof data[name] === "function") continue;   // 跳过方法
        var value = data[name].toString();   // 将值转换为字符串
        name = encodeURIComponent(name.replace("20%", "+"));   // 编码名字
        value = encodeURIComponent(value.replace("20%", "+"));   // 编码值
        paris.push(name + "=" +value);
    }
    return paris.join("&");   // 使用"&"连接名/值对
}
复制代码

2、JSON编码（使用JSON.stringify()方法）

request.open("POST",url);
request.setRequestHeader("Content-type","application/json");
request.send(JSON.stringify(data));

3、XML编码（send方法中传递XML Document对象）

<query>
    <find zipcode="02134" radius="1km">
        pizza
    </find>
</query>
复制代码 
function createXML(what, where, radius) {
    // Create an XML document with root element <query>
    var doc = document.implementation.createDocument("", "query", null);
    var query = doc.documentElement;   // <query>元素
    var find = doc.createElement("find");   // 创建<find>元素
    query.appendChild(find);   // 把<find>添加至<query>中
    find.setAttribute("zipcode", where);   // 设置<find>的属性
    find.setAttribute("radius", radius);
    find.appendChild(doc.createTextNode(what));   // 设置<find>的内容
    return doc;
}

// 会自动设置Content-type头
request.send(createXML("pizza", "02134", "1km"));
复制代码

4、文件上传

 HTML表单<input type="file">始终能上传文件；XMLHTTPRequest无法实现；XHR2可以通过向send()方法传入File对象实现（文件类型是更通用的二进制大对象Blob类型中的一个子类型）。

5、multipart/form-data请求

当HTML表单同时包含文件上传元素和其他元素时，必须使用Content-type为multipart/form-data的特殊方式提交表单，该编码使用长“边界”字符串把请求主体分离成多个部分。

XHR2定义了新的FormData API，容易实现多部分请求主体（使用FormData()构造函数创建FormData对象，然后按需多次调用这个对象的append()方法把个体的“部分”（字符串、File或Blob对象）添加到请求中）。

复制代码 
function createFormData(data) {
    if (typeof FormData === "undefined") {
        throw new Error("FormData is not implemented");
    }
    var formData = new FormData();
    for(var name in data) {
        if (!data.hasOwnProperty(name)) continue;
        var value = data[name];
        if (typeof value === "function") continue;
        formData.append(name, value);
    }
    return formData;
}

request.send(createFormData({user: "aaa", text: "bbb"}));
复制代码

 

HTTP请求无法完成的3种情况

1、timeout事件：请求超时；

2、abort事件：请求中止；

3、error事件：比如太多重定向这样的网络错误会阻止请求完成；

 

2024-07-02 11:38:09【出处】：https://www.cnblogs.com/dreamsqin/p/10946165.html

=======================================================================================

标签：jquery,http,请求,request,js,var,HTTP,data,name
From： https://www.cnblogs.com/mq0036/p/18279612

相关文章

  • CH02_JS变量和数据类型
    第2章：JS中的变量和数据类型本章目标掌握变量的概念掌握如何使用变量掌握javascript中的数据类型课程回顾js的三种使用方式？js的注释有那些？讲解内容1.为什么要使用变量？问题：人类是靠什么要记忆（记录数据）？大脑、作笔记等问题：计算机如果要保存数据，靠什么来保存？硬件......
  • 035基于SSM+Jsp的二手交易平台网站
    开发语言：Java框架：ssm技术：JSPJDK版本：JDK1.8服务器：tomcat7数据库：mysql5.7（一定要5.7版本）数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包：Maven3.3.9系统展示商家首页个人中心商品信息管理管理员登录管理员首页用户管理商家管理商品信息管理论坛管理......
  • Vue.js 安装
     1、独立版本我们可以在Vue.js的官网上直接下载vue.min.js并用 <script> 标签引入。2、使用CDN方法以下推荐国外比较稳定的两个CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。StaticfileCDN（国内） : https://cdn.staticfile.net/vue/2.2.2/vue.min.js......
  • Vue.js 目录结构
     上一章节中我们使用了npm安装项目，我们在IDE（Eclipse、Atom等）中打开该目录，结构如下所示： 目录解析目录/文件说明build项目构建(webpack)相关代码config配置目录，包括端口号等。我们初学可以使用默认的。node_modulesnpm加载的项目依赖模块src这里是我们要开发的目录，基......
  • js限制文本框输入数字
    <!--input只允许输入整数--><inputtype="text"name="a"onkeyup="value=value.replace(/[^\d]/g,'')"><!--input只允许输入整数和小数（小数只保留小数点后两位）--><inputtype="text"name="aa"onkeyup="......
  • ASP.NET Core如何使用HttpClient调用WebService
    原文链接：https://www.yisu.com/jc/691937.html我们使用VS创建一个ASP.NETCoreWebAPI项目，由于是使用HttpClient，首先在ConfigureServices方法中进行注入。public void ConfigureServices(IServiceCollection services){    // 注入HttpClient    services.AddHt......
  • PHP与js遍历的区别，PHP运行原理学习
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title><?phpecho'PHP的第一......
  • Three.js 给对象创建轮廓效果
    需求：1、选定某个对象后，给该对象一个整体轮廓效果。需求插件：Three.js，postprocessing，vue2实现方案：以前还是需要自己写的、现在可以直接用插件了，就是上面这个postprocessing插件，使用也蛮简单的，初始化好插件后、在需要使用的地方这样写就行this.outlinePass.selectedObjects=......
  • 【jQuery】ajax请求成功，状态却是200
    AJAX状态为200，这类状态代码表明服务器成功地接受了客户端请求。简单的来说成功发送一个AJAX请求，但是就是不进入success事件，进入error事件。$.ajax({type:'GET',url:'getEstimatePDFPath.php',headers:{"token":token},dataType:......
  • fastjson整理思路
    此处把常用的一些方法，简单做个记录。 做自动化时，我们发送一个请求，返回的是一个字符串。首先我们要把这个字符串转换为json对象  parseObject()：将JSON字符串解析为Java对象。 Stringjson="{\"person\":{\"name\":\"Ivy\",\"age\":60}}";JSONO......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99