一、原生js，ajax

1、创建一个函数：createXhr

 

或者

 

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

相关方法：

open(method,url[,async])
初始化Ajax对象
method：请求方式 主要有两种：get和post
url：请求地址
[async]：是否异步请求 主要有个值：true和false 默认：true
lsetRequestHeader(header,value)
设置请求头信息
header：请求头
value：请求头信息
lsend(content)
发送请求，只有执行到ajax对象的send方法时，才会真正发送请求
content：参数，如果是get请求，这里直接写null

相关属性：

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>