JS如何实现Ajax的请求函数

JavaScript013

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>

   大概的处理思路应该是这样的: 先通过AJAX,从服务器端的某个文件取得这段js代码,然后动态创建一个<script>标签,把取得js代码字串写入到<script>标签里就可以了!

   这边有个小问题,不知道你取得代码为什么要包含<script>标签 ,这样我动态创建<script>标签时,还需要在字串里把<script language=javascript>跟</script>去掉才行。 

   先按照你返回的代码的样式,用js处理一下吧,测试代码如下:

<html>

  <head> 

    <script language="javascript"> 

      function window_load(){

       getAndRunScript("test.js",true,processScriptBeforeRun)

      }

    /*

      加载并执行指定文件中的代码,参数:

    */

    function getAndRunScript(url,async,process,callback){

     var r = createXmlHttpRequest() 

     //初始化XMLHttpRequest组件

      r.open("get",url,async)   

      //发送请求  

      r.send(null) 

        

      //将取得的js代码添加到画面的script标签里

      appendScript(process ? process(r.responseText) : r.responseText )

      callback && (callback(codes))

    }

    

    //XmlHttpRequest对象  

    function createXmlHttpRequest(){  

        if(window.ActiveXObject){ //如果是IE浏览器  

            return new ActiveXObject("Microsoft.XMLHTTP")  

        }else if(window.XMLHttpRequest){ //非IE浏览器  

            return new XMLHttpRequest()  

        }  

    }  

    //创建一个新的script标签,并将指定的js代码写入到标签内

    function appendScript(codes){ 

      //创建script标签

      var s = document.createElement("<script type='text/javascript'>")

      s.text = codes

      

      var head = document.getElementsByTagName("head")[0]

      head.appendChild(s) 

    }

    

    //去除script代码字串中的script标签

    function processScriptBeforeRun(script){

     return script.replace(/<[^>]+>/g,"") 

    } 

    </script>

  </head>

  <body onload="window_load()">

     <input type="text" id="text1">

  </body>

</html>

这个是用javascript + XMLHttpRequest来实现的。

  其实如果你返回的代码里不包含<script>标签的话(就像普通的js文件里的内容就行),你可以直接用jQuery的getScript方法就行了:

<html>

  <head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script language="javascript">

      $(document).ready(function(){

      // 用jQuery的getScript方法,则js代码字串不能带有<script>标签,否则无法执行

        $.getScript("./test.js") 

      })   

    </script>

  </head>

  <body >

   <input type="text" id="text1">

  </body>

</html>

最后把我测试用的代码放到附件里..  你自己测测看,看是不是你想要的那种方式吧!

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

希望对你有帮助,望采纳!