ajax学习(一)

AJAX

1、ajax异步加载数据---初步

//1、声明一个ajax对象
var xhr = new XMLHttpRequest();

/*
    第一个参数 请求数据的方式(很多种)
        1、get请求
        2、post请求
        3、也可以去传输数据
    第二个参数 请求url地址
    第三个参数 是否异步
        true 异步
        false同步
*/
xhr.open("get", "1.txt", true);
//<3>发送请求
xhr.send();
//<4>等待响应
/*
    readystatechange 事件类型
    xhr.readyState 值发生变化的时候，上述的事件就会触发
    0  调用open方法之前
    1  调用send方法之后，发送请求的时候
    2  调用完send方法之后，已经接收到所有响应之后
    3  正在解析响应数据
    4  解析数据完成以后
    xhr.responseText  纯文本 字符串
    xhr.responseXML
*/
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        alert(xhr.responseText);
    }
}

2、ajax异步加载数据---兼容浏览器

/*
    IE6以下不兼容
    new XMLHttpRequest()
    IE6以下使用
    new ActiveXObject("Microsoft.XMLHTTP");
*/
//1、声明一个ajax对象
var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

3、ajax异步加载数据---完美+封装函数

function ajax({method = "get", url, data, success, error}){
    //创建ajax    
    var xhr = null;
    try{
        xhr = new XMLHttpRequest();
    }catch(error){
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //判断请求方式
    if(method == "get" && data){
        url += "?" + data + "&" + new Date().getTime();
    }
    xhr.open(method, url, true);
    //判断发送请求
    if(method == "get"){
        xhr.send();
    }else{
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
    //等待响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                //处理下载完数据的方式都是一样的
                /*
                    如何去处理下载完成的数据不确定
                    具体要写什么代码不确定
                    回调函数  把函数当做参数传入
                */
                if(success){
                    success(xhr.responseText)
                }
            }else{
                if(error){
                    error("Error:" + xhr.status);
                }
            }
        }
    }
}

4、表单中的get和post

get：

    get 默认是http://localhost/code2/1.get.php?username=tian&age=20&password=123456

    get的发送数据方式：直接将数据以查询字符串的格式，拼接在url后面进行传输的。

    缺点：

        1、不安全

        2、最大只能传输2kb

        3、没有办法上传

    优点：简单方便

post：

    表单在进行post提交数据的时候，设置请求头，设置编码形式

    enctype="application/x-www-form-urlencoded"

    post发送数据方式：通过浏览器内部传输数据

    优点：

        1、安全

        2、理论没有最大限制

        3、上传

5、ajax中get和post

get:

/*
    1、url中的中文 进行编码encodeURI
    2、IE中，自动去缓冲下载到的数据，如果多次请求url相同，会返回第一次请求下来的数据(数据不更新)。所以在后面拼接一个当时秒，防止url相同
*/
xhr.open("get", "1.get.php?username=" + encodeURI("钢铁侠") + "&password=123456abc&age=40&" + new Date().getTime(), true);
xhr.send();

post:

xhr.open("post", "1.post.php", true);
//send方法之前设置请求头
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
/*
    post的数据是通过send方法进行提交
*/
xhr.send("username=钢铁侠&age=40&password=123456abc");

二、ajax中的同步和异步

同步：阻塞，必须等前面的程序执行完毕以后，才能执行后面的程序。

异步：非阻塞，前面程序是否执行完毕，不影响后面程序执行的。