Ajax入门知识

一、认识ajax

ajax 是异步的JavaScript和xml，异步JavaScript和数据传输
ajax最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据，并更新部分网页内容。

---

xml 数据传输格式
优点： 1.种类丰富 2.传输量非常大
缺点：1.解析麻烦 2.不太适合轻量级数据

json 数据传输格式（字符串）95%用在移动端
优点：1.轻量级数据
缺点：2.传输数据量比较小

---

异步和同步
同步：阻塞，当前程序运行，必须等前一个程序运行完毕以后才能运行。
异步：非阻塞，当前程序运行，其他程序也可以运行。

1.如何使用ajax

1.创建ajax对象 2.调用open 3.调用send 4.等待数据响应

处理创建ajax对象浏览器兼容问题
XMLHttpRequest() IE8下浏览器不兼容
ActiveXObject(‘Microsoft.XMLHTTP’); IE8以下使用

    <script type="text/javascript">
        window.onload=function(){
            var oBtn = document.getElementById("btn1");

            oBtn.onclick=function(){
                // 1.创建ajax对象
                // var xhr = new XMLHttpRequest();

                // 处理创建ajax对象兼容问题
                var xhr=null;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr=new ActiveXObject('Microsoft.XMLHTTP');
                }
                
                // 2.调用open
                /* 
                    第一个参数：请求方式 get post
                    第二个参数：url
                    第三个参数：
                        true 异步
                        false 同步

                */
               xhr.open("get","1.txt",true);

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

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

2.try-catch

多用于代码调试
try
{
//在此运行代码
可以手动抛出异常
}
catch(error)
{
//在此处理错误
}
1.先执行try中的代码
2.如果try中的代码正常，就不执行catch
3.如果try中的代码异常，就执行catch 中的代码处理异常

手动抛出异常的作用：可以分段测试代码，如果到最后都没有异常表示所有代码正常。

        try{
            alert("异常执行之前");
            alert(Nu);
            alert("异常执行之后");
        }catch(error){
            alert("Error:错误异常/"+error);
        }

        /* 
            try_throw_catch 手动抛出异常
        */

        try{
            alert("异常执行之前");
            throw new Error("手动异常");
            alert("异常执行之后");
        }catch(error){
            alert("发现异常："+error);
        }
            

        window.onload=function(){
            var oBtn = document.getElementById("btn1");

            oBtn.onclick=function(){
                // 1.创建ajax对象
                // var xhr = new XMLHttpRequest();

                // 处理创建ajax对象兼容问题
                var xhr=null;
/*                 if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr=new ActiveXObject('Microsoft.XMLHTTP');
                } */
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr=new ActiveXObject('Microsoft.XMLHTTP');
                }
                
                // 2.调用open
                /* 
                    第一个参数：请求方式 get post
                    第二个参数：url
                    第三个参数：
                        true 异步
                        false 同步

                */
               xhr.open("get","1.txt",true);

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

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

3.onreadystatechange 等待数据响应

onreadystatechange 事件类型
xhr.readyState 发生变化时调用
有五个等级 0-4

4.HTTP状态码

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。

HTTP状态码的英文为HTTP Status Code。

下面是常见的HTTP状态码：

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
400 Bad Request 客户端请求的语法错误，服务器无法理解
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

5. 请求 get和post

form表单的请求
get 默认提交：接着将数据通过？拼接在url后面进行提交
优点：简单
缺点：1.不安全2.最大2kb 3.没法上传

？+数据 是 查询 search
不带？ 是 querystring 查询字符串

post 提交： 必须要设置表单请求头
优点：1.通过浏览器内部提交2.理论上没有上限3.上传
缺点：理论上比get复杂

---

AJAX的请求
get请求

post请求：必须在send方法之前设置请求头格式

ajax请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")

6.封装ajax

<script type="text/javascript">
        /* 
            封装ajax ：method url data
            success 数据下载成功
            error 数据下载失败
        */
        function $ajax({ method = "get", url, data, success, error }) {
            //1.创建ajax对象
            var xhr = null;
            // 兼容IE8
            try {
                xhr = new XMLHttpRequest();
            } catch (error) {
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

            if (data) {
                data = querystring(data);
            }
            //判断get和数据
            if (method == "get" && data) {
                url += "?" + data;
            }
            // 2.调用open方法
            xhr.open(method, url, true);

            //3.调用和判断 send方法
            if (method == "get") {
                xhr.send();
            } else {
                // post在调用send方法设置请求头
                xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
                xhr.send(data);
            }

            // 4.等待数据响应
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        /* 
                            如何处理下载数据的不确定
                            运用回调函数
                        */
                        if (success) {
                            success(xhr.responseText);
                        }
                    } else {
                        if (error) {
                            error(xhr.status);
                        }
                    }
                }
            }

        }
        //封装查询字符串
        function querystring(obj) {
            var str = "";
            for (var attr in obj) {
                str += attr + "=" + obj[attr] + "&";
            }
            return str.substring(0, str.length - 1);
        }

        window.onload = function () {
            var oGet = document.getElementById("getBtn");
            var oPost = document.getElementById("postBtn");

            //1.get请求
            oGet.onclick = function () {
                $ajax({
                    url: "1.get.php",
                    data: {
                        username: "value1",
                        age: 18,
                        password: "123asd"
                    },
                    success: function (result) {
                        alert("GET请求"+result);
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            }

            // 2.post请求
            oPost.onclick = function () {
                $ajax({

                    method: "post",
                    url: "1.post.php",
                    data: {
                        username: "value1",
                        age: 18,
                        password: "123asd"
                    },
                    success: function (result) {
                        alert("Post请求"+result);
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            }

        }
    </script>