第二十五章 Ajax封装

一,Ajax

---

1.1什么是Ajax呢?

Ajax (Asynchronous Javascript And XML) (异步 JavaScript 和 XML）

它是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。
那么上面所说什么是异步呢
好比如说:你在注册一个账号,你需要添加用户名,性别,地址,密码,手机号,密保问题,身份证号.....等等等,然后你提交的时候,突然发现你的用户名格式错误,然后所有东西都没了,你还得重新去填。这就是同步
所谓异步:最大特点就是页面不刷新:如我们在看电影时候的弹幕,评价........

• 传统验证方式的缺点
  1.耗费流量,因为将数据反复提交给浏览器
  2.好费时间长:多次提交的耗时
  3.用户体验差:仅仅因为写错了一个数据,导致页面重新加载,又得重新写

• ajax优点
  1.节省流量
  2.节省操作时间
  3.不刷新页面

---

1.2核心技术,XMLHttpRequest 简称:XMR。

它有一个兼容问题,一说兼容问题,我们就想到了IE浏览器
方法if,属性用||

        var xhr ;
        if(window.XMLHttpRequest){
              //主流浏览器写法
            xhr = new XMLHttpRequest();
        }else{
            //兼容IE写法
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

ajax请求数据的固定格式
1.创建XMLHttpRequest对象xhr
2.创建请求(写请求方式和数据)open()
3.发送请求send()
4.监听onreadystatechange
下面写一个返回json数据

         //1.创建XMLHttpRequest对象`xhr`
            var xhr ;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
         //2.创建请求(写请求方式和数据)`open()`
            xhr.open("get","index.json");
        //3.发送请求`send()`
            xhr.send();
        //4.监听`onreadystatechange`
           xhr.onreadystatechange = function(){
                //监听判断状态值是不是4  
                if(xhr.readyState == 4){
                 //再判断xhr的状态码是不是200 
                    if(xhr.status == 200){
                        // console.log(xhr.responseText);
                        //这是字符串  需要反序列化转换为Object 
                        var txt = JSON.parse( xhr.responseText)
                        console.log(txt);
                    }
               }
            }

解析一下监听状态是什么 ajax的readyState的属性
他一共有5个值 分别是 0 1 2 3 4

• 0:代表了ajax对象
• 1:已经调用了open方法,创建了http请求
• 2:已经调用了send方法,发送了请求
• 3:正在返回数据,但是不完整,已经有了一小部分
• 4:ajax请求完成,数据返回完整
  所以我们需要状态是4然后在正常读取数据

那么什么是status呢?
可以简单的理解为state代表一个整体的状态。而status是这个大的state下面具体的小的状态。

无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码 他也有5个状态

• 1 xx：信息响应类，表示接收到请求并且继续处理
• 2 xx：处理成功响应类，表示动作被成功接收、理解和接受200
• 3 xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
• 4 xx：客户端错误，客户请求包含语法错误或者是不能正确执行404
• 5 xx：服务端错误，服务器不能正确执行一个正确的请求502

所以最好我们要写成

xhr.status === 200 && xhr.readyState === 4

Ajax和json的关系 是请求并响应json的数据