原生Ajax之GET、POST请求-蒲公英云

原生Ajax之GET、POST请求

ajax可以接收什么信息？
答：浏览器可以接收的信息ajax都可以接收，例如字符串、html标签、css样式内容、xml内容、json内容等等。
http请求方式：post 、get 、put 、heade、delete、trace Connect 、options….

ajax 对象成员:

属性成员:

responseText : 以字符串形式接受服务端返回的信息
readyState : ajax对象的状态
0:ajax对象创建完毕 1:已经调用open方法 2:已经调用send方法 3:数据已经返回一部分 4:数据返回完毕

onreadystatechange : 事件属性(对讲机)
readyState属性值发生变化的时候该事件被触发执行,为了获得较多的状态细信息,在对象创建完毕后设置该事件最多只能感知readyState的1/2/3/4状态值

方法成员:

open()创建一个新的http请求
send()把http请求发送给服务端

responseText 先接受数据
readyState是： AJAX对象的维持状态 xhr.readyState == 4;表示数据接受完毕
Onreadystatechange ：事件监听属于事件on 用来判断readyState的状态值，判断数据是否已经接受完毕。

ajax对象.open(get/post, 请求地址);

GET请求

<script type="text/javascript">
    function f1(){
    var nm  = document.getElementById('username).value;
    //对特殊字符进行处理
    nm = encodeURLComponent(nm);
        //①创建对象
        var xhr = new XMLHttpRequest();
        //④设置事件,感知readyState状态变化,进而获得服务器的返回信息
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                alert(xhr.responseText);  //返回数据
            }
            //② 创建新的http请求
            xhr.open('get','./03.php?id='+nm);
            //③ 发送请求
            xhr.send(null);
        }
    }
</script>

post请求

<script type="text/javascript">
    function checkname(){
    var nm  = document.getElementById('username).value;
    //对特殊字符进行处理
    nm = encodeURLComponent(nm);
        //①创建对象
        var xhr = new XMLHttpRequest();
        //把需要传递的信息转化为字符串格式
        var info = "name"+nm+"&ag=20";
        //④设置事件,感知readyState状态变化,进而获得服务器的返回信息
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                alert(xhr.responseText);  //返回数据
            }
            //② 创建新的http请求
            //post方式传递数据是模拟form表单方式传递的数据
            xhr.open('get','./04.php?color=red');
        //设置http头协议,把传递的post数据转化为xml格式
        //setRequestHeader方法必须放在open方法的后边调用
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            //③ 发送请求
            xhr.send(info);
        }
    }
</script>

ajax对缓存的处理

动态程序文件避免缓存效果：
① 保证每次请求都是不同的请求 [推荐使用]
② 设置header头禁止浏览器缓存当前的动态页面

方法一、请求地址后面添加随机数 +Math.random();
方法二、在服务气端(php)设置响应头
//设置header头,禁止浏览器缓存当前页面
header('Cache-Control:no-cache');
header('Pragma:no-cache');
header('Expires:-1');