Ajax 的简单认识和应用

最新推荐文章于 2021-08-19 09:38:27 发布

冒险岛_0_

最新推荐文章于 2021-08-19 09:38:27 发布

阅读量566

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_41741971/article/details/90384418

版权

Javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1、Ajax

全称：Asynchronous JavaScript and XML

中文：异步javaScript和XML

就是能局部刷新（局部请求），不需要整个文件重新向服务器发送请求

也可以用来处理get和post请求

Ajax几个请求状态

0：请求还没有建立（open执行之前）
1：请求建立了，但是还没有发送（open刚执行）
2：请求正式发送了（send执行了）
3：请求已经受理，有一部分数据已经可用，但是和没有完全受理完
4：请求完全处理完成

简单的Ajax获取响应数据

/* 获取Ajax对象 */
var xhl = new XMLHttpRequest();

/*
    open函数
        第一个参数为请求方式 get/post
         
        第二个参数为请求行为，如果填写的是文件路径是资源文件那么就是向服务器请求获取资源，
        如果填写路径是后台语言文件（比如php文件），就是向服务器发送信息或者是资源
         
         第三个参数只有两个值可填写，分别是true和false，true表示异步，fasle表示同步
  * */
xhl.open('get','a.txt',true);
xhl.send(null);//向服务器发送请求，一般是给post使用
xhl.onreadystatechange = function () {//监听请求状态，状态为4，表示请求成功
    if (xhl.readyState == 4){
        console.log(xhl.responseText);//获取响应内容
    }
}

Get 和 Post发送数据

Get请求会明文在url中发送到后台中去，这样很不安全

Post请求时用户和密码不会显示在url中

/* get */
var oDv = document.querySelector('.dv1');
oDv.onclick = function(){
    var xhl = new XMLHttpRequest();
    xhl.open('get','get.php?user=fyn&pwd=123qweasd',true);
    xhl.send(null);
    xhl.onreadystatechange = function () {
        if (xhl.readyState == 4){
            console.log(xhl.responseText);
        }
    }
}
/* post */
var oDv = document.querySelector('.dv1');
/* Ajax---post提交数据 */
oDv.onclick = function () {
    var xhl = new XMLHttpRequest();
    xhl.open('post','post.php',true);
    /* post提交数据需要 请求头 */
    xhl.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhl.send('user=楠楠&pwd=1223qwead');
    xhl.onreadystatechange = function () {
        if (xhl.readyState == 4){
            console.log(xhl.responseText);
        }
    }
}

通过JSON.parse() 将数组、json或数组json格式的字符串转换为对象

注意：json属性必须双引号包裹，最后一项不能有逗号

小案例：

实现的功能：
通过后台获取数组json数据，然后显示在页面中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        ul, ol { list-style: none;}
        a {border: none;text-decoration: none;color: inherit;}
        * {margin: 0;padding: 0;}
        .clearfix:after{content: '';display: block;clear: both;}
        .fl-L{ float:left;}
        .fl-R{ float:right;}

        body{
            background-color: #cccccc;
        }
        .ul{
            width: 600px;
            padding: 10px;
            background-color: deepskyblue;
            margin: 100px auto;
            text-align: center;
            color: white;
            border-radius: 5px;
        }
        .ul li{
            border-bottom: 1px solid #990FDE;
            padding: 10px 0;
            margin: 10px 0;
        }
    </style>
    <title>Document</title>
</head>
<body>

<ul class="ul"></ul>

<div class="dv1"></div>
<script>
    /*
        实现的功能：
            通过后台获取数组json数据，然后显示在页面中
    */
    var oUl = document.querySelector('.ul');//获取ul标签

    var xhl = new XMLHttpRequest();//获取XMLHttpRequest对象
    xhl.open('get','jsons.txt',true);
    xhl.send(null);

    xhl.onreadystatechange = function () {//状态监听事件
        if(xhl.readyState === 4){ //获取状态值为4时，执行后面的代码
            console.log(xhl.responseText);
            var arr = JSON.parse(xhl.responseText);//把字从后台获取的符数组json格式转换成数组的形式
            for(i=0;i<arr.length;i++){//for循环一一创建和添加元素
                var li = document.createElement('li');//创建li标签元素
                oUl.appendChild(li);//把li标签元素添加在ul标签的下面
                li.innerHTML = '年龄：'+arr[i]['name']+'&emsp;'+'年龄：'+arr[i]['age']+'&emsp;'+'性别：'+arr[i]['sex'];
            }
        }
    }
</script>
</body>
</html>

后台的字符串数组json格式文件数据：

运行结果图：

2、简单总结：

用到的对象是（1）

XMLHttpRequest Ajax需要的对象

用到的函数（5）：

open 打开资源进行请求，true为异步
send post向服务器发送请求
onreadystatechange 函数监听
readyState 获取状态值
responseText 获取响应数据

冒险岛_0_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax 的简单认识和应用

1、Ajax全称：Asynchronous JavaScript and XML中文：异步javaScript和XML就是能局部刷新（局部请求），不需要整个文件重新向服务器发送请求也可以用来处理get和post请求Ajax几个请求状态 0：请求还没有建立（open执行之前） 1：请求建立了，但是还没有发送（open刚执行） 2：请求正式发送了（send...
复制链接

扫一扫