AJAX详解

最新推荐文章于 2024-09-01 19:13:21 发布
熙哲数
最新推荐文章于 2024-09-01 19:13:21 发布
阅读量309
点赞数
分类专栏： AJAX 文章标签： AJAX
本文链接：https://blog.csdn.net/sun13921881708/article/details/76089406
版权
AJAX 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
aJax

aJax:允许浏览器与服务器之间通信而无需刷新当前页面的技术。

服务端语言：服务器需要具备向浏览器发送特定信息的能力，aJax与服务器语言无关

XML：可扩展标记语言：是一种描述数据的个数，Ajax程序需要某种格式化的格式来在服务器和客户端之间传递信息，一般选用XML
使用JavaScript绑定和处理所有的数据
使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取
DOM：实现动态显示和交互
XHTML：标准化呈现

核心：XMLHttpRequest对象
    是JavaScript的一个扩展，可以使网页和服务器之间进行数据交互，它是一种异步请求技术，通过XMLHttpRequestrian可以使JavaScript向服务器提出请求并处理响应，而不阻塞用户。
    
 aJax:是异步的JavaScript对象和XML，利用JavaScript语言向服务器发送异步请求，响应后的数据是XML格式（一般都是json）
 aJax最大特点：可以异步请求，刷新局部代码
 
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .tr0{
            background-color: red;
        }
        .tr1{
            background-color: green;
        }
    </style>
</head>
<body>
<table id="person_table"></table>
<!--加载数据按钮-->
<input type="button" value="加载数据" οnclick="loadDate();"/>
<!--显示人的信息表格-->
<table id="person_table1" style="border: 1px" border="1px">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>学号</th>
    </tr>

</table>

</body>
<script type="text/javascript">
    //加载数据
    function loadDate() {
        /*aJax开发步骤*/
        1.创建请求对象
        var xhr;
        try{
            //正常浏览器
            xhr=new XMLHttpRequest();
        }catch(e){
            //IE6
            try {
                xhr=new ActiveXObject("Msxml2.XMLhttp");
                //IE5或之前
            }catch(e){
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }


        }
//2.打开和服务器之间的连接
//        xhr.open("GET","http://10.0.163.168:5500");
        xhr.open("GET","json文件/a.json",true);
        //3.发送请求
        xhr.send();
        //4.接受服务器的响应
        xhr.onreadystatechange=function () {
            //需要判断，请求对象的状态码为4，服务器响应的状态码为200的时候，在使用
            if(xhr.readyState==4&&xhr.status==200){
                //返回数据
                xhr.responseText;//返回的是json格式的字符串，我们需要将其转换为JavaScript中的字面量对象
                var jsObj=JSON.parse(xhr.responseText);
                //刷新UI（动态的创建表格，插入请求的数据）
                //得到表格
                var table=document.getElementById("person_table");
                //遍历jsObj（是一个数组）
                for(var tempPersonIdx in jsObj){
                    //获取每一个人的对象
                    var tempPerson=jsObj[tempPersonIdx];
                    //创建tr标签
                    var tr=document.createElement("tr");
                    //给tr添加class属性，给奇偶行设置背景颜色
                    tr.setAttribute("class","tr"+tempPersonIdx%2);

                    //遍历人对象的属性
                    for(var tempPersonPro in tempPerson){
                        //创建节点td
                        var td=document.createElement("td");
                        //创建文本节点
                        var tdValue=document.createTextNode(tempPerson[tempPersonPro]);
                        //为td添加文本节点
                        td.appendChild(tdValue);
                        //为tr添加td
                        tr.appendChild(td);

                    }
                 //为table添加tr
                    table.appendChild(tr);
                }
            }
        }
    }
</script>
</html>

AJAX的编程步骤：
   1.创建请求对象：
      创建核心的XMLHttpReuest请求对象，AJAX编程都是利用JavaScript这个请求对象进行编程
      
      注意：
         XMLHttpRequest请求对象，对浏览器的支持是不一样
         1.1大部分主流的浏览器都支持XMLHttpRequest对象
         var xhr=new XMLHTTPRequest();
         1.2.IE6
           xhr=new ActiveXObject("Msxml2.XMLhttp");
         1.3.IE5以及更早
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
         
          
2.打开与服务器的连接

创建请求对象后，调用请求对象的open()方法：该方法可以和服务器之间连接
open(method,url,async);
  metheod:请求方式：GET和POST
  URL：要请求服务器的路径，如果用的是GET请求，那么参数就添加在URL后面
  async:表示用的是异步请求还是同步请求，默认是异步
  

3.发送请求：
   请求对象调用open（）方法打开连接后，利用请求的对象调用send()方法，发送请求
   如果你用的是GET方式请求，send（）方法的参数为空或者写null
   如果是POST方式请求，那么请求参数会放到里面

4.接受服务器的响应
当请求对象调用完send()方法后，就可以等待服务器响应，
请求对象有一个onreadystatechange事件，这个事件会根据请求的对象的状态而触发
   请求对象的5种状态（状态码）
   0：表示初始化未完成，只是创建了XMLHTTPRequest请求对象，还未调用open（）方法
   1：请求开始，开始调用open()方法，但还没有调用send()方法
   2：请求发出，说明已经调用send()方法
   3：开始接受服务器的响应
   4：读取服务器的响应（响应彻底结束）

注意：调用onreadystatechange事件会在状态码为2/3/4的时候触发，在开发时，一般只关心状态码为4的时候

服务器的响应码：
   200：响应正常
   404：找不到要访问的页面
   500：服务器端页面异常
   
   
   例如：导航
   1.定义一个HTML文件
  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript" src="../js/a.js"></script>
    <script type="text/javascript" src="../js/b.js"></script>
