AJAX应用

最新推荐文章于 2022-09-08 21:08:12 发布

怎么办！

最新推荐文章于 2022-09-08 21:08:12 发布

阅读量162

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_71753445/article/details/125689125

版权

AJAX

一、AJAX的概念和优势

AJAX（Asynchronous Javascript And XML）是异步的javascript和XML

传统网站中，如果需要更新页面内容，必须重载整个网页页面。

ajax是可以在不刷新加载整个页面的情况下，对网页的某部分进行更新。 按需加载

二、XMLHttpRequest

一、解释

AJAX的核心对象是XMLHttpRequest，即AJAX的异步操作，和服务器交互主要依赖该对象

以前的浏览器：

1.负责显示页面和发送请求接收响应(和后端交互)

2.两件事情同一时刻只能做件，没法同时进行

现代浏览器，使用XMLHttpRequest对象

1.可以把浏览器解脱出来，可以让浏览器只负责显示

2.而完成请求的事情由XMLHttpRequest对象负责

3.这样两者各负其责，效率更高，效果更好，用户体验很好，用户永远不会看到浏览器空白。

二、XMLHttpRequest的属性

属性名	备注
onreadystatechange	当每次状态改变所触发事件处理程序（会4次）
readyState	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异步问题
Ajax的open()方法有3个参数：1、method；2、url；3、boolean；
   参数1: get和post两个取值
   参数2: 请求路径
   参数3: boolean的取值
1. 当该boolean值为true时，服务器请求是异步进行的，也就是脚本执行send（）方法后不等待服务器的执行结果，而是继续执行脚本代码；
2. 当该boolean值为false时，服务器请求是同步进行的，也就是脚本执行send（）方法后等待服务器的执行结果的返回，若在等待过程中超  时，则不再等待，继续执行后面的脚本代码！

三、编写AJAX的步骤

1、创建XMLHttpRequest对象
     var request = new XMLHttpRequest();

2、设置请求参数
     request.open(method, url, async);
            method: 代表HTTP请求的方法名，比如 GET、POST。
            url: 代表着要想向其发送请求的 url。
            async: 表示是否异步。true代表异步，false是同步，默认为异步
            
3、发送请求
      request.send();
 
4、接收响应
     request.onreadysatechange = function(){
         if(request.readyState==4&&request.status == 200){
              alert(request.responseText);//响应结果，就是后端echo回来的数据
      }
     }

响应结束（request.readyState==4）并且响应成功（request.status == 200）

 get请求和post请求的区别？
       1. 请求参数书写位置
          get：  url路径上    xhr.open("get","url?请求参数") 请求参数形式： username =zs & password=12345
          post： 写在send()中   xhr.send("username=zs&password=12345")

       2. 是否设置请求头
          get 不需要
          post需要  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

四、编写AJAX的GET

    <input type="text" name="username" id="txt"><span></span><br>
    <input type="text" name="username" id="pass"><br>
    <button>点我注册</button>
---------------------------------------------------------------------------------------------------------

<script>
    function $(selector) {
        return document.querySelector(selector)
    }
    // 点击按钮，利用ajax向服务器发送请求
    $("button").onclick = function () {
        // 第一步：先创建XMLHttpReques一个对象，用来向服务器发起请求
        let xhr = new XMLHttpRequest();
        // 第二步：设置请求参数,http请求的方法；携带请求参数到后端
        xhr.open("get", `01.get.php?username=${$("#txt").value}&userpass=${$("#pass").value}`)
        // 第三步：发送请求
        xhr.send()
        // 第四步：拿到响应的结果，接收响应 
        xhr.onreadystatechange = function () {
            // 响应结束并且响应成功
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        }
    }
</script>
---------------------------------------------------------------------------------------------------------
<?php

$user=$_GET["username"];
$pass=$_GET["userpass"];

echo "用户名是$user,用户密码是$pass";
?>

五、编写AJAX的POST

   <input type="text" name="username" id="txt"><span></span><br>
    <input type="text" name="username" id="pass"><br>
    <button>点我注册</button>
---------------------------------------------------------------------------------------------------------
<script>
    function $(selector) {
        return document.querySelector(selector)
    }
    $("button").onclick = function () {
        // 第一步：先创建XMLHttpReques一个对
        var xhr = new XMLHttpRequest()
        // 第二步：发送请求参数
        xhr.open("post", `02.post.php`)携带请求参数到后端
        // 第三步：设置请求头
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        //第四步：发送--post请求需要把请求参数写在 send中，但是不能带"""
        xhr.send("username=" + $("#txt").value + "&userpass=" + $("#pass").value);
        // xhr.send(`username=${$("#txt").value}&userpass=${$("#pass").value}`);
        // 第五步：接收响应
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText)
            }
        }
    }
</script>
---------------------------------------------------------------------------------------------------------
<?php
$user=$_POST["username"];
$pass=$_POST["userpass"];
echo "用户名是$user,用户密码是$pass";
?>

六、回调函数

一个函数被作为参数传递给另一个函数。函数B作为函数A的参数，函数B在函数A内部调用，函数B称为函数A的回调函数。

普通函数是按照代码顺序直接调用，而定时器函数，要等待时间，时间到了才去调用这个函数

回调：就是回头调用的意思，上一件事干完，在回头在调用这个函数

比如定时器，就是等待5秒在调用这个函数

1.回调函数有什么作用？可以在函数外部取出函数内部的值（）

2.什么时候用return ,什么时候用回调函数
     取出函数内部异步代码的结果-------只能用回调函数


