打算自己封装一个ajax方法,再不用jq库的情况下,直接引用: ajax作用:数据交互,在不刷新页面的情况下,发送请求,获取数据: 首页第一步常见一个ajax对象:XMLHttpRequest,之后会用这个对象的属性和方法完成一个数据交互的过程: 1.open方法: 参数:打开方式(post和get).地址.是否异步(异步:非阻塞,前面的代码不会影响后面代码的执行:同步:阻塞,前面的代码会影响后面代码的执行) 2.send方法 发送请求 3.onReadyStateChange事件:当状态值re

/*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type   string   请求的方式  默认是get * 2. url    string   请求地址  接口地址 * 3. async  boolean  默认的是true * 4. data   object   {}请求数据 * * 5.success function  成功回调函数 * 6.error   function  失败的回调函数 * */ $.ajax

父类 function Person(name,age){ this.name = name; this.age = age; } Person.prototype = { eat:function(){ console.log(this.name+"正在吃饭..."); }, sang:function(){ console.log(this.name+"正在唱歌..."); } } var liuyu = new Person("刘雨", 2

一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = new XMLHTTPRequest(); xhr.open("method", "url", "async"); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readystat

调用AJAX 1 <script type="text/javascript" src="ajax.js"></script> 2 <script type="text/javascript"> 3 //调用包装好的ajax方法 4 ajax({ 5 method : "get", 6 url : "get.php", 7 asyn : true, 8 data : &q

小程序中,我们一般习惯把提交接口请求的方法放在一个公共js里面.下面是一个简单实现. (1)我们把所有请求的地址都放在一个json里面 var postAddress = { "domin": "http://www.baidu.com", //域名 "getOpenId": "/index/getOpenId", //登录获取用户信息 "orderlist": "/business/orderl

function ajax(data){ //第一步,创建XHR对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();//标准的浏览器 }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP');//万恶的IE浏览器 } //第二步,准备发送前的一些配置文件 var type = data.type == 'get' ? 'get' : 'post'; var

你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 你是否发现fetch好像比ajax好用那么一点 你是否想过自己封装个ajax....   纯前端写得久了,便想折腾点事情.比如先定一个小目标,年前自己写个类jquery轻量级库....   那么就从自己封装一个ajax切入吧,首先我整理的一个流程图,一目了然 解析参数数据 通常我们的请求后面会有一些

在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的正确与否.这儿也将ajax请求进行了封装,当我们在项目中需要多次ajax请求时,就可以用封装的函数了,不用每次都写ajax请求,提高了代码的利用率和工作效率.当然封装得不一定很完美,网上也有很多优秀的封装好的ajax请求.也是通过闭包思想,具体的封装思路,在代码注释中也写得很详细了 这是封装的aja

你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 你是否发现fetch好像比ajax好用那么一点 你是否想过自己封装个ajax....   纯前端写得久了,便想折腾点事情.比如先定一个小目标,年前自己写个类jquery轻量级库....   那么就从自己封装一个ajax切入吧,首先我整理的一个思维导图,一目了然 解析参数数据 通常我们的请求后面会有一

//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataType:"json"/"jsonp", // url:"地址", // data:{key:value} // success:function(){ // } // } //还需要一个跨域方法,可以访问远程服务器的数据 function myAja

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

http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就需要用原生JS写一个ajax函数了. /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请

在实际的项目里,ajax的应用频率很高,所以尽管jquery或者其他的一些类似的js库做了非常不错的封装,仍然有进一步封装简化的空间和必要 举一个例子,很久很久以前,我的ajax是这么写的: $.ajax({ url: 'www.baidu.com/getInfo', type: 'POST', data: { name: 'jack', age: 18 }, dataType: 'json', success: function(resp){ // callback }, error: fun

当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('pa

自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek(date){ //将字符串日期转换日期对象 date = date.replace(/-/g, '/'); var dd = new Date(date); var curDate = new Date(); var curDate2 = new Date(); var m = dd.getMon

//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in data){ if(!data.hasOwnProperty(k)) continue; if(typeof data[k] == 'function') continue; var value = data[k].toString(); var key = encodeURIComponent(k);

JavaScript封装一个函数效果类似内置方法concat() 首先回忆concat()的作用: concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 语法 arrayObject.concat(arrayX,arrayX,......,arrayX): 封装函数参考代码: 1 function likeConcat() { 2 3 function aPush(arr) { 4 for (let i = 0; i < arr.length

/** * post 方法 */ function ajaxPost(url, params, callBack) { ajax(url,params,"post",callBack); } /** * get 方法 */ function ajaxGet(url, params, callBack) { ajax(url,params,"get",callBack); } /** * ajax 方法 */ function ajax(url, params, me

json文本格式 { "userInfo":[ {name:"admin",password:"123"}, {name:"admin1",password:"123"} ] } js: window.onload=function(){ var txtName=..; var txtPwd=..; var url="Login.aspx?name="+txtName.value+&qu