prototype.js ajax.request,结合prototype和xmlhttprequest封装ajax请求

最新推荐文章于 2025-03-14 10:36:00 发布
最新推荐文章于 2025-03-14 10:36:00 发布
阅读量387 收藏
点赞数
文章标签： prototype.js ajax.request
这篇博客探讨了JavaScript中的原型对象作用，通过实例展示了如何为String和Date对象添加自定义的format方法。此外，详细介绍了XMLHttpRequest对象及其在处理Ajax请求中的应用，包括响应体的解析和类型。博主还分享了自己封装的Ajax请求函数，强调了对原生Ajax的理解和复用性的重要性，并给出了实际使用示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

由于拖延症的严重以及年前准备年会(借口*^__^*)

导致这个小的的思考  现在才算完成

再怎么说也算是上班以来带我的前辈第一次这么正式的给我出题

不管是出于尊重还是自我要求我都决定把它简要的记下来

......

1.了解prototype

原型对象的作用，就是定义所有实例对象共享的属性和方法。具体理解见实际操作中

2.给String Date等对象增加继承方法

要求结果：比如var date = "2016-01-01 00:00:00";date.format();要求输出"2016-01-01";

eg:

String.prototype.format = function(){

return this.substring(0,10);

};

var str1 = "2016-01-01 00:00:00";

alert(str1.format(str1));

3.了解xmlhttprequest，能发送及接受ajax，以及分析response对象

response属性为只读，返回接收到的数据体(即body部分)，他的类型可以是ArrayBuffer、Blob、Document、JSON对象、或者一个字符串。由XMLHttpRequest.responseType属性的值决定。

4.结合xmlhttprequest+prototype 自己封装一个请求

本以为信手拈来，就这样的随便的敷衍写了一下，发现各种对原生的ajax不熟悉

于是仔细的看了一下原生的ajax相关的各个属性，复习了下相关用法

同时也参照了一些网络博客综合一下，对ajax进行了简单的封装

XMLHttpRequest.prototype.ajax = function(type,url,data,success,error){

var _this = this;

if(typeof data == 'object'){

var tempStr = '';

for(var key in data){

tempStr += key + '=' + data[key] + '&';

}

data = tempStr.replace(/&$/,'');

}

if(type = 'GET'){

if(data){

this.open('GET',url + '?' + data, true);

}else{

this.open('GET',url + '?version=' + Math.random(),true);

}

this.send();

}else if(type == 'POST'){

this.open('POST',url,true);

this.setRequestHeader("content-type","application/x-www-form-urlencoded");

this.send(data);

}

this.onreadystatechange = function () {

if(this.readyState == 4){

if(this.status == 200){

success(this.responseText);

}else{

if(error){

error(this.status);

}

}

}

}

};

//ajax test

var xhr = new XMLHttpRequest();

xhr.ajax('GET','https://secure.ec.qa.sunyuki.com/v0/items/11111',null,function(data){

alert(data);

});

JS利用XMLHttpRequest拦截ajax请求

