最近又在拍黄片(PHP)了,女主Ajax前来捧场。
让我们进入片场看看~
= =进入正题。
度娘科普:AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX不是语言,是一种基于Javascript的开发技术。
应用的实现基于wamp搭建的本地服务器。
程序框架。
// index.html部分
0. 用户表单输入。 1.ajax处理表单(具体流程在代码注释给出)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>Ajax Html Form.</title> <meta http-equiv= "Content-Type" content = "text/html"; charset="utf-8"> </head> <body> <h2>Stuff Personal Message Search.</h2> <label>Please input the ID.</label><br> <input type="text" name="keyword" id="keyword"> <!-- input的id属性,将用于ajax的getElementById()的索引 --> <button id="search">Search</button> <p id="searchResult"></p> <h2>Create Staff</h2> <label>Name:</label> <input type="text" name="staffName" id="staffName"> <label>ID:</label> <input type="text" name="staffNumber" id="staffNumber"> <label>Sex:</label> <select id="staffSex"> <option>male</option> <option>female</option> </select> <button id="save">Save</button> <p id="createResult"></p> <script type="text/javascript"> document.getElementById("search").onclick=function() { //发送Ajax查询请求并处理 //XMLHttpRequest用于客户端与服务器传输url信息的接口类 //XHR提供了不用刷新网页并从url检索部分信息的功能 //XHR在Ajax编程中被广泛运用(几乎所有Ajax程序都需要XHR的帮助) var request = new XMLHttpRequest(); //顾名思义,open()方法以GET(PHP)的传递形式,将url传递给service.php request.open("GET","service.php?number="+document.getElementById("keyword").value); request.send(); request.onreadystatechange = function() { // readyState属性 // 0 :请求未初始化 1 : 服务器已经建立,open已调用 2 :请求已接受 // 3 :请求处理中 4 : 请求已完成,且成功响应 详见 developer.mozilla.org if( request.readyState === 4 ){ if( request.status === 200 ){ //以数字形式返回http状态码,request未完成或者出现错误时 返回值为0 //responseText将在searchResult处生成HTML代码 document.getElementById("searchResult").innerHTML = request.responseText; } else{//弹窗生成警告信息 alert("发生错误"+request.status); } } } } document.getElementById("save").onclick=function() { var request = new XMLHttpRequest(); request.open("POST","service.php"); var data = "name=" + document.getElementById("staffName").value + "&number=" +document.getElementById("staffNumber").value + "&sex=" + document.getElementById("staffSex").value; //将data数据设置在request请求的url中,详见 developer.mozilla.org request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); request.send(data); request. ge = function() { if( request.readyState === 4 ){ if( request.status === 200 ){ document.getElementById("createResult").innerHTML = request.responseText; } else{ alert("发生错误"+request.status); } } } } </script> </body> </html>
//service.php部分
0. GET形式传递时,检索。POST形式传递时,创建。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>Ajax Service</title> </head> <body> <?php $staff = array( array("name" => "hongQi","number" => "101","sex" => "male"), array("name" => "guoJing","number" => "102","sex" => "male" ), array("name" => "huangRong","number" => "103","sex" => "female") ); if( $_SERVER["REQUEST_METHOD"] == "GET" ){ search(); } else if( $_SERVER["REQUEST_METHOD"] == "POST" ){ create(); } function search(){ if( !isset($_GET["number"]) || empty($_GET["number"]) ){ echo "参数错误"; return ; } global $staff; $number = $_GET["number"]; $result = "not found the staff"; foreach ($staff as $value) { if( $value["number"] == $number ){ $result = "Found the staff--Id:".$value["number"]." Name: ".$value["name"]." Sex: ".$value["sex"]; break; } } echo $result; } function create(){ if( !isset($_POST["name"])||empty($_POST["name"])|| !isset($_POST["number"])||empty($_POST["number"])|| !isset($_POST["sex"])||empty($_POST["sex"]) ){ echo "parameter mistake"; return ; } echo "Staff:".$_POST["name"]." save successfully!"; } ?> </body> </html>
简单的 Ajax + PHP 就完成啦。
特别感谢。imooc慕课网的Ajax全接触课程。代码源自此课程。详细讲解可上慕课网查看。
后续更新。Ajax + PHP 实现域名查询程序。