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);}});}