-AJAX
2021/12/28 23:39:13
本文主要是介绍-AJAX,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、AJAX的概念和优势:
AJAX(Asynchronous Javascript And XML)是异步的javascript和XML
传统网站中,如果需要更新页面内容,必须重载整个网页页面。
ajax是可以在不刷新加载整个页面的情况下,对网页的某部分进行更新
网站欣赏:
http://www.baidu.com
https://juejin.cn/backend
http://www.toutiao.com
二、同步交互和异步交互
同步交互:客户端向服务器端发送请求,必须等到结果返回,才能进行其他的业务操作
异步交互:客户端向服务器端发送请求,不必等到结果返回,就可以进行其他的业务操作。
三、XMLHttpRequest
AJAX的核心对象是XMLHttpRequest,即AJAX的异步操作,和服务器交互主要依赖该对象。
以前浏览器负责显示页面和发送请求接收响应(和后端交互)。两件事情同一时刻只能做件,没法同时进行。这样会让用户感觉不好(友好性不好),比如:当浏览器发送请求时,就没法显示内容,这时浏览器中是空白显示,给用户的感觉不好。
现代浏览器,使用XMLHttpRequest对象,可以把浏览器解脱出来,可以让浏览器只负责显示,而完成请求的事情由XMLHttpRequest对象负责。这样两者各负其责,效率更高,效果更好,用户体验很好,用户永远不会看到浏览器空白。
XMLHttpRequest的属性
属性名 | 备注 |
onreadystatechange | 当每次状态改变所触发事件处理程序(会4次) |
readyState | 请求状态码。 |
responseText | 从服务器端返回的数据的字符串形式 |
status | 请求的响应状态。404(未找到) 200(就绪) |
属性解读:
在客户端与服务器的通信过程中,
XMLHttpRequest.readyState 体现着当前请求以及服务端响应的状态。
它的值有
0:初始化,XMLHttpRequest对象还没有完成初始化
1:载入,XMLHttpRequest对象开始发送请求
2:载入完成,XMLHttpRequest对象的请求发送完成
3:解析,XMLHttpRequest对象开始读取服务器的响应
4:完成,XMLHttpRequest对象读取服务器响应结束
xhr.readyState属性值是0、1、2、3、4。其中状态4代表响应完成。
-----------------------------------------------------------------------
服务器响应完成之后,我们通常会使用 XMLHttpRequest.status代表响应中的数字状态码。
代表着我们的 Ajax 请求的状态成功与否。
200 服务器已经成功处理了请求并响应到网页
404 请求失败,请求所希望得到的资源未被在服务器上发现(一般都是请求路径的错误)
500 服务器遇到错误,无法完成请求
四、编写AJAX的步骤:
1、创建XMLHttpRequest对象 var request = new XMLHttpRequest(); 2、设置请求参数 xhrReq.open(method, url, async); method: 代表HTTP请求的方法名,比如 GET、POST。 url: 代表着要想向其发送请求的 url。 async: 表示是否异步。true代表异步,默认为异步 3、发送请求 request.send(); 4、接收响应 request.onreadysatechange = function(){ if(request.readyState==4&&request.status == 200){ alert(request.responseText); } }
思考:
1、在代码中我们要在什么样的时机开始处理响应呢?
响应结束(request.readyState==4)并且响应成功(request.status == 200)
2、异步的体现怎么体现出来的?
五、发送get请求和post请求的区别
get请求
在数据交互中,我们经常会使用 GET 请求来查询数据 xhr.open("GET", "http://localhost:8080/simple/get?name=张三&age=18"); xhr.send();
post发送请求:
Ajax 中,我们通常使用 POST 方法来进行提交数据也是非常重要 xhr.open("POST", "http://localhost:8080/simple/post"); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send("name=zhangsan&age=18");
六、案例:验证用户名是否可用
oTxt.onblur = function(){ var xhr = new XMLHttpRequest(); xhr.open('get','checkUser.php?username='+this.value); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState==4&&xhr.status==200) { console.log(xhr.responseText); if (xhr.responseText=='1') { oBox.innerHTML = '亲,用户名可用' }else{ oBox.innerHTML = '亲, 用户名不可以' } } } } <?php header('Content-type:text/html;charset=utf-8'); # 获取前端数据 $username = $_GET['username']; # 逻辑处理 $conn = mysqli_connect('localhost','root','root','my_2021'); if ($conn) { # 数据的保存 $sql = 'select * from student where username="'.$username.'"'; $rseult = mysqli_query($conn,$sql); // $rseult会是多条数据 }else{ echo '连接失败'; } # 响应给前端 $count = mysqli_num_rows($rseult); //返回一个数据,代表查找到了几个 if ($count==0) { echo '1'; //用户名可用 } else { echo '0'; } ?>
七、案例:注册用户
<?php header('Content-type:text/html;charset=utf-8'); # 1.接收前端的信息 $username = $_POST['username']; $userpass = $_POST['password']; echo $username; # 2.逻辑处理 # 2.1 php连接数据库 ,返回一个布尔值,true成功,false失败 // mysqli_connect 连接数据库 // mysqli_query 查询是否连接成功,成功后执行sql语句 $conn = mysqli_connect('localhost','root','root','my_2021'); if ($conn) { echo '连接成功'; # 只是一条插入语句 $sql = 'insert into student(username,userpass) values("'.$username.'","'.$userpass.'")'; # 执行 sql语句 执行会有两个结果 true执行成功 false 执行失败 $result = mysqli_query($conn,$sql); }else{ echo '连接失败'; } # 3. 响应 if ($result) { echo '1'; } else { echo '0'; } # 关闭服务器 mysqli_close($conn); ?>
这篇关于-AJAX的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-22项目:远程温湿度检测系统
- 2024-12-21《鸿蒙HarmonyOS应用开发从入门到精通(第2版)》简介
- 2024-12-21后台管理系统开发教程:新手入门全指南
- 2024-12-21后台开发教程:新手入门及实战指南
- 2024-12-21后台综合解决方案教程:新手入门指南
- 2024-12-21接口模块封装教程:新手必备指南
- 2024-12-21请求动作封装教程:新手必看指南
- 2024-12-21RBAC的权限教程:从入门到实践
- 2024-12-21登录鉴权实战:新手入门教程
- 2024-12-21动态权限实战入门指南