废话不多说先来看一个ajax的小案例：
整体案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX初识</title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("btn");
btn.onclick = function() {
//获取用户的用户名和密码
//
var uname = document.getElementById("username").value;
var pass = document.getElementById("pass").value;
//使用ajax发送请求需要如下几步
//1.创建XMLHttpRequest对象 ajax的核心对象
var xhr = new XMLHttpRequest();
//2.准备发送
xhr.open('get','01check.php?username=' + uname + '&password=' + pass, true);
//3.执行发送
xhr.send(null);
//4.指定回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// 4XX 找不到 2XX成功 5XX 服务器错误
if(xhr.status = 200) {
var data = xhr.responseText;
var info = document.getElementById("info");
if (data == "1") {
info.innerHTML = '登录成功'
} else {
info.innerHTML = '用户名或密码错误';
}
}
}
}
}
}
</script>
</head>
<body>
<form>
用户名: <input type="text" name="username" id="username">
<span id="info"></span>
<br />
密码: <input type="password" name="pass" id="pass">
<input type="button" value="登录" id="btn">
</form>
</body>
</html>
<?php
//先拿到数据
$uname = $_POST['username'];
$pass = $_POST['password'];
//死数据
if($uname == "admin" && $pass = "123") {
echo "1";
}else {
echo "2";
}
?>
第一步：Ajax核心对象的解析
XMLHttpRequest 是建立客户端和服务器端的通信
var xhr = new XMLHttpRequest(); //标准浏览器 ie7-11 chrome firefox
var xhr = new ActiveXObject("Microsoft.XMLHTTP") //IE6的写法
所以我们创建Ajax的标准写法就是：
//创建核心对象的标准写法
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); //标准浏览器的写法
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6
}
非标准写法是使用try和catch：
//非标准写法 异常捕获机制
try {
xhr = new XMLHttpRequest();
} catch {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步：准备发送
//2.准备发送
/*
参数一: 请求方式(get获取数据 post提交数据)
参数二: 请求地址
参数三: 同步或者异步的标识符 默认是true 表示异步 false表示同步
如果是get请求 就会把参数放在URL(Unifrom Resource Location 同一资源定位符)中 传递
encodeURI() 用来对中文参数进行编码 防止出现乱码
*/
//这里的请求方法时get方法，post请求方法放在下一步去讲
xhr.open('get','01check.php?username=' + encodeURI(uname) + '&password=' + pass, true);
//这是下一步的执行发送，但是他是get请求的执行发送
xhr.send(null);
get和post的请求的区别：
get：我们可以看成get是把数据放在信封上，传递的速度快，因为不用打开信封就可以看到，但是谁都可以看到所以是不安全的，并且传递的数据是有长度的
post：可以看成是把数据放在信封里面用信纸写的，同理我们要先打开信封，所以传递速度相对较慢，也比较安全，并且传递的数据是没有长度限制的。
第三步执行发送
//3.执行发送
//post 请求参数放在send中传递 不需要进行编码encodeURI转码
//post 请求必须设置请求头信息
//post 请求必须设置请求头信息
//post 请求必须设置请求头信息，这个很重要
xhr.open('post','01check.php', true);
//出现乱码时，请求头部信息
// mime text/plain----纯文本 text/html----html
// header("Content-type: text/html; charset=utf-8");
//setRequestHeader 是设置HTTP请求头部的方法
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //这里不需要记住，只要知道使用post时要添加这句代码就行
var param = "username=" + uname + "&password=" + pass;
xhr.send(param);
第四步指定回调函数
//4.指定回调函数
xhr.onreadystatechange = function() {
/*
readyState
0 对象(XMLHttpRequtest)创建成功
1 表示已经发送了请求
2 浏览器已经收到了服务器响应的数据
3 正在解析数据
4 数据解析完成 可以使用了
*/
if (xhr.readyState == 4) {
// 4表示服务器返回的数据已经可以使用了 但是并不意味着我们的数据是正常
// 4XX（比如404） 找不到 2XX（比如200）成功 5XX（比如500） 服务器错误
if(xhr.status = 200) {
/*
http常见的状态值
200 表示响应成功
404 表示没有找到对应资源
500 表示服务器端错误
*/
var data = xhr.responseText;
console.log(xhr.responseText);
var info = document.getElementById("info");
if (data == "1") {
info.innerHTML = '登录成功'
} else {
info.innerHTML = '用户名或密码错误';
}
}
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
