AJAX--XMLHttpRequest

AJAX --XMLHttpRequest

AJAX, Asynchronous JavaScript and XML, is not a new programming language, but a technique for creating better, faster, and more interactive web applications.

AJAXAsynchronous JavaScript and XML),并不是一种新的语言,而是一种技术,可以用来创造更好、更快、更具有交互性的web应用。

With AJAX , your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.

使用AJAX技术,你可以使用JavaScript中的XMLHttpRequest对象直接和server通信。使用此对象,JavaScript可以在与server端进行数据交互时,并不刷新当前页面。

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

AJAX在浏览器和web服务器之间进行异步的数据传输(HTTP请求),从而可以请求少量的局部数据,而不是每次必须刷新整个页面。

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

AJAX技术使得WEB应用更加的灵活、快捷、友好。

Below is the code showing how to use XMLHttpRequest. You can send the request url and get the response text asynchronously.

以下的代码是一段JavaScript代码。用来展示怎么去使用一个XMLHttpRequest去取得发送一个异步请求并获得页面文本。

     var req=null;        var console=null;
    
    function sendRequest(url,params,HttpMethod) {
        if(!HttpMethod) {
            HttpMethod="GET";        //"GET" method as default
        }
        req=initXMLHTTPRequest();    //init XMLHttpRequest
        if(req){
            req.onreadystatechange=onReadyState;    //call onReadyState function when state change
            req.open(HttpMethod,url,true);                //http request url, method and is-asynchronous
            req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            req.send(params);                                            //send request
        }
    }
    
    function initXMLHTTPRequest(){                        //init XMLHTTPRequest
        var xRequest=null;
        if(window.XMLHttpRequest){                            //Un IE browser
            xRequest=new XMLHttpRequest();
        }else if(window.ActiveXObject){                    //IE Browser
            xRequest=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xRequest;
    }
    
    function onReadyState(){
        var ready=req.readyState;
        var data=null;
        if(ready==4){                                                        //ready
            data=req.responseText;
        }else{
            data="loading...["+ready+"]";
        }
        toConsole(data);                                            //show
    }
        
    function toConsole(data){
        //alert(data);
        console.innerText=null;
        if(console!=null){
            //var txt=document.createTextNode(data);
            //console.appendChild(txt);    
            console.innerText=data;                        //As text
        }
    }
   

Save the code above as a js file, I have saved it to the url : http://shdwfk.googlepages.com/xRequest.js . Here is a html example, showing how to use the code.

把上面的代码保存成js文件,并且我已经将其保存至http://shdwfk.googlepages.com/xRequest.js。再写一个这段代码的应用。

This is an html file:
这是一个HTML文件:

<html>
    <head>
        <title>An Ajax Test</title>
        <script language="JavaScript" type="text/javascript" src="http://shdwfk.googlepages.com/xRequest.js" >           
        </script>
        <script >
            function showTextCode() {
                console=document.getElementById("textdiv");
                sendRequest(document.getElementById("urltext").value,null,null);
            }
        </script>
    </head>
    <body>
        <font color="0000FF" size="2">URL: </font><input type="text" id="urltext" value="http://" />
        <font color="0000FF" size="2">    </font><input type="button" value="Src  Code" οnclick="showTextCode()" />
       
        <div id="textdiv" class="contentdiv"
            style="overflow-x: scroll;overflow-y: scroll; height: 200px; width: 500px;border-width:5px;" >
            <hr></hr>
            <font color="0000FF" size="4">Text Code will desplay here.</font>
        </div>
    </body>
</html>

This html file can be a sample source view tools. You can enter the url and see the web source of its site. The html pages address is http://shdwfk.googlepages.com/test.html . And maybe you should download this page to local and try it.

这个工具可以被当作是一个简单的页面源码查看工具,你可以把地址输入文本框,点击按钮来查看页面源码。页面的源代码保存在http://shdwfk.googlepages.com/test.html 。你应该先下载这个文件,再去在浏览器里尝试,这样效果会好一点。

 

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值