ajax

最新推荐文章于 2024-08-10 16:43:15 发布

Cris Z

最新推荐文章于 2024-08-10 16:43:15 发布

阅读量105

点赞数

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

本文链接：https://blog.csdn.net/chenyuhua08042/article/details/115497546

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用ajax的四个步骤:
1.创建核心对象：
var 对象名=new XMLHttpRequest()
2.创建请求请求方式(get,post) 请求地址是否异步
对象名.open(“请求方式t”,“地址”,true/false);
3.发送请求参数 key=value形式字符串如果有多个用&连接
对象名.send(“请求参数”)
4.接收响应
对象.onreadystatechange=function(){}

onreadystatechange:监听ajax

readyState  返回状态码，描述当前状态,表示请求到哪位了
0：尚未初始化 
1：正在发送请求
2：请求完成
3：正在响应
4：响应完毕(响应完毕不代表请求成功)
status 服务器端返回的状态码  
404：页面找不到，可能是地址写错了  
200：请求成功 
500：找后台，服务器挂了 
304：缓存

get请求举例:

<script>
    //1.创建ajax核心对象
    var xmlhttp=new XMLHttpRequest();
    //2.创建请求      
 xmlhttp.open("get","get.php?user=12345&psd=123456",true);  
    //get请求要在请求地址后面加问号即:my.php?psd=123456,,,后面的send里面为null
    //3.发送请求参数 
    xmlhttp.send(null);
    //4.接收响应
    xmlhttp.onreadystatechange=function(){
    //判断其响应完毕且请求成功后
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
        	//将服务器端的值返回并用一个变量进行存储
            var values=xmlhttp.responseText;
            //...之后进行各种操作...  
        }
    }
</script>

post请求举例:

<script>
    //1.创建ajax核心对象
    var xmlhttp=new XMLHttpRequest();
    //2.创建请求
    xmlhttp.open("post","post.php",true);  
    //3.发送请求参数 
    xmlhttp.send("user=12345&psd=123456");//post在send中发送请求参数
    xmlhttp.onreadystatechange=function(){
    //判断其响应完毕且请求成功后
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
        	//将服务器端的值返回并用一个变量进行存储
            var date=xmlhttp.responseText;
            //...之后进行各种操作...  
        }
    }
</script>

ajax简单实例:省市区下拉选择框
map.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select id="province"><option>---请选择省份---</option></select>
    <select id="city"><option>---请选择城市---</option></select>
    <select id="area"><option>---请选择区域---</option></select>
    <script>
        //清空之前的余留的值
        // function fn1(level){
        //     var options=level.getElementsByTagName("option");
        //     for(var i=1;i<options.length;i++){
        //         level.removeChild(options[i]);
        //         i--;
        //     }
        // }
        //传值
        function fn(level){
            xmlhttp.onreadystatechange=function(){ //接收响应
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    var cities=xmlhttp.responseText;
                    var citiesArr=cities.split(",");//将php的字符串转为数组
                    for(i=0;i<citiesArr.length;i++){
                        var option=document.createElement("option");
                        level.appendChild(option);
                        option.innerHTML=citiesArr[i];
                    }
                }
            }
        }
        //获取数据
        var xmlhttp=new XMLHttpRequest();
        var province=document.getElementById("province");
        var city=document.getElementById("city");
        var area=document.getElementById("area");
        //从文件中传入省的数据
        window.onload=function(){  //页面一进来就发送ajax请求
            xmlhttp.open("get","province.php",true);
            xmlhttp.send(null);
            fn(province);
        }
        //从文件中传入市的数据
        province.onchange=function(){
            // fn1(city);
            // fn1(area);
            city.innerHTML="<option>---请选择城市---</option>";
            area.innerHTML="<option>---请选择区域---</option>";
            xmlhttp.open("post","city.php",true);
            xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xmlhttp.send("proValue="+province.value);
            fn(city);   
        }
        //从文件中传入区的数据
        city.onchange=function(){
            // fn1(area);
            area.innerHTML="<option>---请选择区域---</option>";
            xmlhttp.open("post","area.php",true);
            xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xmlhttp.send("proValue="+city.value);
            fn(area);
        }
    </script>
</body>
</html>

province.php:

<?php
    echo "山东省,浙江省,辽宁省";
?>

city.php:

<?php
    $proValue=$_REQUEST["proValue"];
    if($proValue=="山东省"){
        echo"青岛市,烟台市,济南市";
    }else if($proValue=="浙江省"){
        echo"杭州,温州,宁波";
    }else{
        echo"辽阳市,大连市,鞍山市";
    }
?>

area.php:

<?php
    $proValue=$_REQUEST["proValue"];
    if($proValue=="青岛市"){
        echo"1,2,3";
    }else if($proValue=="烟台市"){
        echo"4,5,6";
    }else if($proValue=="济南市"){
        echo"7,8,9";
    }
    else if($proValue=="杭州"){
        echo"11,12,13";
    }else if($proValue=="温州"){
        echo"14,15,16";
    }else if($proValue=="宁波"){
        echo"17,18,19";
    }
    else if($proValue=="辽阳市"){
        echo"21,22,23";
    }else if($proValue=="大连市"){
        echo"24,25,26";
    }else{
        echo"27,28,29";
    }
?>

Cris Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

网页本身是同步的，但是ajax可以异步请求。。。使用ajax的四个步骤:<script> //1.创建ajax核心对象 var xmlhttp=new XMLHttpRequest(); //2.创建请求请求方式(get/post) 请求地址是否异步 xmlhttp.open("get","my.php",true); //get请求要在请求地址后面加问号即:my.php?psd=123456,,,后面的send里面为null //3.
复制链接

扫一扫

专栏目录