什么是ajax?
Asynchronous JavaScript and XML
也就是异步的JavaScript和XML
ajax的使用场景
前台获取数据
表单失焦验证
我们需要了解post和get区别
get参数是在地址栏中,大小2000个字符左右
post参数是在请求体中,网速良好,理论上是无限大的
如何构建一个完整的ajax请求
注意:一般情况下只能在有服务的环境下发送请求
ajax是局部刷新
1.创建ajax对象
var xhr = new XMLHttpRequest(); 新版本的浏览器
var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 老版本的IE
兼容写法:
var xhr;
if(window.XMLHttpRequest){ //常规,如果有,直接使用
xhr = new XMLHttpRequest();
}else{ //如果没有,老版本IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
这里我们需要先了解状态码和回应码
xhr.status可获取响应码
xhr.readyState可获取状态码
xhr.responseText可以获取响应文本
状态码:
•0: 请求未初始化
•1: 服务器连接已建立
•2: 请求已接收
•3: 请求处理中
•4: 请求已完成,且响应已就绪
响应码:
1xx 信息类
2xx 成功 200
3xx 重定向 304
4xx 客户端错误 404
5xx 服务端错误
2.绑定监听函数
xhr.onreadystatechange = function(){
当xhr.readyState == 4 || xhr.status == 200时
xhr.responseText响应文本
然后通过响应文本来执行要求
}
3.创建请求的消息,连接服务器 此时状态码由0变成了1
xhr.open('提交方式:get或post','链接地址',bool值);
boll为true异步;false同步
4.发送请求
xhr.send(null);
如果是post请求,就放post参数,如果是get请求,发送null就行了
这样就是一个完整的ajax请求了
实例:
使用ajax发送get请求
html结构如下
用户名:<input type="text" id="username">
<span id="ts"></span>
<br>
密码:<input type="text">
<button id="btn">验证用户名</button>
<script>
var username = document.getElementById("username");
var btn = document.getElementById("btn");
var ts= document.getElementById("ts");
// 点击btn发送ajax请求
btn.onclick = function(){
// 1.创建xhr
var xhr;
if(window.XMLHttpRequest){ //常规,如果有,直接使用
xhr = new XMLHttpRequest();
}else{ //如果没有,老版本IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.绑定监听函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
console.log(xhr.responseText)
if(xhr.responseText == 1){
ts.innerHTML = "该用户名已经被注册"
}else if(xhr.responseText == 0){
ts.innerHTML = "该用户名可以使用"
}
}
}
}
// 3.建立连接
xhr.open("GET","08.php?uname=" + username.value,true);
// 正则验证
// 4.发送请求
xhr.send(null)
}
</script>
然后用PHP模拟一个数据库
<?php
$db = ['jack','mack','mary']; //模拟数据库
$username = $_GET['uname']; //表示从前台传递过来的参数
$flag = false;
foreach($db as $n){
if($n === $username){
$flag = true;
break;
}
}
if($flag){
echo "1";
}else{
echo "0";
}
?>
使用ajax发送post请求
html代码:
学生姓名:<input type="text" id="uname"><br>
学生成绩:<input type="text" id="score"><br>
<button id="btn">注册</button>
<p id="p01"></p>
<script>
function get_id(id){
return document.getElementById(id);
}
var uname = get_id("uname");
var score = get_id("score");
var btn = get_id("btn");
var p01 = get_id("p01");
btn.onclick = function(){// 1.
var xhr;
if(window.XMLHttpRequest){ //常规,如果有,直接使用
xhr = new XMLHttpRequest();
}else{ //如果没有,老版本IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if (xhr.status == 200) {
p01.innerHTML = xhr.responseText;
}
}
// 3.
xhr.open('POST','http://localhost:8888/0220ajax/09.php',true);
// 3.5 在发送post请求的时候,你得告诉服务器你发送的是一个什么
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 4.发送
xhr.send('strName=' + uname.value + '&strScore=' + score.value);
}
}
</script>
php代码:
<?php
$uName = $_POST['strName'];
$uScore = $_POST['strScore'];
//此时,php已经拿到了学生的名字和分数
// 存到数据库
$output = $uName.'-'.$uScore.'-'.uniqid();
echo $output;
?>