文档章节

原生XMLHttpRequest学习日志

尐桀
 尐桀
发布于 2014/11/07 16:54
字数 1017
阅读 400
收藏 4

今天决定学习一下Ajax异步的XMLHttpRequest对象,平时一直使用jQuery.ajax()就万事大吉,

当自己要实现一套时才发现当中的细节事情!jQuery源码真的博大精深优美得很;

先从w3cschool看一下基本的使用方式,参考的jQ版本是v1.11.1

http://www.w3school.com.cn/xml/xml_http.asp

基本流程是先做简单XMLHttpRequest兼容处理,提交请求,最后是回调处理结果;

setup1 配置

开始时候在想怎样才能写出优美的参数传值,看jQ源码发现是使用jQuery.extend,而且这函数在很多地方都在应用,看来分量很重噢;

手册介绍是用一个或多个其他对象来扩展一个对象,返回被扩展的对象;如果不指定target,则给jQuery命名空间本身进行扩展。

jQ是先定义了基本参数对象ajaxSettings#8830行开始;然后调用ajaxSetup方法,其实这货还是调用了jQuery.extend去合并对象;只是判断是否是扩展配置对象;

自己太赖了只做最简参数单合并和获取回调方法事情;

function ajaxSetup(opations) {
		if (typeof opations == 'object') {
			for (key in opations) {
			    //Code....
			}
		}
		return ajaxSetting;
	}

setup2

实例化XMLHttpRequest就交由两个方法isWindowXHR和isIEXHR,然后由JS自行判断使用哪一个;

这里基本没什么特别!jQuery基本也是这么干的!只是它还做了很多IE6~9的浏览器兼容代码(难关jQ2就放弃治疗它们)

        // Create the request object
        // (This is still attached to ajaxSettings for backward compatibility)
        jQuery.ajaxSettings.xhr = window.ActiveXObject !== undefined ?
	// Support: IE6+
	function() {

		// XHR cannot access local files, always use ActiveX for that case
		return !this.isLocal &&

			// Support: IE7-8
			// oldIE XHR does not support non-RFC2616 methods (#13240)
			// See http://msdn.microsoft.com/en-us/library/ie/ms536648(v=vs.85).aspx
			// and http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9
			// Although this check for six methods instead of eight
			// since IE also does not support "trace" and "connect"
			/^(get|post|head|put|delete|options)$/i.test( this.type ) &&

			createStandardXHR() || createActiveXHR();
	} :
	// For all other browsers, use the standard XMLHttpRequest object
	createStandardXHR;

我万恶地几行没养分的代码就好了!

        var xmlHttp = isWindowXHR() || isIEXHR();
        
	function isWindowXHR() {
		//Code....
	}

	function isIEXHR() {
		//Code....
	}

setup3 传值请求服务器和处理回调

这里jQ做了很多参数值的过滤、是否是跨域请求、head部分组装,是否跨域分开了好像是两部分处理(不知道有没有看错!代码太长了)

搜源码jQuery.ajaxTransport可以找到;

然后也是跟XMLHttpRequest流程定义调用send处理onreadystatechange在不同状态触发事件;

        //TODO:增加其他状态处理
	function stateChange() {
		if (xmlHttp.readyState == 4) {
			//Code....
		}
	}
	
	return {
		'ajax' : function(opations) {
			var settings = ajaxSetup(opations);
			if (xmlHttp !== null && settings) {
				xmlHttp.onreadystatechange = stateChange;
				switch(settings['type'].toUpperCase())
				{
					case 'POST':
						//Code....
					break;

					case 'GET':
						//Code....
					break;
				}
			} else {
				alert("Your browser does not support XMLHTTP.");
			}
		}
	};

在这次学习中发现一个很好的网站

whatwg.org

后来发现这家伙跟W3C是很有冤缘;

详细看这里《哪个HTML5?WHATWG与W3C或分道扬镳》

http://www.cnblogs.com/xesam/archive/2012/07/23/2604254.html


完整代码:

index.html

<DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="xhr.js"></script>
	</head>
	<body>
		<input type="button" id="gTime" value="获取服务器时间" />
		<div id="serTime">00:00:00</div>
	</body>
</html>
<script type="text/javascript">
	gTime.addEventListener("click", function(){
		$.ajax({
			type: "POST",
			url: "xmlHttpRequestAction.php",
			dataType : 'json',
			async : true,
			data: "name=John&location=Boston",
			success : function(msg) {
				var obj = eval('(' + msg + ')');
				serTime.childNodes[0].nodeValue = obj.date;
				console.log(obj);
			}
		});
	}, false);
</script>

xhr.js

