Ajax笔记

为什么要学习Ajax呢？

因为传统网站中存在以下的问题：

网速慢的情况下，页面加载时间长，用户只能等待
表单提交后，如果一项内容不合格，需要重新填写所有表单内容
页面跳转，重新加载页面，造成资源的浪费，增加用户等待时间

Ajax:阿贾克斯

它是浏览器提供的一套方法，可以实现页面无刷新就能更新数据,提高用户浏览网站应用的体验。

Ajax的应用场景：

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

Ajax的运行环境：

Ajax技术需要运行在网站环境中才能生效就是要搭建在服务区上

Ajax运行原理：

Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览网页的情况下局部刷新界面，从而提高用户体验

Ajax的实现步骤：

创建对象
- var xhr = new XMLHttpRequest();
用open(‘请求方式’,’请求地址’,同步（true）还是异步)；
- xhr.open(‘get’,’a.php’,true);
用send发送请求或者参数(二选一)
- xhr.send(); (没有带参数)
- xhr.send(username=zhong&age=20); (带参数)
监听状态变化
- xhr.onreadystatechange = function () {
  
  if (xhr.readyState == 4 && xhr.status == 200) {
  
  5.通过xhr.responseText获取服务器端响应的数据
  
  a.innerHTML = xhr.responseText;
  
  }
  
  }

例子：

客户端：

<h2 id='a'></h2>

  <script>
      var a = document.getElementById('a');
      //1.创建对象
      var xhr = new XMLHttpRequest();
      //2.用open('请求发送','请求地址',同步(true)还是异步);
      xhr.open('get', 'a.php', true);
      //  用send发送请求 或者参数
      xhr.send();
      //3.在Ajax的onreadystatechange中创建函数，在函数中判断Ajax的状态并体现
      xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
              //5.通过xhr.responseText获取服务器端响应的数据并且应用DOM技术局部刷新页面
              a.innerHTML = xhr.responseText;
          }
      }

  </script>

服务端：

<?php
echo 'my name is xiaozhong';
?>

效果图：

服务器端响应的数据格式（JSON）：

在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式
当客户端拿到数据后，要将JSON数据和HTML字符串拼接，然后将拼接结果展示在页面中
因为服务器端响应过来的数据是字符串所以将JSON字符串转换为JSON对象（JSON.parse(Ajax对象.responseText)）

例子：

客户端：

  <script>
        addEventListener('load', function () {
            //通过DOM操作获取网页中的标签元素
            var text = document.getElementById('text');
            var age = document.getElementById('age');
            //创建Ajax对象
            var xhr = new XMLHttpRequest();
            //用什么方式请求 请求的地址 同步还是异步
            xhr.open('get', 'cs.php', true);
            //用send发送请求
            xhr.send();
            //监听状态变化
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //JSON.parse()将JSON字符串解析为javaScript对象
                    var responseText = JSON.parse(xhr.responseText);
                    text.innerHTML = responseText.name;
                    age.innerHTML = responseText.age;
                }
            }
        });
    </script>

<body>
用户名:<h2 id="text"></h2>
年龄：<h2 id="age"></h2>
</body>

服务器端：

<?php
echo '{"name":"zhong","age":"20"}';
?>

效果图：

请求参数传递：

GET请求方式：

xhr.open(‘get’,’a.php?username=xiaozhnog&pass=20’);

<script>  
//获取输入框的内容存入str
 var str = 'username=' + username.value + '&' + 'pass=' + pass.value + '&' + 'email=' + email.value;
   // 创建AJAX对象
    var xhr = new XMLHttpRequest();
   //用什么方式发送请求 请求的地址 是同步还是异步
   	xhr.open('get', 'b.php?' + str, true);
</script>

POST请求方式：
xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
xhr.send(‘name=xiaozhong&age=20’);

<script>
 //创建Ajax对象
                var xhr = new XMLHttpRequest();
                //用什么方式请求 请求的地址 同步还是异步
                xhr.open('post', 'post.php', true);
                //使用send发送
                var str = username.value;
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhr.send('username=' + str);
</script>