</head>
<body>
<input type="button" value="加载数据" id="load_btn"/>
<br/>
<br/>
<table id="out_table" border="1px">
   <!-- <tr>
        <td>
            <table>
                <thead>A</thead>
                <tr>
                    <td>奥迪</td>

                </tr>
                <tr>
                    <td>阿斯顿</td>

                </tr>
            </table>
        </td>


    </tr>
-->

</table>


</body>
<script type="text/javascript">
//通过工具类。给window添加load事件
    b.addHandler(window,"load",function () {
        //执行完onload事件，给button添加单击事件

        b.addHandler($("load_btn"),"click",function () {
            //点击按妞通过AJAX来异步请求加载数据
//            ajaxFn("GET","../js/car.json",null,function () {
//                //这么写是可以
//            }),function () {
//               //请求失败
//            }
            //调用AJAX异步请求
            ajaxFn("GET","../js/car.json",null,successCallBackFn,failCallBackFn);
        });
    });
//AJAX返回函数成功
    function successCallBackFn(returnValue) {

        //把JSON字符串转换成js对象
        var rootObj=JSON.parse(returnValue);
        //得到listcntents数组
        var listContentArray=rootObj.listContents;
        //获取外层的table
        var outTable=$("out_table");
        //遍历listContentArray数组
        for(var tempListContentIdx in listContentArray){
            //得到每一个ListContent对象
            var tempListContent=listContentArray[tempListContentIdx];
            //创建外层tr
            var outTr=createElement("tr");
            //创建外层的td
            var outTd=createElement("td");
            //创建内层的Table
            var inTable=createElement("table");
            //创建内层thread
            var inthead=createElement("thead");
            //创建内层的thead的textNode
            var inTheadValue=createTextNode(tempListContent.PinYin);
            //添加TExtNode
            inTable.appendChild(inTheadValue);
            //添加inthread
            inTable.appendChild(inthead);
//添加inTable
            outTd.appendChild(inTable);
            outTr.appendChild(outTd);
            outTable.appendChild(outTr);
//创建内部的tr和td
            //得到carArray 的数组
            var carArray=tempListContent.GroupInfo;
            //遍历数组
            for(var tempCarIdx in carArray){

                //得到每一个car对象
                var tempCar=carArray[tempCarIdx];
                //创建tr
                var inTr=createElement("tr");
                //创建td
                var inTd=createElement("td");
                //在创建内部的td的textNode
                var inTdValue=createTextNode(tempCar.MainBrandName);

                //添加textNode
                inTd.appendChild(inTdValue);
                inTr.appendChild(inTd);
                inTable.appendChild(inTr);
            }
        }
    }
//AJAX返回失败的函数
    function failCallBackFn(returnValue) {
        alert(returnValue);

    }
//封装通过ID获取标签元素
    function $(idValue) {
        return document.getElementById(idValue);

    }

    //封装创建元素的方法
    function createElement(elementName) {
        return document.createElement(elementName);
    }
//封装创建TextNode
    function createTextNode(elementValue) {
        return document.createTextNode(elementValue);
    }
</script>
</html>


2.定义AJAX工具类
/*
* 封装AJAX
* method：请求方式
* URL：请求路径
* date：参数
* successCallBackFn:响应成功回调函数
* failCallBackFn:响应失败回调函数
*
*
* */

function ajaxFn(method,url,data,successCallBackFn,failCallBackFn) {
    var xhr;
    //创建请求对象
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        var vesions=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i=0;i<vesions.length;i++){
            try{
                xhr=new ActiveXObject(vesions[i]);
                break;
            }catch(e){
                console.log(e);
            }
        }
    }else{
        //创建一个错误的对象
        //throw去主动抛出一个异常错误
        throw  new Error("浏览器不支持AJAX");
    }
//打开连接和发送请求
    if(method=="GET"||method=="get"){
        //利用AJAXGET请求会有缓存，为了避免每一次访问的路径不一样，可以在URL后面加随机数
        //随机数可以通过Math.random()解决
        xhr.open(method,url+"?"+data+Math.random(),true);
        xhr.send(null);
    }else if(method=="POST"||method=="post"){
        xhr.open(method,url,true);
        //post请求需要设置请求头
        xhr.setRequestHeader("content-type","application/x-www-form-urlencodeed");
        //发送请求
        xhr.send(data);

    }else
    {
        console.log("请求方式不正确！");
    }

//请求响应结果
    xhr.onreadystatechange=function () {
        if(xhr.readyState==4){
            if(xhr.status==200){
                //调用回调函数
                successCallBackFn(xhr.responseText);
            }else{
                //失败
                failCallBackFn("失败！");
            }
        }
    }
return xhr;
}

3.定义事件工具类
/*
 * 事件封装工具
 */
var EventUtil = {
    //添加事件的方法
    /*
     * element: 给"谁"(某个元素)添加事件
     * eventType: 事件类型
     * handler: 具体实现函数
     */
    addHandler : function (element, eventType, handler) {
        //三种实现
        if (window.addEventListener) {
            //IE9及IE9以上
            element.addEventListener(eventType, handler);
        } else if (window.attachEvent) {
            //IE8及IE8以下实现
            //attachEvent需要的事件类型 需要 加上 on
            element.attachEvent("on" + eventType, handler);
        } else {
            //通过中括号访问属性的语法才可以
            element["on" + eventType] = handler;
        }
    },
    removeHandler : function (element, eventType, handler) {
        if (window.removeEventListener) {
            element.removeEventListener(eventType, handler);
        } else if (window.detachEvent) {
            element.detachEvent("on" + eventType, handler);
        } else {
            element["on" + eventType] = null;
        }
    }
}