302 Ajax初体验：引言，XMLHttpRequest，Ajax发送get请求，Ajax发送post请求

Ajax引言

之前前端向后发送请求：
form表单 action
a标签 href
地址栏直接输入网址
script
link

以上几种方式，请求发送后，页面会刷新跳转，会出现一个新页面

新的请求方式ajax， 
    作用：ajax可以在不刷新页面的情况下，请求服务器，可以局部更新页面的数据；
    本质： ajax 本质是是利用js中 XMLHttpRequest对象请求服务器；

    Date 操作日期
    document 操作dom
    Math 操作数据函数 
    XMLHttpRequest对象 具备和服务器通信的能。

AJAX技术

即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。

本质：是在HTTP协议的基础上，通过js的XMLHttpRequest对象与服务器进行通信。
作用：可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；

异步与同步(了解)

指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。

同步：同一时刻只能做一件事，上一步完成才能开始下一步

异步：同时做多件事，效率更高,做一件事情时，不影响另一件事情的进行。

XMLHttpRequest可以以异步方式的处理程序。

XMLHttpRequest

浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }

        .info {
            width: 500px;
            height: 200px;
            border: 1px solid red;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <h1>ajax</h1>
    <p>可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；</p>
    <input type="text"> <button>发送请求</button>
    <div class="info"></div>
    <script>
        //本质: 是在HTTP协议的基础上通过js的XMLHttpRequest对象与服务器进行通信。

        document.querySelector('button').onclick = function () {

            // 1-创建一个XMLhttpRequest实例
            // var date = new Date();
            var xhr = new XMLHttpRequest();

            // 2-把请求报文设置好
            // 2-1请求行
            xhr.open('get', './01-ajax.php');
            // 2-2请求头
            xhr.setRequestHeader('content-type', 'text/html');
            // 2-3请求主体
            //get请求报文没有请求主体 ,发送null
            xhr.send(null);

            // 3-接受服务器响应内容
            // 服务器何时响应，是不确定，会受到各种外界因素影响， 所有以一直等待服务器响应，用事件监听
            // 监听XMLHttpRequest的状态 变化
            // readyState == 4 表示服务器响应完成
            xhr.onreadystatechange = function () {
                // 如果服务器响应完成 并且 成功处理请求，则获取数据
                if (xhr.readyState === 4 && xhr.status === 200) {
                    //获取服务器响应的结果（获取响应主体中的数据）
                    var r = xhr.responseText;
                    console.log(r);
                    document.querySelector('.info').innerHTML = r;
                }
            }
        }
    </script>
</body>
</html>

发送get请求

XMLHttpRequest以异步的方式发送HTTP请求，因此在发送请求时，一样需要遵循HTTP协议。

get请求,设置请求行时,需要把参数列表拼接到url后面
get请求不用设置请求头
get请求的请求体为null

// 使用XMLHttpRequest发送get请求的步骤
// 1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 2. 设置请求行
//第一个参数: 请求方式  get/post
//第二个参数: 请求的地址 需要在url后面拼上参数列表
xhr.open("get", "08.php?name=hucc");

// 3. 设置请求头
// 浏览器会给我们默认添加基本的请求头,get请求时无需设置
xhr.setReqeustHeader('content-type','text/html');

// 4. 设置请求体
// get请求的请求体为空,因为参数列表拼接到url后面了
xhr.send(null);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
        
        .info {
            width: 500px;
            height: 200px;
            border: 1px solid red;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <h1>ajax - get</h1>
    <p>可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；</p>
    <input type="text"> <button>发送请求</button>
    <div class="info"></div>
    <script>
        //点击按钮，获取输入框的值，通过ajax发送给后台
        document.querySelector('button').onclick = function() {
            var txt = document.querySelector('input').value;
            //利用ajax发送数据给后台
            //1-创建一个XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            //2-设置请求报文
            //2-1请求行
            xhr.open('get', './02-ajax-get.php?name=' + txt);
            //2-2请求头
            xhr.setRequestHeader('content-type', 'text/html');
            //2-3请求主体
            xhr.send(null);

            //3-监听服务器响应
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var r = xhr.responseText;
                    //显示
                    document.querySelector('.info').innerHTML = r;
                }
            }
        }
    </script>
</body>

</html>

发送post请求

var xhr = new XMLHttpRequest;
//1. 设置请求行 post请求的参数列表在请求体中
xhr.open("post", "09.php");
//2. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//3. 设置请求体
xhr.send("name=hucc&age=18");

post必须设置请求头中的content-type为application/x-www-form-urlencoded
post请求需要将参数列表设置到请求体中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
        
        .info {
            width: 500px;
            height: 200px;
            border: 1px solid red;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <h1>ajax - post</h1>
    <p>可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；</p>
    <input type="text"> <button>发送请求</button>
    <div class="info"></div>
    <script>
        //点击按钮，获取输入框的值，通过ajax发送给后台
        document.querySelector('button').onclick = function() {
            var txt = document.querySelector('input').value;
            //利用ajax向数据发送给后台
            //1-创建一个XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            //2-设置请求报文
            //2-1请求行
            xhr.open('post', './03-ajax-post.php');
            //2-2请求头
            //必须设置content-type属性
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            //2-3请求主体
            xhr.send('name=' + txt + '&sex=m');

            //3-监听服务器响应
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var r = xhr.responseText;
                    document.querySelector('.info').innerHTML = r;
                }
            }
        }
    </script>
</body>

</html>

302 Ajax初体验：引言，XMLHttpRequest，Ajax发送get请求，Ajax发送post请求

Ajax引言

AJAX技术

异步 与 同步(了解)

XMLHttpRequest

发送get请求

发送post请求

猜你喜欢

异步与同步(了解)