这次,我们聊聊ajax的创建过程

身为一枚前端,在项目中和后台的交互简直太频繁了。项目中,一直在使用的是jQuery中封装好了的$.ajax()的方法,这个方法大家一定非常熟悉了,具体使用的格式参数等这里不再赘述,今天要详细说的是ajax的创建过程。

ajax:一种客户端向服务器请求数据的方式,不需要去刷新整个页面; ajax的核心:XMLHttpRequest对象

下面是我简单封装的一个函数:

<script>
	ajax({
		url:'',    //请求地址
		type:"POST",     //请求方式
		data:{name:'linda',age:24},      //请求参数
		dataType:'json',
		success:function(reponse,xml){
			//此处放成功后执行的代码
		},
		fail:function(status){
			//此处放失败后执行的代码
		}
	});

	function ajax(options){
		//第一步,创建一个XHR对象,也即一个异步调用的对象
		function createXHR(){
			var xhr;
			//非IE6
			if(typeof XMLHttpRequest != 'undefined'){
				xhr = new XMLHttpRequest();
			}
			//IE6及以下版本浏览器
			else if(typeof ActiveXObject != 'undefined'){
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			else{
				xhr = null;
			}
			return xhr;
		}

		var xhr = createXHR();

		//第三步,设置相应HTTP请求的状态变化函数
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				if(xhr.status>=200 && xhr.status<=300 || xhr.status == 304){
					options.success(xhr.responseText,responseXML);
				}
				else{
					options.fail(xhr.status);
				}
			}
		}

		//第二步,创建一个新的HTTP请求,并设置请求的方式、URL,是否异步。
		//第四步,发送HTTP请求
		if(options.type == 'GET'){
			xhr.open('GET',addURIParams(options.url,options.params),true);
			xhr.send(null);
		}
		else if(options.type == 'POST'){
			xhr.open('POST',url,true);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send(options.params);
		}

		function addURIParams(url,data){
			for(var name in data){
				url += (url.indexOf('?') == -1 ? "?" : "&");
				url += encodeURIComponent(name)+ '=' + encodeURIComponent(data[name]);
			}
			return url;
		}
	}
</script>

1.创建

1.1、IE7及其以上版本中支持原生的 XHR 对象,因此可以直接用:

 var oAjax = new XMLHttpRequest();

1.2、IE6及其之前的版本中,XHR对象是通过MSXML库中的一个ActiveX对象实现的。有的书中细化了IE中此类对象的三种不同版本,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0;个人感觉太麻烦,可以直接使用下面的语句创建:

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

2.连接和发送

2.1、open()函数的三个参数:请求方式、请求地址、是否异步请求(同步请求的情况极少,至今还没用到过);

2.2、GET 请求方式是通过URL参数将数据提交到服务器的,POST则是通过将数据作为 send 的参数提交到服务器;

2.3、POST 请求中,在发送数据之前,要设置表单提交的内容类型;具体来说是这样的:默认情况下,服务器对POST请求和提交WEB表单的请求并不会一视同仁。因此,服务器必须有程序来读取发送过来的原始数据,并从中解析出有用的部分。不过,我们可以使用XHR来模仿WEB表单提交。首先将Content-Type头部信息设置成:application/x-www-form-urlencoded,也就是表单提交时的内容类型,其次是以适当的格式创建一个字符串,发送HTTP请求。

2.4、提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码,实际上在参数列表”key=value”的形式中,key 和 value 都需要进行编码,因为会包含特殊字符。

encodeURI() :用于整个 URI 的编码,不会对本身属于 URI 的特殊字符进行编码,如冒号、正斜杠、问号和井号;其对应的解码函数 decodeURI(); encodeURIComponent() :用于对 URI 中的某一部分进行编码,会对它发现的任何非标准字符进行编码;其对应的解码函数 decodeURIComponent();

3.接收

3.1、接收到响应后,响应的数据会自动填充XHR对象,相关属性如下 responseText:响应返回的主体内容,为字符串类型; responseXML:如果响应的内容类型是 “text/xml” 或 “application/xml”,这个属性中将保存着相应的xml 数据,是 XML 对应的 document 类型; status:响应的HTTP状态码; statusText:HTTP状态的说明;

3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段,这个属性的值如下 0-未初始化,尚未调用open()方法; 1-启动,调用了open()方法,未调用send()方法; 2-发送,已经调用了send()方法,未接收到响应; 3-接收,已经接收到部分响应数据; 4-完成,已经接收到全部响应数据;

只要 readyState 的值变化,就会调用 readystatechange 事件,(其实为了逻辑上通顺,可以把readystatechange放到send之后,因为send时请求服务器,会进行网络通信,需要时间,在send之后指定readystatechange事件处理程序也是可以的,但为了规范和跨浏览器兼容性,还是在open之前进行指定吧)。

3.3、在readystatechange事件中,先判断响应是否接收完成,然后判断服务器是否成功处理请求,xhr.status 是状态码,状态码以2开头的都是成功,304表示从缓存中获取。

4.ajax请求是不能跨域的!

上述是我参考了《javascript高级程序设计》以及网上多方资料总结出来的,如果有错误,欢迎大家指正~~~

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第113天:Ajax跨域请求解决方法

第五步:在监听函数中,判断readyState=4&&status=200表示请求成功

19210
来自专栏JadePeng的技术博客

axios介绍与使用说明 axios中文文档

本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考。 Axios 是一个基于 Promise 的 ...

3K90
来自专栏Java架构师进阶

架构师进阶之路精选之Redis Lua脚本原理

2.6版本之后支持嵌入Lua脚本,客户端使用Lua脚本,直接在服务器端原子的执行多条命令

29340
来自专栏和蔼的张星的图像处理专栏

1.Win10+VsCode的C/CPP编译环境搭建

我是从开始学C++的时候就一直用的是visual studio,毕竟宇宙第一IDE,写和调试都是超级方便快捷,唯一的缺点可能就是启动慢一点。 之前电脑没有换固...

89160
来自专栏张戈的专栏

Linux运维工程师:30道面试题整理

前段时间,我在准备面试的时搜到的一套 Linux 运维工程师面试题,感觉比较全面,一直保存在草稿,刚在整理后台时翻了出来,干脆就发出来好了,以备不时之需。 1....

2.3K50
来自专栏佳爷的后花媛

php基础(一)

static 是静态变量,在局部函数中存在且只初始化一次,使用过后再次使用会使用上次执行的结果; 作为计数,程序内部缓存,单例模式中都有用到。

28020
来自专栏北京马哥教育

案例+解读,来自有道大神的17个常用Linux命令深度解析

命令后带(Mac)标记的,表示该命令在Mac OSX下测试,其它的在Debian下测试。 1. grep命令 文本查找命令, 能够使用正则表达式的方式搜索文本...

34650
来自专栏程序员宝库

走进 Redis:Redis 的安装、使用以及集群的搭建

一、Redis的安装 Redis的安装是很简单的,安装之前我们需要c语言的编译环境。如果没有gcc需要在线安装。 yum install gcc-c++。 安装...

358120
来自专栏ml

web基础之Structs(一篇)

为什么有 struts 框架 Struct 的优点之处: 1.       struct的好处 2.       程序更加规范化 3.       程序的可...

40380
来自专栏菜鸟计划

跨域请求的常用方式及解释

同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个域加载的脚本去获取另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与...

36990

扫码关注云+社区

领取腾讯云代金券