认识ajax，学会ajax的创建

ajax简介

AJAX（ASynchronous JavaScript And XML） = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

ajax的特点

异步请求 局部刷新

优点：

• 局部刷新页面，提高用户体验度
• 异步请求
• 减轻服务器的压力，只返回请求的内容
• 对于客户端节省宽带占用

ajax的创建

				//1.创建ajax对象（老版本的IE浏览器不支持XMLHttpRequest()）
				var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }
                //2.调用open
                /* 
                    第一个参数：请求方式  get post
                    第二个参数：url
                    第三个参数：是否异步
                        true 异步
                        false 同步
                 */
                xhr.open("get","1.text",true);

                //3.调用send
                xhr.send();

                //4.等待数据响应
                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4) {
                        alert(xhr.responseText);
                    }
                }

try_throw_catch

IE8以下不兼容new XMLHttpRequest();采用new ActiveXObject(‘Microsoft.XMLHTTP’);

通过try_catch实现

				/* 
                    try{
                        尝试代码
                    }catch(error) {
                        error 错误对象，try括号中代码执行的异常信息；
                        补救代码
                    }
                    1.先执行try中的代码
                    2.如果try中代码执行正常，则不执行catch中的代码
                    3.如果try中代码执行异常，直接执行catch中的代码进行补救

                    try_throw_catch(手动抛出异常)
                 */
                var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }

请求状态监控

onreadystatechange事件

readyState属性：请求状态

• 0 ：(初始化)还没有调用open()方法
• 1 ：(载入)已调用send()方法，正在发送请求
• 2 : (载入完成) send()方法完成，已受到全部响应内容
• 3 : (解析) 正在解析下载的内容
• 4 : (完成) 下载内容解析完成，可以在客户端调用了

        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                //判断本次下载的状态码
                if(xhr.status == 200) {
                    alert(xhr.responseText);
                }else{
                    alert("Error" + xhr.status);
                }
            }
        }

status属性：服务器的状态

返回的内容：

• responseText：返回以文本形式存放的内容
• responseXML:返回XML形式的内容

get和post请求

• get请求

参数在url中传递，open()参数中，需要用问号缀参数，send()参数是null

<input type="text" id="uname">
    <input type="text" id="upwd">
    <button id="login">发送</button>
    <script>
        document.getElementById("login").onclick = function () {
            var uname = document.getElementById('uname').value;
            var upwd = document.getElementById('upwd').value;

            var xhr = new XMLHttpRequest();
            var url = "get.php?uname="+uname+"&upwd="+upwd;
            xhr.open('get',url,true);
            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    console.log(xhr.responseText);
                }
            }
        }
    </script>

• post请求

  post请求参数在send()中传递

  需要设置请求头信息

  xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded;charset=utf-8”);

  1)application/x-www-form-urlencoded 表单传输编码

  2)multipart/form-data 非文本内容

  3)text/plain

  <input type="text" id="uname">
      <input type="text" id="upwd">
      <button id="login">发送</button>
      <script>
          document.getElementById("login").onclick = function () {
              var uname = document.getElementById('uname').value;
              var upwd = document.getElementById('upwd').value;
  
              var xhr = new XMLHttpRequest();
              xhr.open('post', 'post.php', true);
  
              var data = `uname=${uname}&upwd=${upwd}`;
              xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");
              xhr.send(data);
  
              xhr.onreadystatechange = function () {
                  if (xhr.readyState == 4) {
                      console.log(xhr.responseText);
                  }
              }
          }
      </script>