初探ajax

一、一些基本概念

1.什么是ajax

　　ajax：async JavaScript and xml。是前后台通信的一种手段，一种方式。

2.使用场景

　　使用ajax的场景包括前台获取数据、表单失焦验证等。

3.get和post的区别

　　get参数是在地址栏中，大小2000个字符左右

　　post参数是在请求体中，网速良好，理论上是无限大的。

二、原生js写ajax

　　1、创建ajax对象-xmlhttprequest对象

　　　　注意这里存在兼容性问题：

var xhr;
        if(window.XMLHttpRequest){    //常规，如果有，直接使用
            xhr = new XMLHttpRequest();
        }else{   //如果没有，老版本IE
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

　　2.通过监听ajax的状态的改变

其中各状态码所表达的意义：

　　　　0: 请求未初始化

      　　 1: 服务器连接已建立

       　　2: 请求已接收

　　　　3: 请求处理中

　　　　4: 请求已完成，且响应已就绪

各响应码所表达的意义：

　　　　1xx 信息类

　　　　2xx 成功 　　　　 200

　　　　3xx 重定向 　　　 304

　　　　4xx 客户端错误　  404

　　　　5xx 服务端错误

xhr.onreadystatechange = function(){
            console.log('xhr的状态码发生了改变');
            console.log("状态码:" + xhr.readyState);
            console.log('响应码：' + xhr.status);
            console.log('响应文本:' + xhr.responseText);
            console.log('
');
        }

　　3.创建请求的消息，连接服务器（状态码0=>1）

xhr.open('GET','07.php',true);

　　4.发送

　　　　这里如果是post请求，就传post参数，如果是get请求，发送null就行了。

xhr.send(null);

例如：用ajax发送get请求：

用户名：<input type="text" id="username">
    <span id="ts"></span>
    <br>
    密码：<input type="text">

    <button id="btn">验证用户名</button>
    <script>
        var username = document.getElementById("username");
        var btn = document.getElementById("btn");
        var ts= document.getElementById("ts");

        // 点击btn发送ajax请求
        btn.onclick = function(){
            // 1.创建xhr
            var xhr;
            if(window.XMLHttpRequest){    //常规，如果有，直接使用
                xhr = new XMLHttpRequest();
            }else{   //如果没有，老版本IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2.绑定监听函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        console.log(xhr.responseText)
                        if(xhr.responseText == 1){
                            ts.innerHTML = "该用户名已经被注册"
                        }else if(xhr.responseText == 0){
                            ts.innerHTML = "该用户名可以使用"
                        }


                    }
                }
            }
            // 3.建立连接
            xhr.open("GET","08.php?uname=" + username.value,true);
            // 正则验证
            // 4.发送请求
            xhr.send(null)
        }
　　　　</script>

　　　　用ajax发送post请求：

    学生姓名：<input type="text" id="uname"><br>
    学生成绩：<input type="text" id="score"><br>
    <button id="btn">注册</button>    

    <p id="p01"></p>
    <script>
        function get_id(id){
            return document.getElementById(id);
        }

        var uname = get_id("uname");
        var score = get_id("score");
        var btn = get_id("btn");
        var p01 = get_id("p01");

        var reg_name = /^[a-z]{3,10}$/g;
        var reg_score = /^d{1,2}$/g;
        var uname_flag = false;

        uname.onfocus = function(){
            reg_name.lastIndex = 0;
            this.style.border = '1px solid #000' 
            uname_flag = false;
        }
        uname.onblur = function(){ 

            if(reg_name.test(uname.value)){
                this.style.border = '1px solid #0f0';
                uname_flag = true;
            }else {
                this.style.border = '1px solid #f00'
            }
        }



        btn.onclick = function(){
            if(uname_flag){
                // 1.
                var xhr;
                if(window.XMLHttpRequest){    //常规，如果有，直接使用
                    xhr = new XMLHttpRequest();
                }else{   //如果没有，老版本IE
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 2.
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if (xhr.status == 200) {
                            console.log(xhr.responseText);
                            p01.innerHTML = xhr.responseText;
                        }
                    }
                }
                // 3.
                xhr.open('POST','http://localhost:8888/0220ajax/09.php',true);
                // 3.5  在发送post请求的时候，你得告诉服务器你发送的是一个什么
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                // 4.发送
                xhr.send('strName=' + uname.value + '&strScore=' + score.value);

            }
        }
    </script>

三、用jQuery写ajax

　　原生的js写ajax显得比较复杂难以理解，这里，jQuery为我们提供了一种方法ajax（），这里我们一起看一下通过jQuery怎么写ajax

用户名：<input type="text" id="username">
    <span id="ts"></span>
    <br>
    密码：<input type="text">

    <button id="btn">验证用户名</button>
    <script>
        // 点击btn发送ajax请求


        jquery代码
        $("#btn").click(function(){
            $.ajax({
                type : "GET",
                url : "01.php?uname=" + $("#username").val(),
                success : function(data){   //就是原生的xhr.responseText
                    console.log(data);
                    if(data == 0){
                        $("#ts").html("该用户名可以使用").css("color","green");
                    }else if(data == 1){
                        $("#ts").html("该用户名已被占用").css("color","red");
                    }
                },
                error : function(err){    //错误的
                    console.log(err)
                }
            })
        })


        // 点击btn发送post请求

        $("#btn").click(function(){
            $.ajax({
                type : "POST",
                url : "http://192.168.9.154:8888/0221ajax/01.php",
                data : {
                    uname : $("#username").val()
                },
                success : function(data){   //就是原生的xhr.responseText
                    console.log(data);
                    if(data == 0){
                        $("#ts").html("该用户名可以使用").css("color","green");
                    }else if(data == 1){
                        $("#ts").html("该用户名已被占用").css("color","red");
                    }
                },
                error : function(err){    //错误的
                    console.log(err)
                }
            })
        })

        
    </script>