Ajax的概念和优势
*什么是Ajax
*Ajax(异步 JavaScript 和XML)，中文名：阿贾克斯。是一种
创建异步交互式网页应用的网页开发技术。
*Ajax是一种在无需重新加载整个网页的情况下，能够更新部分
网页的技术。
*前端通过与服务器进行少量数据交换，Ajax可以使网页实现异
步更新。这意味着在不重新加载整个网页的情况下，对网页的某
部分进行更新。
为什么要使用Ajax
1、更自然、流畅的用户体验，对用户操作即时响应
2、在不中断用户操作的影响下与WEB服务器进行通信
3、通过局部更新页面降低网络流量，提高网络的使用效率
同步与异步
同步异步同时出现时，先执行同步；
异步目前包括：1、定时器；2、事件、3、Ajax
XMLHttpRequest对象
理解：
Ajax的核心对象是XMLHttpRequest，即Ajax的异步操作，和
服务器交互主要依赖该对象。
XMLHttpRequest对象提供了对HTTP协议的完全的访问，包括
做出POST和HEAD请求以及普通的get请求的能力；
在前浏览器只能显示和发送请求接受响应,只能进行一件事情，
没法同时进行。
使用XMLHttpRequest可以把浏览器解脱出来，让浏览器只负责
显示，XMLHttpRequest对象负责请求。大大提高了效率
Ajax的编写步骤
1、创建XMLHttpRequest对象
let request = new XMLHttpRequest();
2、设置请求参数
request.open("get","www.baidu.com",true);
3、设置回调函数
request.onreadystatechange=function(){
if(request.readyState==4&&reques.status==200){
alert(request.responseText)
}
}
4、发送请求
request。send();
5、接受响应
request.responseText或者request.responseXML
利用Ajax，GET方式的注册验证案列
<body>
<input type="text"/><span></span>
</body>
<script>
let oinput=documen.querySelector("input");
oinput.onblur=function(){
let xhr= new XMLHttpRequest();
xhr.open("get","本页地址？userName="this.value,true);
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
fun(xhr.responseText)
}
}
xhr.send();
}
function fun(resText){
let ospan=document.querySelector("span")
ospan.innerHTML=resText
}
</script>
php文件
<?php
//首先防止中文乱码
header("Content-type:text/html;charset=utf-8");
$userName = $_GET["userName"];
$conn=mysql_connect("localhost","root","root");
//链接数据库
mysql_select_db("在mysql里面建的数据库");
$result=mysql_query("select*from student where stu_name=
'$userName'",$coon);
//echo就是responseText
if(mysql_num_rows($result)==1){
echo"不能注册"
}else{
echo"可以注册"}
mysql_close($conn);
?>
|