js：原生ajax【纯js】

ajax

1. 同步与异步区别

• 同步：按顺序，依次执行，向服务器发送请求-->客户端做其他操作

• 异步：分别执行，向服务器发送请求==>同时执行其他操作

原生ajax

• 四步骤

1. 创建ajax对象

• var a=new xmlhttprequest();

2. 设定数据的传输方式（get、post），打开连接（open()）

• ajax对象.open("method"，"url"，"同步false/异步true")

3. 获得响应数据

属性	描述
onreadystatechange	当readystate改变时就会调用该函数
responsetext	获得字符串形式的响应数据
responsexml	获得xml的形式的响应数据
readystate	0：请求未初始化 1：服务器连接已建立 2：请求处理中 3：请求处理中 4：请求已完成，且响应已就绪
status	200：ok 404：未找到页面

4. 发送https请求：ajax.send（）

原生ajax四步骤代码：

<button>获取ajax</button>
    <div></div>
    <script>
        document.getElementsByTagName("button")[0].onclick=function(){
            //创建ajax对象
            var ajax=new XMLHttpRequest();
            //请求地址
            ajax.open("get","http://127.0.0.1:5500/work4.html",false); 
            //获得响应数据
            ajax.onreadystatechange=function(){
                //判断请求是否正常运行
                if(ajax.readyState==4&&ajax.status==200){
                    //赋值到当前页面
                    document.getElementsByTagName("div")[0].innerHTML=ajax.responseText;
                }else{
                    alert("没请求成功")
                    alert(ajax.readyState)
                    alert(ajax.status)
                }
            }
            //发送请求
            ajax.send()
        }
        
    </script>

• 数据交换格式【不能跨域】：

• 获取xml文件的内容，美观的渲染到页面

<button>获取数据</button>
    <table></table>
    <script>
        document.getElementsByTagName("button")[0].onclick=function(){
            varajax=newXMLHttpRequest;
            ajax.open("get","work1.xml",true);
            ajax.onreadystatechange=function(){
                if(ajax.status==200&&ajax.readyState==4){
                    xixi(ajax.responseXML);
                }
            }
            ajax.send()
        }
        functionxixi(obj){
                    vartable="<table><tr><th>姓名</th><th>年龄</th><th>地址</th></tr>"
                    varxml=obj.getElementsByTagName("xi");
                    for(i=0;i<xml.length;i++){
                        table+=`<tr><td>${xml[i].getElementsByTagName("name")[0].childNodes[0].nodeValue}</td>
                                <td>${xml[i].getElementsByTagName("age")[0].childNodes[0].nodeValue}</td>
                                <td>${xml[i].getElementsByTagName("address")[0].childNodes[0].nodeValue}</td></tr>`
                    }
                    document.getElementsByTagName("table")[0].innerHTML=table;
                }
    </script>

• 获取json文件的内容，美观的渲染到页面

<button>获取数据</button>
    <table></table>
    <script>
        document.getElementsByTagName("button")[0].onclick=function(){
        //原生ajax，4个步骤
            // 1.创建ajax对象
            varajax=newXMLHttpRequest;
            // 2.设置请求方式，地址，同步或异步
            ajax.open("get","work.json",true);
            // 3.获得相应数据
            // 如果请求状态改变触发函数
            ajax.onreadystatechange=function(){
                // 如果请求状态是4代表请求成功，并返回数据，并且正常访问服务器端页面
                if(ajax.readyState==4&&ajax.status==200){
                    // 调用函数，传递实参，字符串格式的ajax对象数据
                    xixi(ajax.responseText);
                }
            }
            // 4.发送请求
            ajax.send()
        }
        functionxixi(obj){
                    vartable="<table><tr><th>姓名</th><th>年龄</th><th>爱好</th></tr>"
                    //反序列化==>把json格式转化成js对象格式
                    varxml=JSON.parse(obj);
                    //是以数组里面写对象方式存储json数据的，所以循环数组，遍历每个对象
                    for(iinxml){
                        table+=`<tr><td>${xml[i].name}</td>
                                <td>${xml[i].age}</td>
                                <td>${xml[i].ah}</td></tr>`
                    }
                    //将拼接好的表格放在本页面上展示
                    document.getElementsByTagName("table")[0].innerHTML=table;
                }
    </script>

1. 数据结构：

• 对象结构：{"key":"value","key":"value"}

• 数组结构：[value,value]

2. json语法注意事项：

• 属性名必须使用双引号包裹;

• 字符串类型的值必须使用双引号包裹;

• JSON 中不允许使用单引号表示字符串;

• JSON 中不能写注释;

• JSON 的最外层必须是对象或数组格式，

• 不能使用 undefined 或函数作为 JSON 的值。

3. json与js对象的关系

• JSON 是JS 对象的字符串表示法，它使用文本表示一个JS 对象的信息，本质是一个字符串。

• js对象：var obj = {a: 'Hello', b: 'world'}

• json：var json = '{"a": "Hello","b": "wor1d"}'

4. json和js相互转换

• 要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法:

varobj=json.parse('{"a": "he11o","b": "world"}');
//结果为{a:'He11o'，b:'wor1d'}

• 要实现从JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法:

varobj=json.stringify({a: 'Hello'. b:'world'}):
//结果为'{"a": "hello","b": "world"}

5. 序列化与反序列化

• 把js-->json的过程，叫做序列化，json.stringify()函数就叫做序列化函数。

• 把json-->js的过程，叫做反序列化，json.parse()函数就叫做反序列化函数。

6. json比较xml的优点：方便，小，快