JS如何实现Ajax的请求函数

JavaScript07

JS如何实现Ajax的请求函数,第1张

<script type="text/javascript">  

    //请求函数  

    function f1(){  

        console.log('start')  

        //1.创建AJAX对象  

        var ajax = new XMLHttpRequest()  

          

        //4.给AJAX设置事件(这里最多感知4[1-4]个状态)  

        ajax.onreadystatechange = function(){  

            //5.获取响应  

            //responseText      以字符串的形式接收服务器返回的信息  

            //console.log(ajax.readyState)  

            if(ajax.readyState == 4 && ajax.status == 200){  

                var msg = ajax.responseText  

                console.log(msg)  

                //alert(msg)  

                var divtag = document.getElementById('result')  

                divtag.innerHTML = msg  

            }  

        }  

          

        //2.创建http请求,并设置请求地址  

        var username = document.getElementsByTagName('input')[0].value  

        var email = document.getElementsByTagName('input')[1].value  

        username = encodeURIComponent(username)    //对输入的特殊符号(&,=等)进行编码  

        email = encodeURIComponent(email)  

        ajax.open('get','response.php?username='+username+'&email='+email)  

          

        //3.发送请求(get--null    post--数据)  

        ajax.send(null)  

    }  

      

</script>

用jQuery $.get() 方法：

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback)

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

例子：

<script>

$(document).ready(function(){

$("button").click(function(){

$.get("/try/ajax/demo_test.php",function(data,status){

alert("数据: " + data + "\n状态: " + status)

})

})

})

</script>

希望对你有帮助，望采纳！