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.
AJAX(Asynchronous 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 。你应该先下载这个文件,再去在浏览器里尝试,这样效果会好一点。