Ajax和JSON基础学习

Ajax

点击按钮获取同级目录的txt文件内容

oBtn.onclick = function() {//5步走
    
    //打开浏览器
    //方法一
    var xhr = null;
    if(window.XMLHttpRequest) {
    //如果是IE7以上用这个
        xhr = new XMLHttpRequest();
    } else {
    //IE6以下用这个
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    /* //方法二
    var xhr = null;
    try {   
    //如果是IE7以上用这个
        xhr = new XMLHttpRequest();
    } catch (e) {
    //IE6以下用这个
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    */

    //在地址栏输入地址
    xhr.open(‘get’,’1.txt’,true);

    //回车提交
    xhr.send();

    //等待服务器返回页面
    xhr.onreadystatechange = function() {
        //返回成功
        if(xhr.readyState == 4) {
            alert(xhr.responseText);
        }
    }

}

• 做传递时前后端的传递方式、传递名要对应，这和收快递的道理是一样的；

异步与同步

• 异步：非阻塞，前面代码不会影响后面代码的执行；
• 同步：阻塞，前面代码会影响后面代码的执行。

产生的问题

Ajax get请求产生缓存怎么办？

在open（）函数里面的第二个参数，即地址。后面加上一个随机数，例如时间戳：+new Data().getTime()。就可以在每次发送请求时产生不同的地址，这样缓存就没用了；

注意！一定要在原字符串里面最后面加一个‘&’。

post方式没有缓存问题！

使用get向后端发送中文字符串会乱码，怎么办？

比如向后端发送username = 刘伟&age = 30&。

可以酱紫：username = ‘+encodeURI(‘刘伟’)+’&age = 30&

post方式没有中文乱码问题！

当使用post方式时，直接使用xhr.send(‘username = leo&age = 30’);会发生错误。

这个时候，我们要在send()之前先定义请求头。like this：

xhr.open(“POST”,”ajax_test.asp”,true); 
xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”); 
xhr.send(“username = leo&age = 30”);

JSON

• IE7以下就不支持了，需要去json.org下载对应语言的js文件导入到你的html文件中。
• json中的key必须用双引号，单引号都不行。

front end