源码

　AJAX是前后端通讯的桥梁，后端可以获取前端提交的数据，处理后再返回给前端。这里为了演示简便，我们直接把从前端获取的值原样返回。本次使用PHP作为后台语言，PHP 用法见这里。

　先直接上代码：

　index.html为主页，index.js为它的js文件。PHP/main.PHP是后端PHP脚本。

index.html:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Ajax Test</title>
 5         <link rel="stylesheet" href="index.css">
 6         <script type="text/javascript" src="index.js"></script>
 7     </head>
 8     <body>
 9         <div class="inputDiv">
10             <div class="label">INPUT:</div>
11             <input type="textfield" id="inputTextField"/>
12             <button onclick="outPut()">Output</button>
13         </div>
14         <div class="outputDiv">
15             <div class="label">OUTPUT:</div>
16             <div id="output">[Output at here]</div>
17         </div>
18     </body>
19 </html>

index.js

 1 function outPut()
 2 {
 3     inputStr = document.getElementById("inputTextField").value;//获取文本框的输入
 4     console.log(inputStr);//输出到控制台检查js获取是否正确
 5     xmlhttp = new XMLHttpRequest();//建立XMLHttpRequest对象
 6     
 7     xmlhttp.onreadystatechange = function()
 8     {
 9         if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
10         {
11             document.getElementById("output").innerHTML = xmlhttp.responseText;//设置输出Div的innerHTML，设置为XMLHttpRequest对象返回的文本
12         }
13     }
14     
15     xmlhttp.open("GET","PHP/main.PHP?q=" + inputStr,true);
16     xmlhttp.send();
17 }

main.PHP

　要注意有的html页面中，由于要包含PHP 代码，后缀名也会是PHP，需要跟后端的脚本PHP区分。这里我把脚本PHP 文件放在了PHP目录下。

<?PHP
    //$q = isset($_GET["q"]) ? intval($_GET["q"]) : '';
    $q = $_GET["q"];
    echo $q;
?>

解析

　发送ajax时，首先要new一个XMLHttpRequest对象，使用它的open()方法与send()方法发送http请求。

　　open()：

　　使用这个方法创建http请求，参数一共有五个，详见这里。文中的意思是使用GET请求，使用PHP下main.PHP脚本，url内嵌的q为文本框输入的内容，异步。

　　send()：

　　发送请求。

　然后在后台脚本中，用$_GET获取url内嵌的q的值，然后就可以开始数据处理了。但是本次我们就直接echo回去。

　最后当onreadystatechange时，把html页面中输出div的innerHTML设为后台响应的数据。这里的responseText就是刚才PHP中echo的$q。

　　readyState：

　　当数据接收完毕时，readyState值为4。

　　status：

　　status是http状态码，200表示成功。

AJAX的一个简单实现

源码

解析

相关推荐