Ajax学习笔记--基本使用

最新推荐文章于 2024-09-04 15:47:59 发布

watson_pillow

最新推荐文章于 2024-09-04 15:47:59 发布

阅读量167

点赞数

分类专栏： ajax 文章标签： html php

本文链接：https://blog.csdn.net/watson_pillow/article/details/107967425

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基本使用

基本格式
举例
文化建设

基本格式

//使用js代码进行php文件的访问；
//1、创建xmlHttpRequest对象
var xhr = null;//new XMLHttpRequest();
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    //ie6浏览器兼容
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.准备发送
// 请求方式（get/post）；请求地址；同步false/异步true
//由于是get方式的请求，需要在？后面加上参数；同步/异步
xhr.open("get","checkuser.php?username=" + username,true);
/*{
//post方式
xhr.open("post","checkuser.php" + username,true);
var param = "username=" + username;
xhr.send(param);
// 设置xhr的请求头信息，仅针对于post请求
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
}*/
//3.执行发送（get请求时，参数为null；post时，参数为传送的参数，即此处为请求体，如上）
xhr.send(null);
//4.指定回调函数
xhr.onreadystatechange = function(){
    // 以下判断为固定格式
    if(xhr.readyState == 4){//xhr状态数据解析完成，可以使用
        if(xhr.status == 200){//服务器状态，相应成功
            //得到数据的形式
            // 也可能是xhr.responseXML；此种格式只针对xml格式的返回，其他格式都使用responseText，且xml格式的使用很少
            var res = xhr.responseText;//responseText内容为字符串
            document.getElementById("result").innerHTML = res;
        }
    }
}

举例

get与post

php程序
submit.php

<?php
    $name = $_GET["username"]; 
    if($name == "admin"){
        echo "ok";
    }else{
        echo "error";
    }
?>

submitphone.php

<?php
    $phone = $_POST["phone"]; 
    if(strlen($phone) > 10){
        echo "login success";
    }else{
        echo "login error";
    }
?>

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1>登录界面</h1>
    <form action="submit.php" method="get">
        用户名：<input type="text" name="username" id="username"><span id="usernamespan"></span><br>
        phone<input type="text" name="phone" id="phone"><span id="phonespan"></span><br>
        <input type = "submit" value="提交">
    </form>

</body>
<script>
    window.onload=function(){
        var username = document.querySelector("#username");
        var phone = document.querySelector("#phone");

        username.onblur=function(){
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open("get","./submit.php?username=" + username.value,true);
            xhr.send(null);
            xhr.onreadystatechange=function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        var result = xhr.responseText;
                        if(result == "ok"){
                            document.querySelector("#usernamespan").innerText = "ok";
                        }else{
                            document.querySelector("#usernamespan").innerText = "error";
                        }
                    }
                }
            }
        }

        phone.onblur=function(){
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open("post","./submitphone.php",true);
            var sendInfo = "phone=" + phone.value;
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(sendInfo);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        var res = xhr.responseText;
                        document.querySelector("#phonespan").innerText = res;
                    }
                }
            }
        }
        
    }
</script>
</html>

xml格式解析

php代码

<?php
    header("Content-Type:text/xml;");//设置响应头信息，保证浏览器可以把相应的内容识别为xml文件类型

    $arr = array();
    $arr[0] = array("name"=>"三国演义","author"=>"罗贯中","desc"=>"三个男人一台戏");
    $arr[1] = array("name"=>"水浒传","author"=>"施耐庵","desc"=>"108个男人一台戏");
    $arr[2] = array("name"=>"西游记","author"=>"吴承恩","desc"=>"4个男人一台戏");
?>
<?xml version="1.0" encoding="utf-8"?>
<booklist>
    <?php
        foreach($arr as $key => $value){
    ?>
    <book>
        <name><?php echo $value['name']?></name>
        <author><?php echo $value['author']?></author>
        <desc><?php echo $value['desc']?></desc>
    </book>
    <?php
        }
    ?>
</booklist>

