Ajax的初步认识

最新推荐文章于 2024-07-18 15:09:36 发布

John_Wick___

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量100

点赞数

文章标签： Ajax 异步更新用户体验 XMLHttpRequest 注册验证

本文链接：https://blog.csdn.net/John_Wick___/article/details/119185157

版权

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(){




// 1、声明Ajax的关键对象
let xhr= new XMLHttpRequest();



//2、设置请求参数
//get请求传参的方式 url地址？key1=value1&key2=value2
xhr.open("get","本页地址？userName="this.value,true);



//3、设置回调函数
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
fun(xhr.responseText)
}
}

//4、发送请求
xhr.send();
}
//5、接受响应
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);






?>

John_Wick___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的初步认识

Ajax的概念和优势*什么是Ajax*Ajax(异步 JavaScript 和XML)，中文名：阿贾克斯。是一种创建异步交互式网页应用的网页开发技术。*Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。*前端通过与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着在不重新加载整个网页的情况下，对网页的某部分进行更新。为什么要使用Ajax1、更自然、流畅的用户体验，对用户操作即时响应2、在不中断用户操作的影响下与WEB服务器进行通信3、通过局部更新页
复制链接

扫一扫