AJAX基础

最新推荐文章于 2024-05-18 11:12:26 发布

Monster_man

最新推荐文章于 2024-05-18 11:12:26 发布

阅读量1.2k

点赞数 1

文章标签： ajax http协议网络协议 javascript

本文链接：https://blog.csdn.net/monster_man/article/details/77510106

版权

AJAX基础

一、HTTP协议

1、概念

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。

<form action="#" method="post" enctype="application/x-www-form-urlencoded">
    <input type="text" name="user">
    <input type="password" name="pwd">
    <input type="submit" value="提交">
</form>
<script>
    /*
    B/S browser/server
    C/S client/server

    HTTP协议:
        1.请求协议
            浏览器向服务器发送请求的时候使用

            请求行：访问的路径，主机，协议版本
            请求头：浏览器的一些信息
            请求体：get请求没有请求体
                   post请求才有请求体

            !!! get 和 post 的区别
                get请求：
                    没有请求体。 get请求如果想向服务器传递数据，必须把要传递的数据放入到  **url** 中。
                    请求数据是键值对的形式，建和值用=连接

                post请求：
                    有请求体。而且我们的数据都是通过请求体提交的数据

        2.响应协议
            服务器向浏览器响应的时候使用

            响应行
            响应头
            响应体(响应的内容)

            响应码:
                200 ok
                304 Not Modified
                404 资源没找到
                500 服务器问题
    */
</script>

二、Ajax基础

    传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面，在加载新的网页的过程中，用户会有一个等待。降低了用户体验。
局部更新:
    AJAX的出现就可以让网页进行部分更新。

异步和同步：
    Ajax的全称是Asynchronous JavaScript+XML ，Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一
个功能强大的新技术。Ajax结合了异步技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Js技术的Web应用，并打破了使用页面重载
的惯例。 Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加载，就可以动态地更新。使
用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

    Ajax刚出生的时候，用的比较多的数据格式是XML，后来JSON数据格式更多的去替换了XML格式的数据。

Ajax的使用方法

▻  先创建需要请求的页面. (test.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
测试！！！
</body>
</html>

▻  Ajax请求(test.html)的方法

<div id="box"></div>
<script>
//第一步：创建XMLHttpRequest对象
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

//第二步：调用xhr的open  仅仅是准备一些信息，但是还没有实际的发送请求出去
    //参数1：请求方法,一般是get或post   参数2：请求url   参数3：是否为异步，默认true，表示异步
    xhr.open("GET","test.html");

//第三步：监听请求状态
    //xhr.onreadystatechange监听请求状态，根据状态来确定数据获得之后要做的事情
    xhr.onreadystatechange = function () {
        console.log(xhr.readyState);
        /*
         *  xhr.readyState的值保存了xhr的状态。一共有5种状态，每个状态用1个整数来表示
         *      0 未初始化。对象new出来了，但是还没有调用open方法
         *      1 启动。 已经调用open，但是还没有调用send方法
         *      2 发送。 已经send方法，但是还没有接收到相应
         *      3 接收。 已经开始接收数据，但是还没有完全接收
         *      4 完成。 已经完全接收数据
         *
         *      作为开发者，我们一般只关注 **第4种** 状态
         *
         */
        if(xhr.readyState == 4){  //这次响应完成
            console.log(xhr.status);//200   这次响应的内容是OK的
            if(xhr.status == 200){
                console.log(xhr.responseText);  //输出这次响应的内容
                box.innerHTML = xhr.responseText;  //页面中输出这次响应的内容
            }
        }
    }

//第四部：发送请求，参数表示传递到服务器的数据。get给个null即可，post请求的时候，传递键值对数据
    xhr.send(null);
</script>

请求json数据

▻  先创建需要请求的json数据. (data.json)

{
  "name" : "Jack",
  "age" : 20,
  "sex" : "man"
}

▻  Ajax请求(data.json)数据的方法

<script>

    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xhr.open("GET","data.json");

    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var obj = JSON.parse(xhr.responseText);
                console.log(obj);  //{name: "Jack", age: 20, sex: "man"}
            }
        }
    }

    xhr.send(null);

   /*
    *  json JavaScript Object Notation  是一种纯文本数据格式，而且是跨平台的
    *
    *   json对象： 其实就是js对象字面量去掉方法
    *       {
    *          "name" : "Jack",
    *           "age" : 20,
    *      }
    *
    *  json数组：[ ]
    *      可以存json对象和字符串
    *
    */
</script>