Ajax实战项目源码讲解 (内有Github源码)

点击上方蓝字 “ 一块儿学前端” 关注我哦!

加个 “ 星标” ，天天一篇文章，一块儿学前端！

做者 | Jeskson
javascript

来源 | 达达前端小酒馆php

2019年12月28日

源码地址：

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>

get提交的特色：

post提交的特色：

上面截图能够看出传输数据的区别，咱们通常对于数据的查询，尽可能采用get的方式，而咱们要对数据的修改，添加或者是删除，咱们能够用post比较好一点。

服务端的书写：

选择数据库：mysql_select_db();创建数据库，建表，键字段

指定数据库的编码格式

mysql_query("set names utf8");

获取传输数据

$_GET$_POST

建立数据库：

建立表：

建立数据

sql查询：

select * from 表 where 字段 = 值mysql_querymysql_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>";}}?>

sql查询：

select * from 表 where 字段 = 值mysql_querymysql_num_rows
sql添加insert into 表（字段）values（值）

Ajax基本使用：

XMLHttpRequestopenonreadystatechange
readyState0未初始化1初始化2发送数据3数据传送中4完成
send

onreadystatechange
statushttp状态码200301304403404500
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
urltypedatasuccesserrordataTypeasync

提供公共代码

require_once()
获取数据mysql_fetch_rowmysql_fetch_assocmysql_fetch_arraymysql_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":"能够注册"}';}?>

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?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>

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?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); ?>

user.php

<?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" : "能够注册"}';  }
?>

jquery.php

<?PHP
 //echo 'red'; echo '{"color":"red","width":"200px"}';
?>

reg.php

<?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>"; } }
?>

总结html

在博客平台里，将来的路还很长，也但愿本身之后的文章你们能多多支持，多多批评指正，咱们一块儿进步，一块儿走花路。前端

很是感谢读者能看到这里，若是这个文章写得还不错，以为「达达」我有点东西的话，以为我可以坚持的学习，以为此人能够交朋友的话，求点赞👍 求关注❤️ 求分享👥 对暖男我来讲真的java

很是有用！！！mysql

一名喜好编程技术与专一于前端的程序员，将web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享web前端相关的技术文章、工具资源，精选课程、热点资讯。jquery

二、为何学习JavaScript设计模式，由于它是核心程序员

三、一篇文章把你带入到JavaScript中的闭包与高级函数

四、大厂HR面试ES6中的深刻浅出面试题知识点

感谢阅读，原创不易，喜欢就点个[在看] 或 [转发]，这是我写做最大的动力。

意见反馈

若本号内容有作得不到位的地方（好比：涉及版权或其余问题），请及时联系咱们进行整改便可，会在第一时间进行处理。

这是一个有质量，有态度的公众号

点关注，有好运

若是以为本文不错的话，记得点“在看”噢！

本文分享自微信公众号 - 壹前端（yiqianduan）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。