ajax-------封装 - 相关文章

Javascript:来一个AJAX封装函数

前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有 jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似…

妹味6：ajax与ajax封装

(功能)ajax能且仅能从服务器读取文件 (环境)需要服务器环境才能测试,可以用工具建立本地服务器环境 (缓存)解决缓存问题:url加时间戳让每次请求地址唯一,如 url='abc.txt?t='+new Date().getTime(); (编码)请求的文件必须与网页的编码一致,否则乱码 (处理)eval()处理请求结果很方便,自动分割.但据说eval有很多问题,除了ajax中,其它地方暂时不要乱用. (实例)请求数据并在同一个块内显示.json数据处理.分页数据请求 ajax函…

ajax请求原理及jquery $.ajax封装全解析

.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得请求数据.要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解. XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术.简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户.达到无刷新的效果. 所…

Ajax封装函数笔记

Ajax封装函数: function ajax(method, url, data, success) { //打开浏览器 //1.创建一个ajax对象 var xhr = null; try { xhr = new XMLHttpRequest(); //正常浏览器 } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); //兼容IE6以下 } //2.在地址栏输入地址,提交发送请求:open方法,send方法//open方法有三…

原生ajax封装，包含post、method方式

原生ajax封装,包含post.method方式 function ajax(method, url, data, success) { var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //get时,且数据存在,URL需要用?连接 if (method == 'get' && data) { url += '?' +…

Ajax工作原理和原生JS的ajax封装

前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌也会有尘埃落定的时候,但对ajax而言,似乎并不如此. 正文: 一,定义:Asynchronous JavaScript and XML,意思是异步JS和XML: 解释下异步,异步是相对于同步来说的,同步即同时进行(累积多了就排队,一个一个执行,必须等上一个结束,才能到下一个),而异步就是执行到我了…

我的前端工具集（六）Ajax封装token

我的前端工具集(六)Ajax封装token liuyuhang原创,未经允许禁止转载在单点登陆中,或登陆验证后,不应该每次都验证用户名和密码, 也不应该将用户名密码存入cookie中(虽然很多都这么做) token作为一种验证策略,实现起来比较简单,也可以找一些单点登陆的框架,或者token解决方案. 本文工具使用REST风格,将ajax经过简单封装,使得所有使用此封装后的ajax都默认进行token验证. 1.封装的ajax代码 /** * 封装ajax代码 */ var local =…

AJAX - 封装的传参改为传入对象 XML JSON 数据格式

Ajax封装函数,上次是直接传参,这次在原来的基础上改进,模仿jQuery 直接传入对象,把之前的参数都变为这个对象的属性. 这样可以随意调换传入数据的次序. 其他优点? 需要再复习一下. Ajax处理后台传的数据主要有下面几种: 1. 直接用PHP写的数据,缺点是比如数据中有字符,而切割字符时用的是同样的符号,就会导致出错. 2. XML 开头必须写 <?xml version="1.0" encoding="UTF-8" ?> 所有内容必须包裹在…

简单的基于promise的ajax封装

基于promise的ajax封装 //调用方式: /* ajaxPrmomise({ url:, method:, headers:{} }).then(res=>{}) */ ;(function(window){ //设置默认的参数配置项 let _default = { url:'', baseURL:'', method:'GET', params:null, //get请求基于问号传参方式传递给服务器的内容 headers:{}, timeout:500, dataType:'json…

ajax 封装（集中认证、错误、请求loading处理）

一.为什么要对 ajax 进行封装: (在使用antd pro 开发项目时,里面默认是把请求进行了封装的,放在 utils/request.js 中.使用起来非常方便 https://pro.ant.design/docs/server-cn ) 1.便于统一处理 POST,GET 等请求参数,请求头,以及错误提示信息等.甚至 loading处理 . 2.一个项目中请求头.错误处理.loading 处理一把都是一样的.封装之后,层次结构清晰:代码减少,且页面中的逻辑只要关心对应的逻…

前后端数据交互(三)——ajax 封装及调用

有很多框架已经将 ajax 封装,需要的时候只需要调用就好,比如 jquery 是最常用的.我们为什么还需要学习 ajax 的封装呢?首先加强我们对ajax的认识,其次如果只是因为ajax请求需要引入框架,我们可以自己封装一个,这样就不需要引入多余的框架了. 一.封装的注意点封装是为了把相同的部分都实现公用,节省资源,提高代码复用性,工作效率也高,所以需要把不同的参数事件类型等通过调用的时候传入,需要注意点有: 1.1.传参发送 ajax 请求时,主要参数有: 请求url 请求类型请求参数…

简单的ajax封装

// ajax发送post请求返回 json 数据function requestJSON(params) { params.dataType = 'json'; sendPost(params);} // ajax发送post请求返回 string字符串function requestString(params) { params.dataType = 'text'; sendPost(params);} // ajax发送post请求function sendPost…

2、.net NVelocity中原生javascript ajax封装使用

在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性 xmlhttp.open("POST", "AJ…

ajax封装

/** * ITCAST WEB * Created by zhousg on 2016/5/24. */ /* * 1. 请求的类型 type get post * 2. 请求地址 url * 3. 是异步的还是同步的 async false true * 4. 传输的数据 data json对象 * * 5.响应成功处理函数 success function * 6.响应失败的处理函数 error function * * 这些都是动态参数参数对象 options * */ /*封装一个函…

jQuery Ajax封装（附带加载提示和请求结果提示模版）

1.创建HTML文件(demo) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery Ajax</title> <script type="text/javascript" src="jquery-3.2.0.min.js"></sc…

ajax封装函数和表单序列化

//表单序列化function iSerialize(form){ var parts={}; for(var i=0;i<form.elements.length;i++){ var filed=form.elements[i]; switch(filed.type){ case undefined: case "submit": case "reset": case "file": case "button": br…

试试自行封装AJAX和jQuery中的ajax封装的基本使用

封装的套路: 1.写一个相对比较完善的用例2.写一个空函数,没有形参,将刚刚的用例直接作为函数的函数体3.根据使用过程中的需求抽象函数代码记录如下: <script> function ajax (method,url,params,done) { method=method.toUpperCase(); var xhr=new XMLHttpRequest(); var tempArr=[]; if (typeof params=== 'object') { for(var key in…

Promise实战AJAX封装

一.利用Promise的知识,对最开始的ajax的例子进行一个简单的封装: var url = 'xxx'; // 封装一个get请求的方法 function request(url){ return new Promise(function(resolve,reject){ var XHR = new XMLHttpRequest(); XHR.open('GET',url,true); XHR.send(); XHR.onreadystatechange = function(){ if(X…

Ajax学习（二）：模仿jQuery的Ajax封装工具

通过上一节的学习,基本了解Ajax的使用, 但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用. 模仿jQuery的Ajax. 如下是jQuery的Ajax使用,只需要传入相应参数,即可实现Ajax 第一步:创建Ajax工具类: function createXMLRequst(){ try{ return new XMLHttpRequest(); }catch(e) { try{ return new ActiveXObject("Ms…

JS 实现AJAX封装（只限于异步）

1.AJAX 分为异步和同步请求比如你去买一个食品,但是商店暂时没有这个食品异步:等到商品有了再来买,这个期间我可以去做别的事: 同步:一直在这里等,什么时候商品来了,买到手了,再去做别的事; 下面我写了一个封装的函数,作为了解,使用的话建议使用JQ的AJAX function Ajaxget(option,fnSucc,fnFaild){ /*url 请求路径 getOrPost get还是post请求 str post发送的字符串 fnSucc 成功函数 fnFaild 失败函数…

原生 Ajax 封装和 Axios 二次封装

AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允许JavaScript在浏览器上执行. 兼容性封装 XMLHttpRequest 对象 // 创建构造函数 function Ajax(obj) { this.url = obj.url ||''; this.type = obj.type || 'get'; this.data = obj.d…

原生js 的ajax封装

/** * 封装ajax函数(包括跨域) * @method ajax * @param option :{type:"post" or "get" 请求方式,url:"url" 请求地址,data:object 请求参数,async:"true" 异步or“false”同步,success:function 请求成功回调函数,error:function,请求失败函数,jsonp:"true" 表示跨域…

六十六：CSRF攻击与防御之CSRF防御之ajax防御和ajax封装

app里面还是要绑定CSRFProtect from flask_wtf import CSRFProtect # flask_wtf 已经提供CSRF的防御手段CSRFProtect(app) # 绑定app 登录页的js $(function () { $('#submit').click(function (event) { event.preventDefault(); // 阻止默认form提交表单行为 var email = $('input[name=email]').val();…

Ajax,ajax封装

/** * Created by liyinghao on 2016/8/23. */ /*仿jQuery中的ajax方法,简单版实现;封装ajax的工具函数*/ /* * 1 请求方式 type get post 默认是get方式 * 2.接口地址 url 都是地址默认的是当前地址 * 3.是否异步 async true false 默认的true 异步请求 * 4.请求数据 data {}对象形式默认是空对象 * * * 5.成功回调函数(成功需要做的事情) success * 6.失败…

原生ajax封装及用法

/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 * @param {object}opt.data 发送的参数,格式为对象类型 * @param {function}opt.success ajax发送并接收成功调用的回调函数 */ funct…

【ajax-------封装】的更多相关文章