-AJAX

2023-11-12 20:30:46

一、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);

?>

码农公寓