html

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>ok</title>
    <style>
        div{
            width:800px;
            margin:20px auto;
        }
        table{
            width:800px;
            margin:20px auto;
            border-collapse:collapse;
        }
        th{
            background-color:#0094ff;
            color:white;
            font-size:16px;
            padding:5px;
            text-align:center;
            border:1px solid black;
        }
        td{
            padding:5px;
            text-align:center;
            border:1px solid black;
        }
    </style>
    <body>
        <div>
            <table id="booklist">
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>描述</th>
                </tr>
                <tr>
                    <td>书名</td>
                    <td>作者</td>
                    <td>描述</td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        window.onload=function(){
            xhr = new XMLHttpRequest();
            xhr.open("get","./booklist.php",true);
            xhr.send(null);
            xhr.onreadystatechange=function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        var res = xhr.responseXML;
                        var books = res.getElementsByTagName("booklist")[0].getElementsByTagName("book")
                        var allhtml = document.getElementById("booklist").innerHTML;
                        for(var i=0;i<books.length;i++){
                            var name = books[i].getElementsByTagName("name")[0].textContent;
                            var author = books[i].getElementsByTagName("author")[0].textContent;
                            var desc = books[i].getElementsByTagName("desc")[0].textContent;
                            var temp = "<tr><td>"+name+"</td><td>"+author+"</td><td>"+desc+"</td><tr>"
                            allhtml += temp;
                        }
                        document.getElementById("booklist").innerHTML = allhtml;
                        console.log(res);
                    }
                }
            }
        }
    </script>
</html>

同步访问

var xhr = null;
if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest();
}else{
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get","submit.php?username=" + username,false);//同步请求
console.log("before send;xhr.readtState = " + xhr.readyState);
xhr.send(null);//此处会有卡顿
 //异步访问时，此处请求浏览器网络数据
console.log("after send;xhr.readtState = " + xhr.readyState);
//同步请求时，直接执行以下内容
if(xhr.readyState == 4){
  if(xhr.status == 200){
      var result = xhr.responseText;
       if(result == "ok"){
           document.querySelector("#usernamespan").innerText = "ok";
       }else{
           document.querySelector("#usernamespan").innerText = "error";
       }
   }
}

xhr.onreadystatechange=function(){//状态不会再发生改变，所以这里不会执行
console.log("onreadystatechage");
if(xhr.readyState == 4){
    if(xhr.status == 200){
       var result = xhr.responseText;
       if(result == "ok"){
          document.querySelector("#usernamespan").innerText = "ok";
      }else{
          document.querySelector("#usernamespan").innerText = "error";
      }
     }
  }
}
            /*
            js为单线程
            js执行为从上到下执行，直至全部代码执行完成
            setTimeout会将函数放入事件队列（存储回调函数的容器）
            js空闲时，会查看事件队列中的方法的触发条件

            */

封装函数

php代码同xml格式解析
function.js

function SendAjax(paramtersObj){
    //默认参数
    var obj = {
        type: "get",
        url:"./booklist.php",
        paramters:"",
        textType:"xml",
        async:true
    }
    for(var key in paramtersObj){
        obj[key] = paramtersObj[key];
    }

    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(obj.type == "get" && obj.url!=""){
        obj.url += "?" + obj.paramters;
    }
    xhr.open(obj.type,obj.url,obj.sync);
    if(obj.type == "get"){
        xhr.send(null);
    }else{
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(obj.paramters);
    }
    if(obj.async){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    var res = null;
                    if(obj.textType = "xml"){//这个参数没用到，以后可以拓展分开处理
                        res = xhr.responseXML;
                    }else{
                        res = xhr.responseText;
                    }
                    obj.callback(res);
                }
        }
    }else{
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    var res = null;
                    if(obj.textType = "xml"){
                        res = xhr.responseXML;
                    }else{
                        res = xhr.responseText;
                    }
                    obj.callback(res);
                }
            }
        }
    }
    
}

html中调用

<script src="./function.js"></script>
<script>
SendAjax({
    type: "get",
    url:"./booklist.php",
    paramters:"",
    textType:"xml",
    async:true,
    callback:function(res){
        var books = res.getElementsByTagName("booklist")[0].getElementsByTagName("book")
        var allhtml = document.getElementById("booklist").innerHTML;
        for(var i=0;i<books.length;i++){
            var name = books[i].getElementsByTagName("name")[0].textContent;
            var author = books[i].getElementsByTagName("author")[0].textContent;
            var desc = books[i].getElementsByTagName("desc")[0].textContent;
            var temp = "<tr><td>"+name+"</td><td>"+author+"</td><td>"+desc+"</td><tr>"
            allhtml += temp;
        }
        document.getElementById("booklist").innerHTML = allhtml;
        // console.log(res);
    }
});
</script>

文化建设

微雨夜行 漠漠秋云起悄悄夜寒声但觉衣裳湿无点亦无声

watson_pillow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习笔记--基本使用

Ajax学习--基本使用基本格式举例基本格式//使用js代码进行php文件的访问；//1、创建xmlHttpRequest对象var xhr = null;//new XMLHttpRequest();if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();}else{ //ie6浏览器兼容 xhr = new ActiveXObject("Microsoft.XMLHTTP");}//2.准备发送// 请求方式（
复制链接

扫一扫

专栏目录