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 屬性值