ajax的基本概念及使用

1.概念：（1）同步：必须等待前面的任务完成,才能继续后面的任务（学生排队打饭，排到你，才能打上饭）

            （2）异步：不受当前任务的影响（在排队打饭过程中，玩手机不受排队的影响）

2.（1）同步更新：我们浏览一个网站，当这个网站页面发生更改时，你必须通过刷新才能看到更改的内容，刷新相当于页面重新加载一次，会感觉很慢，体验不好。

  （2）异步更新：实际情况是，我们在访问新浪微博时,当你看到一大半了,会自动帮我们加载更多的微博,同时页面并没有刷新。

3.ajax作用：在浏览器中,我们也能够不刷新页面,通过ajax的方式去获取一些新的内容,类似网页有微博,朋友圈,邮箱等

4.单词解释:Asynchronous Javascript And XML（异步JavaScript和XML）,他并不是凭空出现的新技术,而是对于现有技术的结

合:核心是js对象XMLHttpRequest。

5.ajax使用的是HTTP请求，使用ajax请求需要5步：

        （1）建立XMLHTTPRequest对象

        （2）注册回调函数（当服务器回应我们了,我们想要执行什么逻辑）

        （3）使用open方法设置和服务器端交互的基本信息（设置提交的网址,数据,post提交的一些额外内容）

        （4）发送数据（设置发送的数据，开始和服务器端交互）

        （5）更新界面（在注册的回调函数中,获取返回的数据,更新界面）

6.实例1（get请求）：

<h1>发送get请求的ajax_基础语法</h1>
<input type="button"  value="发送get_ajax请求" id='btnAjax'>

<script type="text/javascript">
   // 绑定点击事件
   document.querySelector('#btnAjax').onclick = function () {
      // 发送ajax 请求 需要 五步
      // 1.创建异步对象
      var ajaxObj = new XMLHttpRequest();
      // 2.设置请求的url等参数
      // 参数1 请求的方法 参数2 请求的url
      ajaxObj.open('get','02.ajax.php');
      // 3.发送请求
      ajaxObj.send();
      // 假设 有一个 接返回数据的 方法ajaxObj.get();
      // 4.注册事件
      // onreadystatechange  状态改变就会调用
      // 如果要在 数据完美请求回来的时候 才调用 我们需要手动的 写一些判断的逻辑
      ajaxObj.onreadystatechange = function () {
         // 为了保证 数据 完整回来,我们一般会判断 两个值
         if (ajaxObj.readyState==4&&ajaxObj.status==200) {
            // 如果能够进到这个判断说明数据完美的回来了,并且请求的页面是存在的
            // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
            console.log('数据完美的回来了');

            // 数据是保存在 异步对象的 属性中
            console.log(ajaxObj.responseText);

            // 修改页面的显示
            document.querySelector('h1').innerHTML = ajaxObj.responseText;
         }
         
      }

      
   }
</script>

02.ajax.php页面端代码如下：

<?php 
   echo 'food good eat more ';
 ?>

7.实例2：

<h1>使用get发送数据到服务器</h1>
<input type="button"  value="发送get_ajax请求" id='btnAjax'>

<script type="text/javascript">
   // 绑定点击事件
   document.querySelector('#btnAjax').onclick = function () {
      // 发送ajax 请求 需要 五步

      // 1.创建异步对象
      var ajaxObj = new XMLHttpRequest();

      // 2.设置请求的url等参数
      // 参数1：请求的方法，参数2：请求的url
      // get提交的数据，是直接追加在url的后面 格式是xxx.php?pass=123
      // 这只是一个字符串拼接  动态的传递参数
      // '03.get_senddata.php?userName='+document.querySelector('input').value;
      ajaxObj.open('get','03.get_senddata.php?userName=jack');

      // 3.发送请求
      ajaxObj.send();

      // 假设 有一个 接返回数据的 方法ajaxObj.get();
      

      // 4.注册事件
      // onreadystatechange  状态改变就会调用
      // 如果要在 数据完美请求回来的时候 才调用 我们需要手动的 写一些判断的逻辑
      ajaxObj.onreadystatechange = function () {
         // 为了保证 数据 完整回来,我们一般会判断 两个值
         if (ajaxObj.readyState==4&&ajaxObj.status==200) {
            // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
            // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
            console.log('数据完美的回来了');

            // 数据是保存在 异步对象的 属性中
            console.log(ajaxObj.responseText);

            // 修改页面的显示
            document.querySelector('h1').innerHTML = ajaxObj.responseText;
         }
         
      }
   }
</script>

03.get_senddata.php端代码如下：

<?php 
   echo $_GET['userName'];
 ?>

实例3（post请求）：

  <h1>ajax 发送post</h1>
<input type="text"  value="" placeholder="请输入你爱吃的菜" id='foodText'>
<input type="button"  value="ajaxPost请求" id='btnAjax'>

<script type="text/javascript">
   document.querySelector("#btnAjax").onclick = function () {
      var ajax = new XMLHttpRequest();

      // 使用post请求
      ajax.open('post','ajax_post.php');

      // 如果 使用post发送数据 必须 设置 如下内容
      // 修改了 发送给 服务器的 请求报文的 内容
      // 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
      ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      // 发送
      // post请求 发送的数据 写在 send方法中 
      // 格式 name=jack&age=18 字符串的格式
      ajax.send('name=jack&age=998');

      // 注册事件
      ajax.onreadystatechange = function () {
         if (ajax.readyState==4&&ajax.status==200) {
            console.log(ajax.responseText);
         }
      }
   }
</script>

ajax_post.php端代码如下：

<?php 
   // 获取 post的数据
   echo '你'.$_POST['age'].'岁了';
 ?>