【達達前端】Ajax實戰項目源碼講解（快速入門的執行個體）Github源碼

作者 | Jeskson

源碼位址：

https://github.com/huangguangda/Ajaxitm

什麼是Ajax技術？實戰中的運用ajax技術，了解前後端互動的方式，了解移動端的模式，了解H5的新技術，了解CSS3的使用，和JQuery的使用。

Ajax技術可以提高使用者體驗，無重新整理的與背景進行資料的互動，異步的操作方式，可以不用重新整理頁面提高性能。

了解前後端的互動流程，主要分為三部分，用戶端，服務端，資料庫，環境搭建，wamp，phpMyAdmin。

wamp，window，Apache，mysql，php。

建立項目：

建立一個名為AjaxItem的小項目

接下來附上我的代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    使用者名：<input type="text">
    <input type="submit" value="注冊">
</form>
</body>
</html>

運作起來的效果是如下截圖

添加一個服務端跳轉的頁面reg.php，服務端要找到輸入框的值

送出表單方式：GET，POST

指定目前頁的編碼

header("Content-type:text/html;charset=utf-8");

連接配接資料庫mysql

$con = mysql_connect();

預設值：config.default.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="reg.php">
    使用者名：<input type="text" name="username">
    <input type="submit" value="注冊">
</form>
</body>
</html>

2

get送出的特點：

post送出的特點：

上面截圖可以看出傳輸資料的差別，我們一般對于資料的查詢，盡量采用get的方式，而我們要對資料的修改，添加或者是删除，我們可以用post比較好一點。

服務端的書寫：

選擇資料庫：mysqlselectdb();建立資料庫，建表，鍵字段

指定資料庫的編碼格式

mysql_query("set names utf8");

擷取傳輸資料

$_GET
$_POST

建立資料庫：

建立表：

建立資料

sql查詢：

select * from 表 where 字段 = 值
mysql_query
mysql_num_rows

reg.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="reg.php" method="post">
    使用者名：<input type="text" name="username">
    <input type="submit" value="注冊">
</form>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="reg.php" method="post">
    使用者名：<input type="text" name="username">
    <input type="submit" value="注冊">
</form>
</body>
</html>

reg.php代碼：

<?php
// 定義編碼格式
header("Content-type:text/html;charset=utf-8");
// 連接配接mysql
$con = mysql_connect("localhost",'root','123456');
mysql_select_db('ajaxitem');
mysql_query('set names utf8');

$username = $_POST['username'];
$sql = "select * from reg where username = '$username'";
$query = mysql_query($sql);

// 如何區分查詢到還是沒有查詢到呢？
//mysql_num_rows($query);
// 找到為1，沒有找到為0

if($query && mysql_num_rows($query)){
 echo "<script>alert('已經有人注冊過了')</script>";
 echo "<script>history.back()</script>";
}else {
$sql = "insert into reg(username) values ('$username')";
$sql = mysql_query($sql);
if($query){
    echo "<script>alert('注冊成功')</script>";
    echo "<script>window.location = 'index.html'</script>";
}
}
?>

: 3

select * from 表 where 字段 = 值
mysql_query
mysql_num_rows

sql添加

insert into 表（字段）values（值）

Ajax基本使用：

XMLHttpRequest
open
onreadystatechange

readyState
0未初始化
1初始化
2發送資料
3資料傳送中
4完成

send

onreadystatechange

status
http狀态碼
200
301
304
403
404
500

statusText

responseText
 responseXML
 JSON.parse

POST方式：
需要設定頭資訊
位置在send前

setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
setRequestHeader(‘Content-Type’, ‘application/json’);

JSON_stringify

JQuery中的Ajax

$.ajax

url
type
data
success
error
dataType
async

提供公共代碼

require_once()

擷取資料
mysql_fetch_row
mysql_fetch_assoc
mysql_fetch_array
mysql_fetch_object

增删改查
delete from 表 where 字段 = 值
update 表 set 字段 = 新值 where id = $id;