function XMLHttpRequestBreak(fun=()=>false){ let f = XMLHttpRequest.prototype.open; let add = fun ...

jQuery-实现简单的Ajax请求封装

封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

封装ajax库，post请求

http状态码406是服务器无法根据客户端请求的内容特性完成请求 //整站功能方法库封装ajax请求,这里只针对post var methods = { //全站ajax请求状态处理 ajax: fu ...

封装Ajax和跨域

目录 引言 封装ajax 案例:使用自封装ajax 案例:动态加载瀑布流 跨域 引言 对于Ajax现在相信大家已经不会陌生了,无论是原生的XMLHttpRequest方式发送还是通过jQuery框架中 ...

ajax请求加全局loading , 个别特殊请求不显示loading

项目中,请求开始前加载loading遮罩层,请求结束关闭遮罩,一般都会加在全局中,但有个别请求不需要加全局loading 的话,这时候就需要对这些请求进行配置 全局加loading: ; functi ...

前后台交互ajax请求模块

下载依赖包axios npm i axios -d //在packge.json内配置proxy,配置请求基础路径 "proxy":"http://localhost:5 ...

<day001>存储到Mysql、mongoDB数据库+简单的Ajax请求+os模块+进程池+MD5

任务1:记住如何存储到Mysql.mongoDB数据库 ''' 存储到Mysql ''' import pymysql.cursors class QuotePipeline(object): def ...

js封装ajax的方法

常用的ajax请求方法封装 /** * ajax请求的封装代码 */ function ajaxPost(url, params, cb) { $.ajax({ type : 'post', url ...

JavaScript使用浏览器内置XMLHttpRequest对象执行Ajax请求

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject).XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个 ...

随机推荐

获取Linux进程运行在哪个CPU内核上面的方法

首先,当某些时候,在一段程序或者借助第三方软件进行程序协助的时候,在性能的优化,以及程序bug的排除上面,可能会想知道该程序执行的进程被调度到了哪一个CPU内核进行工作,从而可以推断是否是受限于硬件还 ...

C#基于Office组件操作Excel

1.    内容简介 实现C#与Excel文件的交互操作,实现以下功能: a)     DataTable 导出到 Excel文件 b)     Model数据实体导出到 Excel文件[List&l ...

android自定义view仿照MIUI中音量控制效果

先看效果图: 这就是miui中的音量效果图,实现思路是自定义视图,绘制圆环,然后设置进度显示. 核心代码在onDraw中实现如下: @Override protected void onDraw(Ca ...

005医疗项目-模块一：用户的查找：1.用户表查询的sql语句

这是医疗项目的第一个模块:做一个用户的查询,可以根据用户的账号,用户的名称,单位的名称,用户的类型去查询.要求效果如下:

[编解码] 关于base64编码的原理及实现

转载自: http://www.cnblogs.com/hongru/archive/2012/01/14/2321397.html [Base64]-base64的编码都是按字符串长度,以每3个8b ...

【BZOJ】【1202】【HNOI2005】狡猾的商人

Orz iwtwiioi  http://www.cnblogs.com/iwtwiioi/p/3887617.html 并查集+前缀和 啊……这题应该是水题吧?但是我这个大沙茶居然一天都没想出来…… ...

2013第50周二eclipse工具尝试

今天更深入的认识了eclipse开发工具,出现了各种问题在网络的帮助下最终都解决了,感觉似乎明白了很多道理需要总结一下,现在发现晚了,那就先记录下我印象深的几个问题吧: 1.eclipse编辑器设置. ...

Delphi 常用API 函数(好多都没见过)

AdjustWindowRect 给定一种窗口样式,计算获得目标客户区矩形所需的窗口大小AnyPopup 判断屏幕上是否存在任何弹出式窗口ArrangeIconicWindows 排列一个父窗口的最小 ...

.net-一般处理程序及生命周期

IsReusable属性用来表示在IHttpHandlerFactory对象创建IHttpHandler的时候是否能够将这个Handler存入池中以便重用. 一般处理程序(HttpHandler):是 ...

STL源代码剖析 容器 stl_hashtable.h

本文为senlie原创.转载请保留此地址:http://blog.youkuaiyun.com/zhengsenlie hashtable ------------------------------------ ...

Prototype.js的Ajax对象 - 强大的异步请求处理工具
CgbAutoit的博客
09-23 82
无论是发送简单的GET请求还是复杂的POST请求，Prototype.js的Ajax对象都能满足需求，并提供了许多高级功能来增强开发体验。Prototype.js是一个流行的JavaScript库，提供了许多实用的功能，包括一个强大的Ajax对象，用于简化和优化异步请求的处理。在上面的示例中，我们创建了一个新的Ajax.Request对象，并指定了请求的URL和请求方法（在这种情况下是GET）。在上面的示例中，我们将请求方法设置为POST，并通过parameters选项指定了要发送的数据。
prototype.js简单实现ajax功能示例
11-27
Prototype.js 是一个 JavaScript 库，它为开发人员提供了一系列实用工具和方法，简化了前端开发，特别是处理 AJAX（异步JavaScript 和 XML）交互。在本文中，我们将探讨如何使用 Prototype.js 简化 AJAX 功能的实现...
javascript对XMLHttpRequest异步请求的面向对象封装
10-29
对XMLHttpRequest异步请求的面向对象封装,需要的朋友可以参考下。
prototype.js之ajax.request学习笔记(一)
zth603的专栏
07-24 1755
<br />这二天用prototype.js中的ajax.request做了些东西,闲时看了下源码,体会如下：<br />　　在用AJAX部分前，有如下一些函数得了解一下：<br />　　Class变量var Class = {<br />  create: function() {<br />    return function() {<br />      this.initialize.apply(this, arguments);<br />    }<br />  }<br />}<br /><
网页注入js代码实现获取请求的url和请求体内容，并获取响应体内容
最新发布
03-14 676
效果如图所示，可以拦截网页中所有的http请求并获取响应体内容，将里面的信息都打印到控制台显示出来，这个可以用于注入任何网页里面，例如使用浏览器插件注入这个代码，就可以获取网页的所有数据，还是很厉害的具体的代码讲解逻辑和是对象的两个核心方法，用于发起 HTTP 请求。
prototype.js ajax.request,prototype
weixin_32431435的博客
08-05 325
在JavaScript中，prototype对象是实现面向对象的一个重要机制。每个函数就是一个对象(Function)，函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。中文名实现面向对象机制外文名prototype性质JS对象应用JavaScript人物Sam Stephensonpro...
prototype.js ajax.request,prototype.js之ajax.request学习笔记(一)
weixin_42659791的博客
08-05 381
这二天用prototype.js中的ajax.request做了些东西,闲时看了下源码,体会如下：在用AJAX部分前，有如下一些函数得了解一下：Class变量varClass={create:function(){returnfunction(){this.initialize.apply(this,arguments);}}}initialize相当于构造器，和java的构造器...
prototype.js ajax.request,原生JS封装ajax以及request
weixin_30693337的博客
08-05 356
一、封装原生的xhr为ajax类xhr以及用法见之前的文章1、根据url确定请求的头部以及别的信息。var _headerConfig = {};if(url.indexOf('getcaptcha') !== -1) {_headerConfig = {Accept: 'image/png',responseType: 'arraybuffer',}} else if(url.indexOf('...
ajax:prototype.js很全的手册
03-06
1. **入门指南**：介绍如何引入Prototype.js库，并演示基本的DOM操作和Ajax请求。 2. **DOM操作**：详细讲解`Element`对象的各种方法，如`insert`、`replace`、`wrap`等，以及`Selectors API`，用于高效的选择和...
下载prototype.js：深入AJAX核心JavaScript功能
而prototype.js是一个流行的JavaScript框架，它增强了原生JavaScript的功能，实现了许多实用的对象原型扩展和便捷的JavaScript编程模式。该框架特别适用于那些希望通过简化DOM操作、Ajax调用以及其它常见开发任务来...
prototype 开发应用手册，笔记，prototype.js文件下载
03-01
1. Ajax对象：Prototype提供了一个全面的Ajax解决方案，包括`Ajax.Request`和`Ajax.Updater`等，它们封装了XMLHttpRequest对象，使得异步数据交互变得简单易用。 2. Delegation（委托）：Prototype的`Event.observe...
本人博客中涉及的prototype.js文件及本人从中提取的ajax库和封装函数
09-02
本人博客中所包含的prototype文件 ajax.js是本人从prototype-1.3.1.js提取的ajax库 为方便调用，本人另写了两个函式：mmAjaxUpdater和mmAjaxRequest，在实践中，这两个函数只兼容prototype1.3.1版本。因此对以上函数进行重写，现在已兼容所有版本的prototype.js，方便在项目开发中进行ajax调用。
XMLHttpRequest方法和属性API
02-27
XMLHttpRequest方法和属性API，介绍了XMLHttpRequest的方法和属性
基于js方法XMLHttpRequest封装方法
hhhhhhaa1的博客
07-12 1005
基于XMLHttpRequest对象封装的axjx函数。
XMLHttpRequest属性及prototype属性简介
weixin_40882674的博客
08-15 3542
XMLHttpRequest属性 length name arguments caller UNSENT OPENED HEADERS_RECEIVED LOADING DONE . . XMLHttpRequest.prototype的属性–列出主要属性 abort：资料说是调用该方法后 ， readyState变为0 。在readyState-时测试 ， 我测试结果readyState变为4 ...
XMLhttpRequest 封装
自由的天空
10-19 948
    部分资料来源于网上        1、xmlhttp.js       /***用于XMLHttpRequest(xhr)回调, 根据xhr的readyState*调用不同的函数*/function RequestListener() { /*     *当xhr.readyState = 0时调用     */ this.uninitialized = function () { };
XMLHttpRequest、prototype实现ajax
xqh2168的专栏
05-24 739
 注释很详细，不用单独说明。 其中index.jsp文件为：    xmlhttprequest ajax demo                var req; //定义变量，用来创建xmlhttprequest对象        function creatReq() // 创建xmlhttprequest,ajax开始        {         var user
Ajax----创建XMLHttpRequest对象和发送请求封装为两个js函数放在ajax.js中
m0_63064861的博客
05-15 168
【代码】Ajax----创建XMLHttpRequest对象和发送请求封装为两个js函数放在ajax.js中。
js 使用XMLHttpRequest 封装http请求并返回响应的信息,如果超时了,则返回字符串请求超时...
weixin_42590539的博客
02-15 909
好的，下面是使用XMLHttpRequest对象封装HTTP请求的代码示例，如果请求超时则返回字符串"请求超时"： function httpGet(url, timeout) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.timeout = timeou...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值