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>