一、原生js，ajax

1、创建一个函数：createXhr

或者

2、Ajax对象的相关属性和方法

相关属性：

readyState ：状态码

Ajax对象从创建到初始化到发送请求到接收数据时，它的状态码会发生改变
0：表示对象已建立，但未初始化
1：表示对象已初始化，但未发送
2：已调用send方法进行请求
3：正在接收数据（接收到一部分）
4：接收完成

onreadystatechange ：当Ajax对象的状态码发生改变时所触发的回调函数
status ：http的响应状态码
statusText ：http的响应状态文本
reponseText ：服务器端返回的数据（字符串形式）
responseXML ：服务器端返回的数据（xml形式）

如果服务器返回的是普通字符串，使用responseText属性进行取值
如果服务器返回的是xml文档数据，使用responseXML属性进行取值

3、解决get缓存方法

一，客户端

<script>
    var xhr;
    window.onload = function() {

        //绑定失去焦点事件
        $('username').onblur = function() {
            //获取用户名
            var username = $('username').value;
            //生成url

            //随机数
            //var url = 'demo05.php?username=' + username+'&_='+Math.random(); 解决缓存方法，大量缓存文件，可能重复

            //时间戳
            //var url = 'demo05.php?username=' + username+'&_='+new Date().getTime();解决缓存方法，大量缓存文件不重复

            var url = 'demo05.php?username=' + username;
            //创建对象
            xhr = createXhr();
            //初始化对象
            xhr.open('get', url);
            //设置请求头信息
            //xhr.setRequestHeader("If-Modified-Since", "0");解决缓存方法，只有一个缓存文件
            //设置回调函数
            xhr.onreadystatechange = display;
            //发送请求
            xhr.send(null);

        };
    };

    function display() {
        //当状态码为4，响应状态码为200时
        if (xhr.readyState == 4 && xhr.status == 200) {
            //用户名已被使用
            if (xhr.responseText == 1) {
                $('result').innerHTML = '<font color=red>用户名已被占用！</font>';
            } else {
                $('result').innerHTML = '<font color=green>用户名可以使用！</font>';
            }
        }
    }
</script>

二、服务器端：禁用缓存

header("Cache-Control: no-cache, must-revalidate"); header功能：向http响应头中写数据

4，post与get请求

一、 get和post的区别

get是将参数附加到url的后面

post是将参数放在请求空白行的后面

get请求传参最大大小：2k

post请求传参最大大小：无限制，一般服务器会做限制

get只能传输字符串数据

post可以传输字符串和二进制数据

二、请求头设计

xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);

<script>
    window.onload = function() {
        //绑定点击事件
        $('btnOk').onclick = function() {
            var username = $('username').value;
            var password = $('password').value;
            var data = 'username=' + username + '&password=' + password;
            var xhr = createXhr();
            xhr.open('post', 'demo08.php');
            xhr.setRequestHeader('Content-Type',
                    'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (xhr.responseText == 'ok') {
                        $('username').value = '';
                        $('password').value = '';
                        $('password2').value = '';
                        $('res').innerHTML = '录入成功';
                    }
                }
            };
            xhr.send(data);
        };
    };
</script>