原生封装的ajax

原生封装的ajax的代码如下:

//将数据转换成 a=1&b=2格式;

function json2url(json){

var arr = [];

//加随机数防止缓存;

json.t = Math.random();

for(var name in json){

arr.push(name+‘=‘+json[name]);

}

return arr.join(‘&‘);

}

function ajax(json){

//1.创建一个ajax对象;

if(window.XMLHttpRequest){

var oAjax = new XMLHttpRequest();

}else{

var oAjax = new ActiveXObject(‘Microsoft.XMLHTTP‘);

}

//考虑默认值:

if(!json.url){

alert(‘请输入合理的请求地址!‘);

return;

}

json.type = json.type || ‘get‘;

json.time = json.time || 5000;

json.data = json.data || {};

//判断用户传递的是get还是post请求:

switch (json.type.toLowerCase()){

case ‘get‘:

//2.打开请求;

oAjax.open(‘get‘,json.url+‘?‘+json2url(json.data),true);

//3.发送数据:

oAjax.send();

break;

case ‘post‘:

//打开请求;

oAjax.open(‘post‘,json.url,true);

//设置请求头;

oAjax.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);

//发送数据;

oAjax.send(json2url(json.data));

}

//4.获取响应数据

oAjax.onreadystatechange = function() {

if (oAjax.readyState == 4) {

if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {

//如果外边传递了成功的回调函数,那么就执行,

json.success && json.success(oAjax.responseText);

} else {

//如果外边传递了失败的回调函数,那么就执行,

json.error && json.error(oAjax.status);

}

clearTimeout(timer);//规定时间内取到数据后清除定时器;

}

};

var timer;

timer = setTimeout(function(){//设置网络响应超时;

alert(‘网络响应超时,请稍后再试‘);

oAjax.onreadystatechange = null;//网络超时后清除事件;

},json.time);

}

希望对大家有用

时间: 2024-10-12 04:25:04

原生封装的ajax的相关文章

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试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('path'

原生js实现ajax封装

一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来. 作用:提高用户体验,减少网络数据的传输量 二.ajax常见运用场景 表单验证是否登录成功.百度搜索下拉框提示和快递单号查询等等. 三.Ajax原理是什么 Ajax请求数据流程,其中最核心的依赖是浏览器提供的对象xhr,它扮演的角色相当于秘书,使得浏览器可以发出HTTP请求与接收H

通过原生js的ajax或jquery的ajax获取服务器的时间

在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间.客户端时间通过 javascript中的Date对象可以获取,如 Java代码   var dt = new Date(); var tm = dt.getTime(); 那么tm就是客户端的时间,另外也可以通过对应的getFullYear(),getMonth(),getDate()取到对应的年月日等...但这个时间可靠吗?好吧,那取服务器时间吧经常用到的是后台写一个php,jsp,cgi,asp..

用原生JavaScript写AJAX

//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求(告诉服务器我要什么文件)//4.接收返回值 下面是原生js写ajax的具体写法 <script> window.onload=function() { var oBtn = document.getElementById("btn1"); oBtn.onclick = func

原生 JavaScript 实现 AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据

原生Ajax-封装Ajax

一.XMLHTTPRequest Ajax技术核心是XMLHTTPRequest对象(简称XHR),是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现.在XHR出现之前,Ajax式的通信必须借助一些手段来实现,大多数是使用隐藏的框架或内嵌框架. Ajax,是Asynchronout JavaScript+XML的简写.这种技术能够向服务器请求额外的数据而无需卸载/刷新页面,会带来更好的用户体验. 1.支持原生XHR对象的浏览器创建XHR对象可以直接实例化XMLHTTPReques

原生js中用Ajax进行get传参

原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input{ width:600px; height:50px; display:block; } </style> </head> <body> <input ty

自己封装的Ajax - JavaScript

1. [代码][JavaScript]代码      //javascript Object: ajax Object//Created By RexLeefunction Ajax(url,data){    this.url=url;    this.data=data;    this.browser=(function(){          if(navigator.userAgent.indexOf("MSIE")>0) {              return &

封装一个Ajax工具函数

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