javascript Ajax 笔记

ajax 用 XMLHttpRequest 对象来实现 

IE 6不支持 要用 ActiveX组件来实现

所以我们要兼容的创建 ajax

//ajax

function createAjax() {

    if(typeof XMLHttpRequest != "undefined") {

        return  new XMLHttpRequest();

    } else if(typeof ActiveXObject != "undefined") {

        var version = [

'MSXML2.XMLHttp.6.0',

'MSXML2.XMLHttp.3.0',

'MSXML2.XMLHttp'

];

        for(var i=0;i<version.length;i++) {

            try{

                return new ActiveXObject(version[i]);

            }catch(e){}

        }

    } else {

        throw new Error("您的浏览器不支持 Ajax !");

    }

}

创建请求  准备语句 并不会发送ajax请求

ajax.open(请求模式，请求地址，是否同步)  true 代表异步  false 代表同步

ajax.open('get','demo1.php',false);

真正的发送请求

如果是get请求就不要填写 如果是post 就填写

ajax.send(里面填写你要发送的数据);

打印服务器返回回来的数据 是个属性

ajax.responseText

ie 浏览器下面会缓存查询结果 所以每次url后面最好加点随机数

ajax.open('get','demo1.php?rand='+Math.random(),false);

ajax提供了一个属性返回和服务器交互的http码

ajax.status  可以获取 一般为 200 就是成功访问

ajax.statusText 返回  HTTP 状态的说明

可以简单的判断下

if(ajax.status == 200) {

    alert(ajax.responseText);

} else {

    throw new Error('获取数据错误，错误代号：'+ajax.status+'错误信息'+ajax.statusText);

}

一般ajax 都是用异步的方式   open里面是true  如果用异步的方式 要用  onreadystatechange 来判断 

在这个方法里面 检测 readyState属性 即可

取消ajax异步请求  要放在send 后面

ajax.abort();

get和post 一般用get的比较多

使用post提交  

ajax.open('post','demo1.php?rand='+Math.random(),true);  改成post

ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  设置请求头

ajax.send("name=gwyy&sex=nan");  填写数据

ajax 也提供了获取响应头信息  必须在 全部接受完后才能获取

 document.write("<pre>"+ajax.getAllResponseHeaders());  获取全部的头信息

获取其中某一个

alert(ajax.getResponseHeader("Server"));

不管能获取 还能设置请求头信息   在 send() 之前 设置

ajax.setRequestHeader('fuck-you','fuck');

封装ajax

//创建ajax 对象
function createAjax() {
    if(typeof XMLHttpRequest != "undefined") {
        return  new XMLHttpRequest();
    } else if(typeof ActiveXObject != "undefined") {
        var version = [
									'MSXML2.XMLHttp.6.0',
									'MSXML2.XMLHttp.3.0',
									'MSXML2.XMLHttp'
		];
        for(var i=0;i<version.length;i++) {
            try{
                return new ActiveXObject(version[i]);
            }catch(e){}
        }
    } else {
        throw new Error("您的浏览器不支持 Ajax !");
    }
}
//解析 url字符串
function  params(data) {
	var arr = [];
	for(var i in data) {
	    arr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));
	}	
	return arr.join('&');
	
}
function ajax(args) {
	var ajax = createAjax();
	args.url = args.url+"?"+Math.random();
	args.data = params(args.data);
	if(args.method.toLowerCase() === "get")  {
		args.url += (args.url.indexOf('?') == -1) ? '?'+args.data : '&'+args.data;
	}
	args.async = args.async || true;  //同步还是异步
	if(args.async == true) {
		ajax.onreadystatechange = function() {
			if(ajax.readyState == 4){
				callback();
			}	
		}
	}
	ajax.open(args.method,args.url,args.async);
	if(args.method.toLowerCase() === "post") {   //如果是post提交
	    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		ajax.send(args.data);
	} else {
	    ajax.send(null);
	}
	if(args.async == false) {  //如果是同步
	  callback();
	}
	//执行完成
	function callback() {
	      if(ajax.status == 200) {
			args.success(ajax.responseText);
		} else {
			alert('错误号：'+ajax.status+"错误信息："+ajax.statusText);
		}
	}
		
	
}


$('a').onclick = function(){ 

	ajax({
		url:"demo1.php",
		async:true,	
		method:'post',
		data:{'name':'lee','age':'100'},
		success:function(data) {
		    alert(data);
		}
	});

}