JQuery分析及实现part7之 Ajax 模块功能及实现

JQuery模块分析及其实现第七部分 Ajax 部分功能及实现,接第六部分!

Ajax 请求流程

  1. 创建一个请求对象
function createRequest() {
	return window.XMLHttpRequest ? new window.XMLHttpRequest() :
		new ActiveXObject('Microsoft.XMLHTTP');
}

var xhr = createRequest();
console.log(xhr);
  1. 格式化数据
    • 将格式化后的数据,参数与值都要重新编码
function formatData(data){
    var ret = [];
    for(var k in data){
        ret.push(window.encodeURIComponent(k) + '=' + window.encodeURIComponent(data[k]));
    }
		// 如果不想从服务器缓存中读取数据
	ret.push(('_=' + Math.random()).replace('.', ''));
    return ret.join('&');
}
var data = {name: '梦魇小栈',age: 2,url:'http://blog.ihoey.com'};
console.log(formatData(data));//name=%E6%A2%A6%E9%AD%87%E5%B0%8F%E6%A0%88&age=2&url=http%3A%2F%2Fblog.ihoey.com
  1. 与服务器建立连接
  2. 监听请求状态
  3. 发送请求
  4. 封装
<script>
	// 默认配置信息
	ajaxSetting = {
		url: '',
		type: 'GET',
		dataType: 'text',
		contentType: 'application/x-www-form-urlencoded',
		data: null,
		async: true,
		success: null,
		fail: null
	};

	function createRequest() {
		return window.XMLHttpRequest ? new window.XMLHttpRequest() :
			new ActiveXObject('Microsoft.XMLHTTP');
	}

	function formatData(data) {
		var ret = [];
		for(var k in data){
			ret.push(window.encodeURIComponent(k) + '=' + window.encodeURIComponent(data[k]));
		}
		// 如果不想从服务器缓存中读取数据
		ret.push(('_=' + Math.random()).replace('.', ''));
		return ret.join('&');
	}

	function ajax(config) {
		var context = {},
			xhr,
			postData = '';
		// 过滤无效参数
		if(!config || !config.url) {
			console.warn("参数异常");
			return;
		}
		// debugger;
		// 获取默认配置信息
		itcast.extend(ajaxSetting, context);
		// 用户的配置覆盖默认配置
		itcast.extend(config, context);
		// 1: 创建请求对象
		xhr = createRequest();
		// 2:格式化数据
		if(context.data){
			postData = formatData(context.data);
		}
		// 3:与服务器建立连接
		if(context.type.toUpperCase() === 'GET'){
			xhr.open('GET', context.url + '?' + postData, context.async);
			postData = null;
		} else {
			// 模拟表单提交,设置请求头信息
			xhr.setRequestHeader('Content-Type', context.contentType);
			xhr.open('POST', context.url, context.async);
		}
		// 4:监听请求状态
		xhr.onreadystatechange = function() {
			if(xhr.readyState === 4){
				if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
					// 获取到请求回来的数据
					var text = xhr.responseText;
					// 如果指定的数据格式为 json,那就将其转换为json对象
					text = context.dataType.toLowerCase() === 'json' ?
						JSON.parse(text) : text;

					context.success && context.success(text);
				} else {
					context.fail && context.fail({"errorCode": xhr.status, "message": "请求超时."});
				}
			}
		};
		// 5: 发送请求
		xhr.send(postData);
		// context.success && context.success(JSON.parse(xhr.responseText));
	}
</script>
<script>
	ajax({
		url: 'data.json',
		dataType: 'json',
		async: false,
		success: function(data) {
			document.getElementById('content').innerHTML= '<p>' + data.username + '</p>' +
					'<p>' + data.age + '</p>';
		},
		fail: function(er) {
			console.log(er.errorCode);
		}
	});
</script>

Jsonp 请求

  1. 跨域 只能发送 GET 请求 . 一种不安全的请求方式
  2. 原理:由于 dom 元素的 src 属性,具有跨域功能. 在实现跨域请求时,为了方便就使用 script 标签来做.
  3. 流程
    • 创建请求对象,就是创建一个 script 标签
    • 将上述创建的 script 标签添加到页面的 head 标签下
    • 格式化数据
    • 创建全局回调函数
    • 设置超时时间,如果超过此时间,也没有得到数据,表示请求失败.否则,请求成功
    • 发送请求: 指定 script 标签的 src 属性值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员同行者

django xadmin 集成DjangoUeditor富文本编辑器

3402
来自专栏王大锤

升级xcode7.0 第三方库不能用的解决方法(bitcode是什么鬼?)

3027
来自专栏金朝麟的专栏

Express+Less+Gulp配置高效率开发环境

原来用的React+Webpack时,那种同步压缩修改、实时动态刷新页面的感觉真的太棒了。但如果使用Express+ejs+less的话,配置webpack非常...

7900
来自专栏程序员的碎碎念

异步的JavaScript和XML(AJAX)

什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术,不是新的编程语言,而是一种使用现有标准...

3844
来自专栏GreenLeaves

Fiddler4抓包工具使用教程一

本文参考自http://blog.csdn.net/ohmygirl/article/details/17846199,纯属读书笔记,加深记忆 1、抓包工具有很...

80410
来自专栏码生

实现更安全、高扩展的自定义键盘 非UIButton

自定义键盘的封装网上的例子比比皆是,有的封装的非常完美,直接pod 集成到项目中便可以简单的使用,可是为什么我还要自定义一个呢? 一不是不是为了显摆,二不是网...

1212
来自专栏技术博客

ExtJs十一(ExtJs Mvc图片管理之一)

图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。因而,将图片管理做成一个扩展比较方便。当然,做成MVC模式也行,不争...

1433
来自专栏黑白安全

利用JavaScript进行后台文件上传getshell

看到一些XSS+CSRF上传的漏洞,这次就学习了一下HTML5的一些新特性,用JavaScript实现了文件上传。攻击者可以向管理员发送一个钓鱼页面,管理员只要...

1172
来自专栏王二麻子IT技术交流园地

十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题。今天我们来重新调...

29710
来自专栏java闲聊

SpringBoot+Vue2.x登陆功能

3134

扫码关注云+社区

领取腾讯云代金券