Functions to create xhrs

function createStandardXHR() {
 try {
  return new window.XMLHttpRequest();
 }catch(e){}
}

function createActiveXHR() {
 try {
  return new window.ActiveXObject("Microsoft.XMLHTTP");
  }catch(e){}
}

index.html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="reg.php" method="post">
    使用者名：<input type="text" name="username">
    <input type="submit" value="注冊">
</form>
<div id="div">

</div>
<script>
var oInput = document.getElementById("input1");
var oDiv = document.getElementById('div1');

oInput.onblur = function () {
    var xhr = new XMLHttpRequest();
    xhr.open('POST','user.php',true);

}
</script>
</body>
</html>

user.php

<?php
// 定義編碼格式
header("Content-type:text/html;charset=utf-8");
// 連接配接mysql
$con = mysql_connect("localhost",'root','123456');
mysql_select_db('ajaxitem');
mysql_query('set names utf8');

$username = $_GET['username'];
$sql = "select * from reg where username = '$username'";
$query = mysql_query($sql);

if($sql && mysql_num_rows($query)){
    echo '{"code":0, "message": "已經有人注冊過啦" }';
}else {
    echo  '{"code":1,"message":"可以注冊"}';
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="reg.php" method="post">
    使用者名：<input type="text" name="username">
    <input type="submit" value="注冊">
</form>
<div id="div">

</div>
<script>
var oInput = document.getElementById("input1");
var oDiv = document.getElementById('div1');

oInput.onblur = function () {
    var xhr = new XMLHttpRequest();
    // xhr.open('POST','user.php?username=' encodeURIComponent(this.value),true);
    xhr.open('POST','user.php',true);

    // 監聽整個流程，多次觸發
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                xhr.responseText;
                // xhr.responseXML
                // console.log(JSON.parse(xhr.responseText));
                var obj = JSON.parse(xhr.responseText);
                if(obj.code) {
                    oDiv.innerHTML = obj.message
                }else {
                    oDiv.innerHTML = obj.message
                }
            }
        }
    };
    // xhr.send(null);
    xhr.send('username' encodeURIComponent(this.value));
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="reg.php" method="post">
    使用者名：<input type="text" name="username">
    <input type="submit" value="注冊">
</form>
<div id="div">

</div>
<script>
var oInput = document.getElementById("input1");
var oDiv = document.getElementById('div1');

oInput.onblur = function () {
    var xhr = new XMLHttpRequest();
    // xhr.open('POST','user.php?username=' encodeURIComponent(this.value),true);
    xhr.open('POST','user.php',true);

    // 監聽整個流程，多次觸發
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                xhr.responseText;
                // xhr.responseXML
                // console.log(JSON.parse(xhr.responseText));
                var obj = JSON.parse(xhr.responseText);
                if(obj.code) {
                    oDiv.innerHTML = obj.message
                }else {
                    oDiv.innerHTML = obj.message
                }
            }
        }
    };
    // xhr.send(null);
    // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // xhr.send('username' encodeURIComponent(this.value));

    // 'username=dada&age=12'
    // xhr.setRequestHeader('Content-Type','application/json');
    // xhr.send('{ "username": dada, "age": 12}');
    // xhr.send(JSON.stringify({"username":"dada","age":12}));

    // {"username":"dada","age":12} -> $.param() -> "useranme=dada&age=12"
}
</script>
</body>
</html>

JQuery:

if(s.data && s.processData && typeof s.data !== "string"){
 s.data = JQuery.param(s.data, s.traditional);
}

inspectPrefiltersOrTransports(prefilters, s, options, jqXHR);

if(state === 2){
return jqXHR;
}

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
$.ajax({
 url: 'jquery.php',
 type:  'GET',
 data: {username: "dada"},
 success: function(data){
  console.log(data);
 }
});
</body>
</html>

jquery.php

<?PHP

  //echo 'red';
  echo '{"color":"red","width":"200px"}';

