文档章节

javascript使用ajax请求具体步骤

IamOkay
 IamOkay
发布于 2014/11/13 22:22
字数 644
阅读 1411
收藏 4

javascript创建ajax请求的详细步骤,兼容IE,可设置请求头,超时,读取响应头。ajax其实是一种多线程机制+http网络请求机制,也可以认为是前端http网络编程。

  1. 创建ajax XHR对象

window.onerror = function(e) //屏蔽错误
{
    if(!!window.console)
    {
	window.console.log(e);
    }
}

function createAjax()
{
  var xhr = null;
  if(!!window.XMLHttpRequest)
  {
       xhr = new window.XMLHttpRequest();
   }
   else
   { 
      try
        { //IE7+
	   xhr = new ActiveXObject("Msxml2.XMLHTTP");
	 }
	catch (e) 
	{
	    //IE6-
	    try { xhr = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) { } 
	}
   }
	return xhr;
}

2.创建请求头设置函数(注意,该函数必须在xhr.open之后调用,否则会出错)

//设置ajax请求头
function setAjaxHeaders(xhr,headers)
{
  if(typeof(xhr)=='object' && typeof(headers)=='object')
  {
       for (var name in headers) 
	{
	  if(typeof(headers[name])=='string')
	  {
	   xhr.setRequestHeader(name,headers[name]);
	   }
      };
    }

	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.setRequestHeader("x-request-with","xmlhttprequest");
  }

3.设置超时(注意:如果是异步请求,不允许设置超时时间,即超时只能等于0)

//设置请求超时
function setAjaxTimeout(xhr,millisecodes)
{
	if(typeof(xhr)=='object' && typeof(millisecodes)=='number')
	{
	    xhr.timeout = millisecodes;
	}
}

4.设置回调

//设置回调函数
function setAjaxCallback(xhr,success,failed,abort)
{
	if(typeof(xhr)=='object')
	{
		xhr.onreadystatechange = function(args)
		{
			if(xhr.readyState==xhr.DONE)
			{
				var respinfo = {
					'xhr':xhr,
					'status':xhr.status,
					'headers':xhr.getAllResponseHeaders(),
					 data:xhr.responseText
					};

				success(respinfo);
			}else{
				failed({'xhr':xhr,msg:arguments});
			}
		}
		xhr.ontimeout = function(args)
		{
			failed(arguments);
		}
		xhr.onabort = function(args)
		{
			abort({'xhr':xhr});
		}

	}
}

5.添加一些辅助函数

//请求参数拼接
function httpBuildQuery(data)
{
	var queryString = '';		

	if(typeof(data)=='object')
	{
		for (var name in data) 
		{
			if(typeof(data[name])=='string')
			{
			   queryString +=name+'='+data[name]+'&';
			}
		};
	}
	else if(typeof(data)=='string')
	{
	   queryString = data;
	}
	if(queryString.lastIndexOf('&')==0 && queryString.length>0)
	{
		queryString = queryString.substring.substring(0,queryString.length-1);
	}

     return queryString;
}

//参数扩展,类似jQuery.extend
function initParams(src,o)
{
	if(typeof(src)=='object' && typeof(o)=='object')
	{
	   for (var name in src) 
	   {
		  if(typeof(o[name])!='undefined' && typeof(o[name])!='function')
		  {
			src[name] = o[name];
		   }
	    };
	}

	return src;
}

6.发送请求

function sendAjaxRequest(xhr,url,settings)
{
	var params = {
		'method':'get',
		'sync':true,
		'timeout':15*1000,
		'headers':null,
		'data':null
	};

	params = initParams(params,settings);

	if(typeof(xhr)=='object')
	{
		//ajax异步请求不允许设置超时时间大于0
		 var times = params['sync']?0:params['timeout'];
		 setAjaxTimeout(xhr,times);
		 var  queryString =  httpBuildQuery(params['data']);

		if(params['method'].toUpperCase()=='GET')
		{
			if(url.indexOf('?')==-1)
			{
				queryString = '?'+queryString;
			}

			xhr.open('GET', url+queryString, params['sync']);
			if(xhr.readyState== xhr.OPENED)
			{
				setAjaxHeaders(xhr,params['headers']);
			}
			xhr.send(null);
		}else{
			xhr.open('POST', url, params['sync']);
			if(xhr.readyState== xhr.OPENED)
			{
				setAjaxHeaders(xhr,params['headers']);
			}
			xhr.send(queryString);
		}
	}
}

-------------------------------------

用法演示

var xhr = createAjax();
		
setAjaxCallback(xhr,function(args){
	console.log(arguments);
},function(args){
	console.error(arguments);
},function(args){
	console.info(arguments);
});
xhr.overrideMimeType('text/plain; charset=utf-8');
sendAjaxRequest(xhr,'http://localhost/search',{'data':{'keywords':'123'}});

-------------------------------------

貌似比jQuery有点复杂了,本来想着疯转成对象来着,时间原因,不封装了,有兴趣的读者可以修改修改,变成2中常用的方式

  1. 连缀函数式ajax请求

  2. ajax请求对象


try doing it


© 著作权归作者所有

IamOkay

IamOkay

粉丝 204
博文 483
码字总数 403228
作品 0
海淀
程序员
私信 提问
【转载】微信公众号获取用户地理位置并列出附近的门店

思路分析: 1、在微信公众号内获取用户地理位置 需要js-sdk签名包(关于如何获取文档有介绍) 2、根据获取的地理位置ajax去后台请求,通过sql语句,查询中距离最近的门店(sql语句在网上搜的...

php的小菜鸟
2017/07/21
0
0
放下Axios,手写纯原生Ajax通信接口

前言 axios作为vue框架中最常用的ajax工具包之一,可以与后台API接口进行通信,传送或接收数据,在前后端分离开发中,发挥了通信桥梁的重要作用。 虽然像axios这样的第三方工具包很好用,但是...

WebBoy
09/22
0
0
原生JavaScript实现AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要...

TGCode
09/29
0
0
简单透彻理解JSONP原理及使用

什么是JSONP 首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架...

菜鸟的进阶
2017/10/22
63
0
[译] 深入理解 Promise 五部曲:1. 异步问题

原文地址:http://blog.getify.com/promis... 在微博上看到有人分享LabJS作者写的关于Promise的博客,看了下觉得写得很好,分五个部分讲解了Promise的来龙去脉。从这篇文章开始,我会陆续把五...

lakb248
09/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部