专栏首页前端技术总结这次,我们聊聊ajax的创建过程
原创

这次,我们聊聊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 条评论
登录 后参与评论

相关文章

  • 只知道ajax?你已经out了

    随着前端技术的发展,请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后春笋一般,蓬勃发展,本文主要想介绍其中的axios和...

    前端林子
  • 小结ES6基本知识点(一)

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门。

    前端林子
  • JS基础知识总结(四):作用域与闭包

    回顾下jQuery源码中,代码是包在(function(){//代码})()当中。主要的目的是希望里面的所有变量,不会暴露到外面,以防止变量全局污染,这就是函数...

    前端林子
  • 初学者必看Ajax的总结

    沈唁
  • Google打脸!利用外包公司继续训练AI武器,被讽明修原则暗搞外包

    而且就是因为Google参与该项目,内部抗议一波接一波,离职进谏者不计其数,近4000员工联名声讨。

    量子位
  • 如何无痛的为你的前端项目引入多线程

    导语 本文旨在介绍一种简单,优雅,代码侵入性小的web worker引入方式。能够在不影响现有业务逻辑的情况下,快速为你的前端项目引入多线程能力。 一、谈谈W...

    腾讯VTeam技术团队
  • 面试官问我:什么是高并发下的请求合并?

    ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍前段时间一个在深圳的,两年经验的小伙伴出去面试了一圈,收割了几个大厂 offer 的同时,还总结了一下面试的...

    why技术
  • 2019 篇 - 分享数百个 HT的工业互联网 2D 3D 可视化应用案例

    继《分享数百个 HT 工业互联网 2D 3D 可视化应用案例》2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客...

    HT for Web
  • 基于迭代单元的恢复余数开方器基于迭代单元的恢复余数开方器

    基于迭代单元的恢复余数开方器 基本算法 该开方器的算法与“手算”(以前并不知道开方还有这种手算的方法)算法相似,使用迭代解决,文字描述如下 将0为余数的初值a,...

    月见樽
  • 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇

    继《分享数百个 HT 工业互联网 2D 3D 可视化应用案例》2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客...

    HT for Web

扫码关注云+社区

领取腾讯云代金券