?>

請求相同部分：

require_once(‘connect.php');

ajax1.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無标題文檔</title>
<script>
//get : http://localhost/reg.php?username=dada
//post : http://localhost/reg.php
</script>
</head>

<body>
<form action="reg.php" method="post">
  使用者名 : <input type="text" name="username">   <!--username=dada-->
    <input type="submit" value="注冊">
</form>
</body>
</html>

ajax2.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無标題文檔</title>

</head>

<body>
<form action="reg.php" method="post">
  使用者名 : <input id="input1" type="text" name="username">   <!--username=dada-->
    <input type="submit" value="注冊">
</form>
<div id="div1"></div>
<script>
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1');

oInput.onblur = function(){
  var xhr = new XMLHttpRequest();
  xhr.open('GET','user.php?username=' encodeURIComponent(this.value),true);
  xhr.onreadystatechange = function(){
    
    if(xhr.readyState == 4){
      //console.log(xhr.status);
      //console.log(xhr.statusText);
      if(xhr.status == 200){
        //console.log(xhr.responseText);
        //console.log(JSON.parse(xhr.responseText));
        var obj = JSON.parse(xhr.responseText);
        if(obj.code){
          oDiv.innerHTML = obj.message;
        }
        else{
          oDiv.innerHTML = obj.message;
        }
      }
    }
    
  };
  xhr.send(null);
};
</script>
</body>
</html>

ajax3.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無标題文檔</title>

</head>

<body>
<form action="reg.php" method="post">
  使用者名 : <input id="input1" type="text" name="username">   <!--username=dada-->
    <input type="submit" value="注冊">
</form>
<div id="div1"></div>
<script>
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1');

oInput.onblur = function(){
  var xhr = new XMLHttpRequest();
  xhr.open('POST','user.php',true);
  xhr.onreadystatechange = function(){
    
    if(xhr.readyState == 4){
      //console.log(xhr.status);
      //console.log(xhr.statusText);
      if(xhr.status == 200){
        //console.log(xhr.responseText);
        //console.log(JSON.parse(xhr.responseText));
        var obj = JSON.parse(xhr.responseText);
        if(obj.code){
          oDiv.innerHTML = obj.message;
        }
        else{
          oDiv.innerHTML = obj.message;
        }
      }
    }
    
  };
  //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  //xhr.send('username=' encodeURIComponent(this.value));
  
  //'username=dada&age=12'
  
  //xhr.setRequestHeader('Content-Type', 'application/json');
  //xhr.send('{"username":"dada","age":12}');
  //xhr.send(JSON.stringify({"username":"dada","age":12}));
  
  //{"username":"dada","age":12} ->  $.param()  ->  'username=dada&age=12'
  
};
</script>
</body>
</html>

ajax4.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無标題文檔</title>
<script src="jquery-2.1.3.min.js"></script>
<script>

$.ajax({
  url : 'jquery.php',
  type : 'POST',
  data : {username:"dada"},
  dataType : 'json',
  async : false,
  success : function(data){   //xhr.responseText
    console.log(data);
    //var obj = JSON.parse(data);
    //console.log(obj);
  },
  error : function(err){
    console.log(err.status);
    console.log(err.statusText);
  }
});
console.log(123);
</script>
</head>

<body>
</body>
</html>

ajax5.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無标題文檔</title>
<script src="jquery-2.1.3.min.js"></script>
<script>

$.ajax({
  url : 'data.php',
  type : 'POST',
  data : {username:"dada"},
  dataType : 'json',
  async : false,
  success : function(data){   //xhr.responseText
    console.log(data);
    //var obj = JSON.parse(data);
    //console.log(obj);
  },
  error : function(err){
    console.log(err.status);
    console.log(err.statusText);
  }
});
console.log(123);
</script>
</head>

<body>
</body>
</html>

connect.php

<?PHP

  header("Content-type: text/html; charset=utf-8");
  $con = mysql_connect('localhost','root','');
  mysql_select_db('ajaxitem');
  mysql_query('set names utf8');

?

data.php

<?PHP

  require_once('connect.php');
  
  //$sql = "delete from reg where username = 'da1'";
  //$query = mysql_query($sql);
  
  $sql = "update reg set username = 'da1' where id = 4";
  $query = mysql_query($sql);
  
  $sql = "select * from reg limit 2";
  $query = mysql_query($sql);
  
  //print_r($query);
  //print_r(mysql_num_rows($query));
  
  //$row = mysql_fetch_row($query);
  //print_r($row);
  
  /*while($row = mysql_fetch_row($query)){    //數組下标的方式輸入
    print_r($row);
  }*/
  
  /*while($row = mysql_fetch_assoc($query)){    //數組鍵值的方式輸入
    print_r($row);
  }*/
  
  /*while($row = mysql_fetch_array($query)){    //數組整體的方式輸入
    print_r($row);
  }*/
  
  /*while($row = mysql_fetch_object($query)){    //對象鍵值的方式輸入
    print_r($row);
  }*/
  /*while($row = mysql_fetch_assoc($query)){    //數組鍵值的方式輸入
    print_r($row['username']);
  }*/
  /*while($row = mysql_fetch_object($query)){    //對象鍵值的方式輸入
    print_r($row -> username);
  }*/
  while($row = mysql_fetch_assoc($query)){    //數組鍵值的方式輸入
    $data[] = $row;
  }
  
  //print_r(json_encode($data));
  
  echo json_encode($data);
  
?>

<?PHP

  require_once('connect.php');
  
  $username = $_REQUEST['username'];
  
  $sql = "select * from reg where username = '$username'";
  $query = mysql_query($sql);
  
  if($query && mysql_num_rows($query)){
    echo '{"code":0 , "message" : "已經有人注冊過啦"}'; 
  }
  else{
    echo '{"code":1 , "message" : "可以注冊"}'; 
  }

?>

<?PHP

  //echo 'red';
  echo '{"color":"red","width":"200px"}';

?>

<?PHP

  //username -> hello
  
  require_once('connect.php');

  $username = $_POST['username'];
  $sql = "select * from reg where username = '$username'";
  $query = mysql_query($sql);
    
  if($query && mysql_num_rows($query)){
    echo "<script>alert('已經有人注冊過啦')</script>";
    echo "<script>history.back()</script>";
  }
  else{
    $sql = "insert into reg(username) values('$username')";
    $query = mysql_query($sql);
    if($query){
      echo "<script>alert('注冊成功')</script>";
      echo "<script>window.location = 'index.html'</script>";
    }
  }

?>

若本号内容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯系我們進行整改即可，會在第一時間進行處理。

【達達前端】Ajax實戰項目源碼講解（快速入門的執行個體）Github源碼

繼續閱讀

使用 flex4 開發通用統計系統，釋出源代碼至github

開源項目成熟度分析工具-利用github api擷取代碼庫的資訊1.github api2.GET功能

通過runtime替換系統類實作的代碼（從github開源庫fdstackview中摘錄）

[版本控制]如何在GitHub上下載下傳自己喜歡的開源代碼并送出修改

如何從github上面拷貝源碼

Spring+SpringMvc+Mybatis架構內建搭建教程五(項目源碼釋出到GitHub)

2017年Q1全球威脅研究報告：網絡可見性下降VS 攻擊向量上升

2017年Q1全球威脅研究報告：網絡可見性下降VS 攻擊向量上升

使用pjsip傳輸已經編碼的視訊,源碼在github

git/github運用

在 github 上擷取源碼

運維人員應人手一個GitHub帳号

github郵箱驗證技巧

當60億次攻擊來襲，人機聯合打了一場漂亮的防禦戰源于智造工廠的機器智能人機智能聯合的戰績

目标檢測 | 豐富特征導向Refinement Network用于目标檢測（附github源碼）