var $ = (function(Global){

	var xmlHttp = isWindowXHR() || isIEXHR();

	var callback = {};

	var ajaxSetting = {
		//TODO:过滤地址符号,例如结尾的"/"
		'url'   : location.href,
		'type'  : 'GET',
		//TODO:增加类型转换判断
		'dataType' : 'text',
		'async' : true,
		//TODO:增加支持对象类型
		'data'  : null
	};

	function isWindowXHR() {
		try {
			if (window.XMLHttpRequest) {
				return new XMLHttpRequest();
			}
		} catch (e) {}
	}

	function isIEXHR() {
		try {
			if (window.ActiveXObject) {
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		} catch (e) {}
	}

	function ajaxSetup(opations) {
		if (typeof opations == 'object') {
			for (key in opations) {
				if (typeof ajaxSetting[key] !== 'undefined') {
					ajaxSetting[key] = opations[key];
				} else {
					switch(typeof opations[key])
					{
						case 'function':
							callback[key] = opations[key];
						break;
					}
				}
			}
		}
		return ajaxSetting;
	}

	//TODO:增加其他状态处理
	function stateChange() {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				if (callback.success) {
					//Success
					return callback.success(xmlHttp.responseText);
				} else {
					return xmlHttp.response;
				}
			} else {
				alert("Problem retrieving XML data");
			}
		}
	}

	/* https://xhr.spec.whatwg.org/ */
	return {
		'ajax' : function(opations) {
			var settings = ajaxSetup(opations);
			if (xmlHttp !== null && settings) {
				xmlHttp.onreadystatechange = stateChange;
				switch(settings['type'].toUpperCase())
				{
					case 'POST':
						xmlHttp.open('POST', settings['url'], settings['async']);
						xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
						xmlHttp.send(ajaxSetting['data']);
					break;

					case 'GET':
						settings['url'] += ('?' + ajaxSetting['data']);
						xmlHttp.open('GET', settings['url'], settings['async']);
						xmlHttp.send(null);
					break;
				}
			} else {
				alert("Your browser does not support XMLHTTP.");
			}
		}
	};

})(window);

xmlHttpRequestAction.php

<?php
date_default_timezone_set("PRC");
echo json_encode(array('date'=>date('Y-m-d h:i:s'),'POST'=>$_POST,'GET'=>$_GET, 'content'=>'中文'));
?>


© 著作权归作者所有

尐桀

尐桀

粉丝 50
博文 75
码字总数 14922
作品 0
广州
程序员
私信 提问
Python3基础之学习笔记(十五)-Ajax-文件上传-图片验证码

1. Django 1.1 Ajax 1.1.1 Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,...

GoldenKitten
01/17
0
0
Android混合开发

前端周刊第 52 期:JS Conf 2017 开始报名、苹果腾讯开战、React Native 周边 哈哈,互联网圈本周的大事件是微信公众号关闭 iOS 平台打赏入口,讨论这件事情的文章很多,前端周刊就没有收录相...

掘金官方
2017/12/14
0
0
简述ajax和axios、fetch的区别

1.jQuery ajax $.ajax({type: 'POST',url: url,data: data,dataType: dataType,success: function () {},error: function () {}}); 传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送......

大灰狼的小绵羊哥哥
03/19
0
0
XMLHttpRequest

主要内容: 这里是列表文本这里是列表文本使用XMLHttpRequest 对象 使用XMLHttpRequest 事件 跨域ajax 通信的限制 ajax 全名:asynchronous javascript + xml 的简写 改变了web诞生依赖单击等...

中柠檬
2016/11/25
5
0
原生javascript实现Ajax和jQuery实现Ajax实例应用

这是我自己写的例子,希望对大家有帮助 使用了struts2,jdk1.6 1.实体类书写 public class Student { private String toid ; private String name ; private String sex ; public String ge......

七羽燕
2014/10/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux的基本命令

目录的操作命令(增删改查) 增: mkdir 目录名称; 查: ls 可以看到该目录下的所有的目录和文件 ls -a,可以看到该目录下的所有文件和目录,包括隐藏的 ls -l,可以看到该目录下的所有目录和...

凹凸凸
今天
2
0
在古老unix中增加新用户

Installing 4.3 BSD Quasijarus on SIMH 目标:要在4.3BSD中新增加用户dmr,指定目录/home/dmr,uid为10 gid=31(guest组,系统已建立) 4.3BSD还没有adduser或useradd 直接修改/etc/passwd...

wangxuwei
今天
2
0
Bootstrap(六)表单样式

基本样式 所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好...

ZeroBit
昨天
3
0
SSL 证书格式转换

SSL 证书格式转换 不同服务器情况下,需要不同的证书格式。 比如 pem 转 pfx。 pem在window 平台下可以导入,但是无法正常使用。 需要转换成pfx。 推荐在线转换工具,由中国数字证书网站提供...

DrChenXX
昨天
2
0
HAProxy

xx

Canaan_
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部