Ajax - 发送请求原理

1，什么是ajax？

　　Asynchronous JavaScript and XML（当然现在xml已经由json代替）；

　　主要是用于前后台的交互（表单提交已经被废弃）；

　　使用场景：前台获取数据、表单的失焦验证；

2，如何在有服务的环境下使用ajax发送请求

　　 1.创建ajax对象-xmlhttprequest对象：（分为两种类型）

　　　　在新版本的浏览器中：variable=new XMLHttpRequest();

　　　　老版本的IE中：variable=new ActiveXObject("Microsoft.XMLHTTP");

　　　　所以在这里我们需要考虑到兼容性的问题：　

　　　　　var xhr;

        if(window.XMLHttpRequest){    //常规，如果有，直接使用

            xhr = new XMLHttpRequest();

        }else{   //如果没有，老版本IE

            xhr = new ActiveXObject("Microsoft.XMLHTTP");

        }

        console.log(xhr)

        console.log("状态码:" + xhr.readyState);

        console.log('响应码：' + xhr.status);

        console.log('响应文本:' + xhr.responseText);

        console.log('步骤一完成')

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

xhr.onreadystatechange = function(){

            console.log('xhr的状态码发生了改变');

            console.log("状态码:" + xhr.readyState);

            console.log('响应码：' + xhr.status);

            console.log('响应文本:' + xhr.responseText);

            console.log('\n');

        }

console.log('步骤二完成')

　　3.创建请求的消息，连接服务器

xhr.open('GET','07.php',true);    //最后一个参数是bool，表示同步||异步，true异步

console.log('步骤三完成')

　　4.发送

xhr.send(null);   //如果是post请求，就放post参数，如果是get请求，发送null就行了

　　5.附：

　　　　状态码：

　　　　　　0: 请求未初始化
　　　　　　1: 服务器连接已建立
　　　　　　2: 请求已接收
　　　　　　3: 请求处理中
　　　　　　4: 请求已完成，且响应已就绪

　　　　响应码：
　　　　　　1xx 信息类
　　　　　　2xx 成功 200
　　　　　　3xx 重定向 304
　　　　　　4xx 客户端错误 404
　　　　　　5xx 服务端错误

3,使用ajax发送get请求

html部分：

用户名：<input type="text" id="username">

       <span id="ts"></span><br>

密码：<input type="text">

　　　　<button id="btn">验证用户名</button>

原生js部分：

<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)

        }

        //get是直接可以在地址栏中调试

    </script>

4,使用ajax发送post请求

html:

学生姓名：<input type="text" id="uname"><br>

学生成绩：<input type="text" id="score"><br>

<button id="btn">注册</button>

<p id="p01"></p>

原生js部分：

<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>

5,使用jQuery—ajax发送get请求

用户名：<input type="text" id="username">

    　　<span id="ts"></span>

    　　<br>

密码： <input type="text">

      <button id="btn">验证用户名</button>

$("#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)

                }

            })

})

6,使用jQuery—ajax发送post请求

（html部分与上面相同相同）

$("#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)

                }

            })

})

参考: https://www.cnblogs.com/1234wu/p/10414973.html

巴特西

Ajax - 发送请求原理

最新文章

热门文章