Ajax基础详解2

Posted 2020-07-28 全凭一口仙气儿活着

        沐晴又来更新啦，话说我们上回讲到Ajax中open方法的第三个参数异步和同步的问题，今天呢，就来继续往下唠，先接着上回的代码

var oBtn = document.getElementById(\'btn\');
    oBtn.onclick = function(){
    var xhr = null;
   if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
   }else{
      xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
   }
 xhr.open(\'get\',\'1.txt\',true); //设置请求信息 
 xhr.send();//提交请求
 //等待服务器返回内容 
  xhr.onreadystatechange = function() { 
           if ( xhr.readyState == 4 ) {  //如果内容响应成功，并解析完成
                alert( xhr.responseText ); //弹出内容  
          } 
     }
 } 

下面我们就讲到 ，xhr.send()；这一句呢才是真正请求数据的，open方法只是设置了一些请求参数。

   现在呢请求递交了，就等服务器回应了，这个时候Ajax的一个属性就要登场了，那就是 responseText ，ajax请求返回的内容都放在了这里面，而且不管你请求的内容是什么，这里存放的都是是字符串类型。

   当然我们上文也提到了，要想用异步请求呢，这里需要条件判断才知道服务端对请求的内容是否响应完毕，这个时候另一个属性就要登场了，readyState，他代表着Ajax请求过程的不同的状态，参数如下：

    0    （初始化）还没有调用open()方法
  1    （载入）已调用send()方法，正在发送请求
  2    （载入完成）send()方法完成，已收到全部响应内容
  3    （解析）正在解析响应内容（因为收到的内容 并不是人能看懂的内容，所以需要解析）
  4    （完成）响应内容解析完成，可以在客户端调用了

    由上我们可以得到，在状态2的时候已经回应了请求的内容了，但是这个内容我们人看不懂撒，机器才懂，所以就有3，帮我们解析这个内容，然后解析完成就变成4了，这个时候的内容，咱们前端就可以用了。

  状态是有了，可咱们怎么能知道啥时候是啥状态呢，这个时候我们就要用到一个监控状态的事件了onreadystatechange事件，当状态值改变的时候触发会触发这个事件，所以当状态为4的时候我们再弹出内容。

    上面的代码基本已经了解了原理，不过当然不是最完善的，这个时候，我们虽然监控到了状态，响应了内容，但是内容不一定就是对的呀，比如可能内容出错了，可能我们请求了一个不存在的页面，这个时候readyState是无法判断错误的，我们需要知道内容是否正常，这个时候另一个属性 status属性就登场了，它代表的不是Ajax状态，而是服务器(请求资源)的状态， http状态码。状态码有很多，其中比较出名的就是200，成功状态码，和404 Not Found.其他的大家私下自行查阅。这里可以看到。

    所以我们的代码要做进一步的改进

   var oBtn = document.getElementById(\'btn\');
    oBtn.onclick = function(){
        var xhr = null;
        if(window.XMLHttpRequest){
             xhr = new XMLHttpRequest();
         }else{
        xhr = new ActiveXObject(\'Microsoft.XMLHTTP\');
        }
        xhr.open(\'get\',\'1.txt\',true); //设置请求信息 
       xhr.send();//提交请求
        //等待服务器返回内容 
       xhr.onreadystatechange = function() { 
             if ( xhr.readyState == 4 ) { 
                    if(xhr.status == 200) {//如果响应成功，并且服务器相应内容正确
                          alert( xhr.responseText );//弹出内容  
                      }else{alert(\'出错了\' + xhr.status); //否则告知出错并弹出错误原因
              } 
       }
 }

Ajax的大概流程就是这样的。当然还存在一些细节方面的问题需要注意的，继续往下看把。

 

GET请求：

 

1 可能存在缓存问题：后台更改了 因网址未变 所以会去缓存提取内容 而不是后台

 

来看个栗子：假如我们要点击按钮弹出名字和年龄，因为GET请求是通过数值串连然后在网址传递数据的，所以我们的open方法可以直接这样写：

 

xhr.open(\'get\',\'1.get.php?username=沐晴&age=21\',true);

 

后台代码不变

 

<?php
header(\'content-type:text/html;charset="utf-8"\'); //设置编码格式，以及文档类型
error_reporting(0);

$username = $_GET[\'username\'];//获取get请求方式的数据
$age = $_GET[\'age\'];

echo "你的名字：{$username}，年龄：{$age}"; //输出内容
复制代码

 

现在点击肯定会弹出你的名字沐晴，年龄21 了。

 

这个时候呢，浏览器会有一个缓存，如果下次访问相同的网址，就会从缓存里取。

 

比如我现在想弹出，欢迎你，你的名字沐晴，年龄21，

 

echo "欢迎，你的名字：{$username}，年龄：{$age}"; //输出内容

 

虽然后台代码变了，但是GET请求访问网址依然是 1.get.php?username=沐晴&age=21，所以后台会去浏览器缓存找，结果弹出的还是原来的。大家可以自行测试。

 

所以，这个时候我们需要解决缓存问题。既然访问网址不变的话会去找缓存，那么我们让网址一直变不就好了。所以我们可以在后面加个一直变化的变量，比如系统事件，或者加一个随机数都行，像下面这样：

 

xhr.open(\'get\',\'1.get.php?username=沐晴&age=21&\'+new.Date.getTime(),true);

 

这样就不会存在缓存问题了。有些人会这样写,会在后面给它起个名字t，这个时候如果后台也有个变量叫t，可能就会出问题了，所以不是很推荐。

 

xhr.open(\'get\',\'1.get.php?username=沐晴&age=21&t=\'+new.Date.getTime(),true);

 

post 请求

1  Ajax中post 数据放在send里面作为参数传递。

2 我们上次我们知道表单里面的第三个参数：enctype: 提交的数据格式，默认是application/x-www-form-urlencoded，但是在Ajax中，你不写就没有，没有默认值，所以我们需要在请求头里面指定提交的数据格式，不然浏览器不知道用哪种格式解析。

所以post请求需要设置下面这两句

1 xhr.setRequestHeader(\'content-type\', \'application/x-www-form-urlencoded\');
2 xhr.send(\'username=沐晴&age=21\');

3 无缓存问题，因为单单是往服务器提交数据，提交数据是不会被缓存的，获取数据才会被缓存。这就是web的机制。

前面讲的都是请求数据，现在来看一下后端接收请求，然后响应给我们的内容。

先看看后端对数据的处理：后端的数据类型也是很多的，我们不能直接把这样的数据给前端吧，所以后端也需要做一定的处理，它有个方法 json_encode 可以根据数据类型不同，然后输出不同格式。看下面的栗子

<?php
header(\'content-type:text/html;charset="utf-8"\');
error_reporting(0);

$arr1 = array(\'le\',\'mo\');   // 索引类型的数据

$arr2 = array(\'username\'=>\'le\',\'age\'=>32); // 2   对应关系的数据

echo json_encode($arr1); // ["le","mo"]  索引类型 输出为数组格式
echo json_encode($arr2); // {"username":"le","age":32}  对应关系的数据  输出为json格式

虽然后端输出的内容格式上是数组和json但是我之前提到过    alert( xhr.responseText );//这里弹出的可都是字符串类型，所以尽管格式上看着是json和数组，但实际的数据类型还是字符串。

所以我们前端要对这些字符串进行转换。这个时候就用到了两个方法

1 stringify() : 把json对象转化成字符串 转换后的字符串是严格的json格式

2 parse() : 把字符串转成对象，可以把后端返回的字符串 转成JSON格式，对于json,只能转换严格json格式的字符串，字符串的键 比较用双引号括起来 像这样 {"username":"le","age":32}

下面来看个实际的案例：

需求：点击页面按钮，实现页面不刷新，在下面显示新闻列表  看注释应该能看懂

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
    var oBtn = document.getElementById(\'btn\'); 
    oBtn.onclick = function() {
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
           xhr = new ActiveXObject(\'Microsoft.XMLHTTP\');
        }     
        xhr.open(\'get\',\'getNews.php\',true);
        xhr.send();
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                   //alert( xhr.responseText );  后端传来的格式是一个数组里面很多条json 自己可以测试下
                  var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型  每一个json里面有两个键：title和date
                  var oUl = document.getElementById(\'ul1\'); //获取显示新闻列表的节点
                  var html = \'\';
                  for (var i=0; i<data.length; i++) {   // 循环所有的json数据，并把每一条添加到列表中
                        html += \'<li><a href="">\'+data[i].title+\'</a> [<span>\'+data[i].date+\'</span>]</li>\';
                   }
                   oUl.innerHTML = html; //把内容放在页面里
                } else {
                    alert(\'出错了,Err：\' + xhr.status);
                }
            }
            
        }
        
    }
}
</script>
</head>

<body>
    <input type="button" value="按钮" id="btn" />
    <ul id="ul1"></ul>
</body>
</html>

<?php
header(\'content-type:text/html;charset="utf-8"\');
error_reporting(0);

$news = array(
  array(\'title\'=>\'女总理默克尔滑雪时摔倒 骨盆断裂\',\'date\'=>\'2014-1-6\'),
    array(\'title\'=>\'驻英外交官撰文互称对方国家为"伏地魔"\',\'date\'=>\'2014-1-6\'),
    array(\'title\'=>\'安倍:望与中国领导人会面 中方:你关闭了大门\',\'date\'=>\'2014-1-6\'),
    array(\'title\'=>\'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查\',\'date\'=>\'2014-1-6\'),
    array(\'title\'=>\'：嫦娥三号是货真价实的中国创造\',\'date\'=>\'2014-1-6\'),
 

);

echo json_encode($news);

 

好了今天的Ajax就唠到这，希望大家有所收获，如果有错误的希望大家指正，看到好多人看头像进来的，伦家真是不知道说什么，还是希望大家能理性多提点意见拉拉，下次会讲下对于Ajax的封装，以及一些实际应用。不见不散啦