js之ajax学习笔记

为什么80%的码农都做不了架构师？>>>   

起源:

XHR在IE5中引入，所以在IE中可能会遇到三种不同的版本 'MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'

一、建立

适用于IE7之前的版本的创建方式

//适用于IE7之前的版本
function createXHR() {
	if ( typeof arguments.callee.activeXString != "string" ) {
		var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'],
			i, len;
		for ( i = 0, len = versions.length; i < len; i++){
			try{
				new ActiveXObject( versions[i] );
				arguments.callee.activeXString = versions[i];
				break;
			}catch(ex){

			}
		}

	}
	return new ActiveXObject( arguments.callee.activeXString );
}

IE7+、Firefox、Opera、Chrome and Safari 都支持原生XHR

//IE7+、Firefox、Opera、Chrome and Safari 都支持原生XHR
var xhr = new XMLHttpRequest();

所以兼容全部浏览器的方式是

//所以兼容全部浏览器的函数为
function createXHR() {
	if ( typeof XMLHttpRequest != "undefined" ) {
		return new XMLHttpRequest();
	}else if ( typeof ActiveXObject != "undefined" ) {
		if ( typeof arguments.callee.activeXString != "string" ) {
		var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'],
			i, len;
		for ( i = 0, len = versions.length; i < len; i++){
			try{
				new ActiveXObject( versions[i] );
				arguments.callee.activeXString = versions[i];
				break;
			}catch(ex){

			}
		}

	}
		return new ActiveXObject( arguments.callee.activeXString );
	} else {
		throw new Error("No XHR  object available.");
	} 
}

二、XHR的使用

1.OPEN()

//1.open() @param type(请求类型)  
//		    url(请求URL-相对于当前页面，也可以用绝对路径)
//		    isAsync(是否异步发送)
//调用open方法不会真正发送请求，只是启动一个请求以备发送
xhr.open("get/post", "example.php", false);

2.send()方法

    @param body 请求的主体内容，如果没有，设为null

3.返回数据
    responseText 作为响应主体被返回文本
    responseXML 若响应类型为"text/xml"或"application/xml",这个属性将保存包含响应   数据的XML DOM文档
    status 响应的HTTP状态
    statusText HTTP状态的说明

5.异步发送检测状态
    readyState
    0 --未初始化，尚未调用open();
    1 --启动，已经调用open(),但尚未调用send();
    2 --发送，已经调用send(),但尚未接收到响应;
    3 --接收，已经接收到部分数据;
    4 --完成，已经接收到全部响应数据，可以在客户端使用;
必须在调用open()之前调用readystatechange事件

xhr.onreadystatechange = function() {
	if( xhr.readyState == 4 ) {

	}
}

6.取消请求
    在接收到响应之前可以调用abort()取消异步请求

    xhr.abort();

三、HTTP头信息

1.XHR默认请求头部
    Accept: 浏览器能够处理的内容类型
    Accept-Charset: 浏览器能够显示的字符集
    Accept-Encoding: 浏览器能够处理的压缩编码
    Accept-Language: 浏览器当前设置语言
    Connection: 浏览器与服务器之间的链接类型
    Cookie: 当前页面设置的任何Cookie
    Host: 发送请求页面的所在域
    Referer: 发送请求的页面的URI
    User-Agent: 浏览器的用户代理字符串

2.设置头部
    调用setRequestHeader()方法，两个参数，key-value
    必须在open()之后，send()之前调用
    注意，有的浏览器允许重写默认头部，有的不允许，所以最好使用自定义头部字段信息

3.获取头部字段
    调用getResponseHeader()，参数 --头部字段
    getAllResponseHeader(); 获取所有头部长字符串
    getAllResponse-Headers(); 返回格式化的多行文本

4.get请求
    用于某些请求时，把查询字符串参数追加到URL末尾，但必须经过   encodeURIComponent()编码

/** 返回经过encodeURIComponent()编码的url参数
**@param url
*		 paramObj 参数对象 key-value
*/
function addURLParam(url, paramObj){
	if ( typeof paramObj != "object" ) return url;
	var tag = '#';
	if ( url.indexOf("?") == "-1" ) tag = '?';
	for( var key in paramObj ){
		url += tag + encodeURIComponent( key ) + "=" + encodeURIComponent( paramObj[key] );
		if( tag != '#' ) tag = '#';
	}
	return url;
}

var url = 'http://www.baidu.com'; 
var paramObj = {"key1":"value1", "key2":"value2", "key3":"value3"};
addURLParam( url , paramObj );// "http://www.baidu.com?key1=value1#key2=value2#key3=value3"

var url = 'http://www.baidu.com'; 
var paramObj = {"key1":"ss ss", "key2":"wqe\2v", "key3":"sda/sa"};
addURLParam( url , paramObj );//"http://www.baidu.com?key1=ss%20ss#key2=wqe%02v#key3=sda%2Fsa"

5.post请求
    模仿表单提交--设置Content-Type 为 application/x-www-form-urlencoded

var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function(){
	if ( xhr.readyState == 4 ){
	 		console.log( xhr.responseText );
		}
	};
	xhr.open("post", "/hdzx/eventgetKTVEventList.action", true);
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.send("id: 196, opt: 1, page:1");

// Accept:*/*
// Accept-Charset:GBK,utf-8;q=0.7,*;q=0.3
// Accept-Encoding:gzip,deflate,sdch
// Accept-Language:zh-CN,zh;q=0.8
// Connection:keep-alive
// Content-Length:19
// Content-Type:application/x-www-form-urlencoded
// Cookie:cityID=202; JSESSIONID=C5D1BFB15CD2425E873A6CB35D153B46
// Host:www.minifang.cn
// Origin:http://www.minifang.cn
// Referer:http://www.minifang.cn/ktv/196.html
// User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.33 (KHTML, like Gecko) Chrome/27.0.1438.7 Safari/537.33

注意：get请求的速度最多可达post请求的两倍

转载于:https://my.oschina.net/jieF/blog/133734