ajax实战 源码,【达达前端】Ajax实战项目源码讲解（快速入门的实例）Github源码...

作者 | Jeskson

源码地址：

https://github.com/huangguangda/Ajaxitm

什么是Ajax技术？实战中的运用ajax技术，了解前后端交互的方式，了解移动端的模式，了解H5的新技术，了解CSS3的使用，和JQuery的使用。

Ajax技术可以提高用户体验，无刷新的与后台进行数据的交互，异步的操作方式，可以不用刷新页面提高性能。

了解前后端的交互流程，主要分为三部分，客户端，服务端，数据库，环境搭建，wamp，phpMyAdmin。

wamp，window，Apache，mysql，php。

创建项目：

创建一个名为AjaxItem的小项目

接下来附上我的代码

Title

用户名：

运行起来的效果是如下截图

添加一个服务端跳转的页面reg.php，服务端要找到输入框的值

提交表单方式：GET，POST

指定当前页的编码

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

连接数据库mysql

$con = mysql_connect();

默认值：config.default.php

Title

用户名：

2

get提交的特点：

post提交的特点：

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

服务端的书写：

选择数据库：mysqlselectdb();建立数据库，建表，键字段

指定数据库的编码格式

mysql_query("set names utf8");

获取传输数据

$_GET

$_POST

创建数据库：

创建表：

创建数据

sql查询：

select * from 表 where 字段 = 值

mysql_query

mysql_num_rows

reg.php

Title

用户名：

index.html

Title

用户名：

reg.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 "alert('已经有人注册过了')";

echo "history.back()";

}else {

$sql = "insert into reg(username) values ('$username')";

$sql = mysql_query($sql);

if($query){

echo "alert('注册成功')";

echo "window.location = 'index.html'";

}

}

?>

: 3

sql查询：

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代码：

Title

用户名：

var oInput = document.getElementById("input1");

var oDiv = document.getElementById('div1');

oInput.onblur = function () {

var xhr = new XMLHttpRequest();

xhr.open('POST','user.php',true);

}

user.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

Title

用户名：

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

}

index.html

Title

用户名：

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"

}

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

Title

$.ajax({

url: 'jquery.php',

type: 'GET',

data: {username: "dada"},

success: function(data){

console.log(data);

}

});

jquery.php

//echo 'red';

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

?>

请求相同部分：

require_once(‘connect.php');

ajax1.html

无标题文档

//get : http://localhost/reg.php?username=dada

//post : http://localhost/reg.php

用户名 :

ajax2.html

无标题文档

用户名 :

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

};

ajax3.html

无标题文档

用户名 :

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'

};

ajax4.html

无标题文档

$.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);

ajax5.html

无标题文档

$.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);

connect.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

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

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

//echo 'red';

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

?>

reg.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 "alert('已经有人注册过啦')";

echo "history.back()";

}

else{

$sql = "insert into reg(username) values('$username')";

$query = mysql_query($sql);

if($query){

echo "alert('注册成功')";

echo "window.location = 'index.html'";

}

}

?>

若本号内容有做得不到位的地方(比如：涉及版权或其他问题)，请及时联系我们进行整改即可，会在第一时间进行处理。