<script>
      // 函数A作为函数B的参数，在函数B中调用
      // 好处，可以在B函数的外面取到B函数内部的值
    function B(A) {//第二步走这个函数
        A()
    }
    B(function () {//第一步：先执行这个A = function () { }
        console.log(1)//最后执行这个
    })
------------------------------------------------------------------------------------------------------
    function B(A) {
        var x = 10000
        A(x)
    }
    B(function (x) {
        console.log(x)
    })
--------------------------------------------------------------------------------------------------------
        // 概念：函数A作为函数B的参数，在函数B中进行调用
    function ajaxget(success) {
        // 1. 创建xhr 对象
        let xhr = new XMLHttpRequest();        // 2. 设置请求参数
        xhr.open("get", "01.php", true);   // true-->异步(默认值)     false--->同步
        // 3. 发请求
        xhr.send();
        // 4. 拿到响应结果
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                success(xhr.responseText)}}}
        // 函数外部取出函数内部  xhr.responseText-----》取出异步代码内部的值一般都采取回调函数
        // success === function(){}
       ajaxget(function (data) {
          console.log(data);
        })
</script>

七、ajax的封装

<script>
    // 封装一个AJAX的函数
    // options传入一个对象
    function ajaxtool(options) {
        // 创建一个对象
        let xhr = new XMLHttpRequest()
        // 第一种：如果是get的话
        if (options.type.toLowerCase() == "get") {
            //携带请求参数到后端，后端去查找
            xhr.open("get", options.url + "?" + options.data)
        }
        // 第二种：如果是post的话
        if (options.type.toLowerCase() == "post") {
            //携带请求参数到后端
            xhr.open("", options.url)
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            xhr.send(options.data)
        }
        // 事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                options.success(xhr.responseText);}}}
       // 调用函数
    ajaxtool({
        type: "get",
        url: '01.php',
        data: "username=zhangsan",
        // 这个是真正响应回来的数据
        // 本质上想让他拿到函数内部xhr.responseText的值
        success: function (data) {
            console.log(data);
        }
    }  
    </script>
    // 本质上：目标：为了实现在函数外部取出函数内部异步代码的结果

三、案例：验证用户名是否可用

思路：
  1.用户名输入框需要进行失去焦点事件，失去焦点时向后端发送请求
  2.后端接收到请求，接收到请求参数

1.验证以及注册的js文件

<body>
    <input type="text" name="username" id="txt"><span></span><br>
    <input type="text" name="username" id="pass"><br>
    <button>点我注册</button>
</body>
----------------------------------------------------------------------------------------------------------------
<script>
    function $(selector) {
        return document.querySelector(selector)
    }
    //默认是false,如果验证成功就修改为true,就在走下面注册的不住
    let flag = false;
    // 用用户名输入框需要进行失去焦点事件， 失去焦点时向后端发送请求
    //后端接收到请求，接收到请求参数，就会拿你的请求参数和数据库的数据进行对比，有的话就不可以用
    $("#txt").onblur = function () {
        // 创建一个对象帮助我们和服务器连接
        let that = this
        let xhr = new XMLHttpRequest();
        // 设置请求的参数
        xhr.open("get", `03checkuser.php?username=${$("#txt").value}`)
        // 发送
        xhr.send()
        // 响应请求
        xhr.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                // console.log(this.responseText)//就是后端echo回来的内容
                if (this.responseText.trim() == "1") {
                    that.nextElementSibling.innerHTML = "可以注册"
                    that.nextElementSibling.style.color = "green"
                    flag = true;
                } else {
                    that.nextElementSibling.innerHTML = "不可以注册"
                    that.nextElementSibling.style.color = "red"}}}}
-------------------------------------------------------------------------------------------------------------
    // 先用ajax，发送前端数据，如果前端在库中找到------ 注册  前端只能发请求，后端处理请求，响应结果
     // 点击注册按钮，向后端 发送请求,携带几个请求参数到后端--后端接收到你的两个请求参数， 将这两个向数据库中进行插入
    $("button").onclick = function () {
        // console.log(1)
        if (flag) {
            let xhr = new XMLHttpRequest();
            xhr.open("post", "03register.php")
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            xhr.send(`username=${$("#txt").value}&userpass=${$("#pass").value}`)
            // console.log(88)
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText) }}}}
</script>

2.验证用户名是否可用（php文件）

<?php
header("Content-type:text/html;charset=utf8");
$user=$_GET["username"];

// 和服务器进行连接
$conn=mysqli_connect("localhost","root","root","qianfeng");
if($conn){
   // 在数据库中查到
   $sql= "select * from student where username='$user'";
   //    
   $res=mysqli_query($conn,$sql);
   $num=mysqli_num_rows($res);
   if($num==0){
    echo "1";//说明库里面没有
    }else{
    echo "0";
    }
}else{
    echo "连接失败";
}
?>

3.提交注册信息(php)

  
 <?php
header("Content-type:text/html;charset=utf8");
$user=$_POST["username"];
$pass=$_POST["userpass"];
// 和服务器进行连接
$conn=mysqli_connect("localhost","root","root","qianfeng");
if($conn){
   // 在数据库中查到
   $sql= "insert into student(username,userpass)  values('$user','$pass')";
   // 返回布尔值   
   $res=mysqli_query($conn,$sql);
   if($res){
    echo "success";
   }else{
    echo "fail";
   }
   }else {
    echo "connect error";
  }
?>