Ajax(上)
Ajax模糊概念
Ajax:局部区域获取和更新后台数据，在不刷新页面的情况下
必须在同一域名下进行ajax操作
在安装运行本地服务器 wampserver 遇到的问题
本地服务器无法变绿:
1.80端口被占用，cmd->netstats -ano 找到80端口的PID
打开任务管理器详细信息找到对应PID关闭
2.可能是mysql服务未停用导致
Windows+R 打开cmd命令行输入 services.msc
找到MYSQL 停用或者设置为手动开启服务
关于eval() 和 setTimeout() 方法的补充
var str = 'alert(1)'
eval( str )
//eval()方法可以将其中的变量分析成js代码来读
//同理
setTimeout( 'fn()',1000 )
function fn(){
alert('fn')
}
Ajax运行机制
<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="gbk">
<meta name="Author" content="">
<style type='text/css'>
*{ margin:0; padding:0;font-family:'Microsoft yahei';}
a{ text-decoration:none;}
a img{ display:block; border:none;}
li{ list-style:none;}
</style>
<script type="text/javascript" src='http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js'></script>
</head>
<body>
<input type="button" id="btn" value='按钮' />
<script type="text/javascript">
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open( 'get' , '01-test.txt' , true );
xhr.send();
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 )
{
alert( xhr.responseText );
}
};
};
/*
1. var xhr = new XMLHttpRequest();
创建一个ajax对象
2. xhr.open( 'get' , '01-test.txt' , true );
请求的准备工作：
通过什么方式请求：
get : 发送的数据放在url里面
post : 发送的数据放在头文件里面，不在url
请求哪个页面：
url地址
是否异步：
3. xhr.send();
正式发送请求
4. xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 )
{
alert( xhr.responseText );
}
};
onreadystatechange ： 事件，当请求的状态码发生改变的时候触发
readyState ：请求的状态码
0 ：请求还没有建立（open执行之前）
1 ：请求建立了但还没有发送（open执行）
2 ：请求正式发送（send执行）
3 ：请求已经受理，有一部分数据可用了，但还没有完全处理完
4 ：请求完全完成，所有数据都处理完
responseText ：返回的数据
*/
</script>
</body>
</html>
案例之基于php后台的表单数据提交
基于本地服务器wampserver 文件夹下wamp/www/ajax/
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="ajax.php" method="post">
<p><input type="text" name="user" placeholder="请输入用户名"></p>
<p><input type="password" name="pwd" placeholder="请输入密码"></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>
ajax.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>我是P标签,!!!!!_!!!!!!!</p>
<p>
<!-- php语言可直接嵌入到html文档流中 -->
<?php
# $user = $_GET['user'];
# $pwd = $_GET['pwd'];
//获取html表单输入框的name属性,注意POST方法后面为[]
$user = $_POST['user'];
$pwd = $_POST['pwd'];
echo "请输入的用户名为: $user , 您输入的密码为: $pwd";
?>
</p>
</body>
</html>
案例之ajax与后台数据的请求过程
本地服务器wampserver 开启的状态下(服务器默认定位到wamp文件夹下的www目录)
ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
a{text-decoration: none;}
li{list-style: none;}
</style>
</head>
<body>
<p>我是P标签,啦啦啦啦啦</p>
<ul>
<li>姓名:ahs, 年龄:18</li>
<li>姓名:kris, 年龄:12</li>
<li>姓名:chung, 年龄:23</li>
</ul>
<script>
var oUl = document.getElementsByTagName('ul')[0];
// 设置每3秒更新一遍页面数据,在不刷新页面的情况下,ajax能够实时将后台数据库的数据更新到前端页面上
setInterval( fn , 3000 );
function fn() {
// 01.创建一个ajax对象
var xhr = new XMLHttpRequest();
// 02.准备工作，通过什么方式请求
xhr.open('get','data.php',true);
// 03.正式发送请求
xhr.send();
// 04.通过状态码显示ajax请求返回的数据
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 ){
//eval()方法将返回的数据以js的格式读
var vTxt = eval( '(' + xhr.responseText + ')' );
oUl.innerHTML = '';
for(var i=0;i<vTxt.length;i++){
oUl.innerHTML += '<li>姓名:'+ vTxt[i].name + ' ,年龄: ' + vTxt[i].age + '</li>';
}
}
}
}
</script>
</body>
</html>
data.php
<?php
$a = array(
array('name'=>'越祁', 'age'=>'18'),
array('name'=>'云天河', 'age'=>'20'),
array('name'=>'越今朝', 'age'=>'21'),
array('name'=>'慕容紫英', 'age'=>'25'),
array('name'=>'柳梦璃', 'age'=>'19'),
array('name'=>'韩菱纱', 'age'=>'20'),
);
# 输出语句
echo json_encode($a)
?>
后台数据实时更改并保存 页面局部ajax请求的数据信息就会更改，在不刷新页面的前提下
Ajax(下)
Ajax的封装
ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="点击我获取后台数据">
<script>
var oBtn = document.getElementById('btn');
// 按钮事件
oBtn.onclick = function(){
ajax({
//此处type在封装方法中有默认值，可写可不写
type : 'post',
url : 'data.php',
data : {
user : 'admin',
pwd : '123465',
},
success : function(msg){
alert(msg)
},
error : function(status){
alert('请求出现了一点错误,错误代码: ' + status);
}
})
};
// 封装ajax方法
function ajax(mJson){
/*
* 实参mJson属性:
* type : string类型，选传，默认'get', 可以选择'get'/'post';
* url : string类型,必传,代表请求的页面
* data : json类型 必传，只有在需要传输数据的时候存在
* success : function类型 选传，代表请求成功后的回调函数,第一个形参代表返回的数据
* error : function类型 选传，代表HTTP状态码出错的时候的回调函数,第一个形参代表HTTP状态码
*
* */
// 默认get方法，当type未设置时候使用默认请求方法
var type = mJson.type || 'get',
url = mJson.url,
data = mJson.data,
success = mJson.success,
error = mJson.error,
str = '';
if( data ){
for(var i in data)str += i + '=' + data[i] + '&';
// 这里为url 加上时间戳以解决缓存问题,(当浏览器重复访问同一url时会进行数据缓存，
// 下次短时间访问同一url会直接显示缓存数据，不利于后台更新数据到页面，post方法则没有缓存问题)
// 如果请求方式是get请求，则在后面加上时间戳以解决缓存问题
if( type.toLowerCase() == 'get')url += '?' + str + '_=' + new Date().getTime();
};
//下面进行ajax请求
var xhr = new XMLHttpRequest();
// open()方法第三个参数为是否异步请求数据
xhr.open(type,url,true);
/*
* ajax设置请求头
* setRequestHeader
* 设置请求头前需先调用open()方法打开一个url
* 设置数据格式(编码风格可带可不带)
* 1.发送json格式数据
* xhr.setRequestHeader('Content-type','application/json;charset=utf-8');
* 2.发送表单数据
* xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
* 3.发送纯文本
* xhr.setRequestHeader("Content-type", "text/plain; charset=utf-8");
* 4.发送html文本
* xhr.setRequestHeader("Content-type", "text/html; charset=utf-8");
*
* */
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// post 方法需要再次传入参数str
xhr.send(str);
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 ){
// 获取状态码，请求成功返回以2开头的状态码，请求错误则返回404
var status = xhr.status;
// xhr.responseText 和 status 为实参，在事件中用形参将其传入
(status >= 200 && status < 300)?(success && success(xhr.responseText)):(error && error(status));
}
}
}
</script>
</body>
</html>
<?php
//
// $user = $_GET['user'];
// $pwd = $_GET['pwd'];
// echo "您输入的用户名为: $user, 您输入的密码为: $pwd"
//
//?>
<?php
$user = $_POST['user'];
$pwd = $_POST['pwd'];
echo "您输入的用户名为: $user, 您输入的密码为: $pwd"
?>
JQ插件内的ajax方法
jq插件里的ajax
先引用jq库
<script type="text/javascript" href="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
$.ajax().html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="user">
<input type="password" name="pwd">
<input type="button" id="btn" value="按钮">
<script>
var oUser = document.getElementsByName('user')[0];
var oPwd = document.getElementsByName('pwd')[0];
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
if ( oUser.value && oPwd.value ){
$.ajax({
type : 'post',
url : 'data.php',
// data : {
// user : 'chs',
// pwd : '123456',
//
// },
// data : 'user=chs&pwd=123456', jq插件中支持字符串和json两种写法
data : oUser.name + '=' + oUser.value + '&' + oPwd.name + '=' + oPwd.value,
success : function(msg){
alert(msg);
},
// jq插件内的封装ajax方法 error第一个参数代表ajax对象
error : function( a ){
alert(a.status)
},
});
}
/*
*
* jq插件ajax方法的get和post方法
*
* */
// $.get( 'a.txt' , function(msg){
// alert(msg);
// })
// 第二个参数为data
// $.post( 'data.php', (oUser.name + '=' + oUser.value + '&' + oPwd.name + '=' + oPwd.value), function(msg){
// alert(msg);
// })
};
</script>
</body>
</html>
data.php
<?php
//
// $user = $_GET['user'];
// $pwd = $_GET['pwd'];
// echo "您输入的用户名为: $user, 您输入的密码为: $pwd"
//
//?>
<?php
$user = $_POST['user'];
$pwd = $_POST['pwd'];
echo "您输入的用户名为: $user, 您输入的密码为: $pwd"
?>
$.ajax()方法获取数据
$.post()方法获取数据
