1

好久没更新了，我回来了---Ajax

1、Ajax概念以及优势

* 什么是AJAX

    * AJAX（Asynchronous JavaScript And XML），（异步 JavaScript 和 XML），中文名：阿贾克斯。是指一种创建异步交互式网页应用的网页开发技术。

    * AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

    * 前端通过与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

 

* 为什么要使用AJAX

    * 更自然、流畅的用户体验，对用户的操作即时响应

    * 在不中断用户操作的情况下与Web服务器进行通信

    * 更灵敏的响应用户访问，实现近似于桌面应用程序的交互效果

    * 通过局部更新页面降低网络流量，提高网络的使用效率

2、同步异步

　　同步，可以理解为在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的，

只有接收到返回的值或消息后才往下执行其他的命令。

　　异步，执行完函数或方法后，不必阻塞性地等待返回值或消息，只需要向系统委托一个异步过程，

那么当系统接收到返回值或消息时，系统会自动触发委托的异步过程，从而完成一个完整的流程。

3、Ajax 步骤编写

 <script>
    //创建对象   
    let xhr = new XMLHTTPRequest();
    
    xhr.open("get/post","url",是否异步true、false)；//一般是true不是的话一般人干不出这种事情
    xhr.onreadystatechange = function(){
    if(xhr.status==200&&xhr.readystate==4)
        fun(xhr.responseText);
    }
    xhr.send();
function fun(){
.....
}
 </script>

4、XMLHTTPRequset兼容写法

<script>
let xhr;
 if(window.ActiveXObject){
    xhr = new ActiveXObject("Microsoft.XMLHttp");
}else{
    xhr = new XMLHTTPRequest();
}
</script>

5、Ajax返回Json

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script>
    let xhr = new XMLHttpRequest();
    xhr.open("GET","testJson.php","true");
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            let myJsonStr = xhr.responseText;
            let myJsonObj = JSON.parse(myJsonStr);
            console.log(myJsonObj.name,myJsonObj.age);
        }
    }
    xhr.send();
</script>
<--testJson.php-->
<?php
    echo '{"name":"laowang","age":18}';
?>

6、AjaxPost

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="username" id="t1" /><span id="s"></span></br>
        <input type="text" name="pwd" />
    </body>
</html>
<script>    
    let t1 = document.getElementById("t1");
    let s = document.getElementById("s");
    t1.onblur = function() {
        //1.创建对象
        let xhr = new XMLHttpRequest();
        //2.设置连接地址   get方式发送响应
        xhr.open("POST", "isUserExistPost.php", "true");
        //这句话必须抄 post的请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //3.设置响应事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //5.获取响应字符串
                if (xhr.responseText == "1") {
                    s.innerHTML = "用户名已存在，请重新注册";
                } else {
                    s.innerHTML = "恭喜注册成功";
                }
            }
        }


        //4.发送  通过send传递参数
        //多个参数依然用&组装 "user_name="+ userName +"&user_age="+ userAge ;
        xhr.send("username=" + t1.value);
    }
</script>

<?php
    header("Content-type:text/html;charset=utf-8");
    //连接数据库
    $conn = mysql_connect("localhost","root","root");
    //选择数据库
    mysql_select_db("xah51901");
    //获取请求过来的数据
    $name = $_POST["username"];
    
    $reslut = mysql_query("select * from student where stuName = '$name'");
    
    $rows = mysql_num_rows($reslut);
    
    if($rows == 1){
        echo "1";
    }else{
        echo "0";
    }
?>

 

posted @ 2020-10-29 14:48  small_zhouzhou  阅读(59)  评论(0)    收藏  举报
TOP