ajax(上)

主要内容：

ajax的概述
ajax获取数据
ajax获取接口渲染页面
ajax获取其他类型数据
ajax传输数据

1.ajax的概述

前端核心工作：渲染(数据)，用户体验，性能优化
渲染–需要数据(动态)
数据接口：http://localhost/NZ_1903/Day%2022/taobaodata.php
ajax:AJAX即“Asynchronous Javascript And
XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
javascript是一门单线程(主线程)的语言(JavaScript像工厂里面的一条流水线，要么加工，要么包装)不能同时进行多个任务或者流程。同步和异步差别就在于这条流水线执行的顺序不同。

同步：
阻塞模式，在主线程排队执行的任务，
只有前一个任务执行完，后一个任务才能执行。

alert(a);//报错，阻塞了后面任务的执行。
	alert('hehe');
for (; ;) { }//死循环，阻塞了后面任务的执行。
console.log('hehe');

异步:
非阻塞模式，不进入主线程，而是进入任务队列，
只有等主线程上面的任务执行完毕，任务队列通知主线程，
请求执行任务。该任务才会进入主线程执行。
(定时器,ajax,回调函数)

   setTimeout(function () {//队列
            alert(a);
        }, 0);
        alert('hehe');//主线程

        console.log(1);//主线程
        setTimeout(function () {//队列
            console.log(2);
        }, 1000);
        setTimeout(function () {//队列
            console.log(3);
        }, 2000);
        console.log(4);//主线程

xml:

可扩展的标记语言。标签自由定义，满足规则和声明条件。
一定带有声明，标签一定要有根元素。
早期数据接口的主要格式。早于json
现在json几乎取代了xml。

ajax获取数据

注意：

ajax前后端交互，不能脱离服务器。一般来说html文件可以采取中文命名(不是在最优的，尽量英文);php文件不能使用中文。路径尽量不要出现中文。
前后端交互ajax对象，创建ajax对象，利用对象下面的方法或者属性来实现数据的获取。
浏览器的控制台下面有netword面板，通过此面板查看前后端的交互信息。

1.创建ajax对象+容错处理
var ajax = new XMLHttpRequest();//标准浏览器
var ajax = new ActiveXObject(“microsoft.XMLHTTP”);//IE6 这里已经不需要了

try{
        console.log(a);
    }catch(e){
        console.log(e);//打印try的错误!
        console.log('try出错时,我才执行')
    }finally{
        alert("我是必须执行的！")//不管上面的代码是否有错误，我是必须执行的
    };

var ajax=null;
    try{
        ajax = new ActiveXObject("microsoft.XMLHTTP");//IE6
    }catch(e){
        ajax = new XMLHttpRequest();//标准浏览器
    };

2.ajax对象下面的open()方法。

ajax.open(请求的方式,接口地址,是否异步);
参数1：请求方式–get/post/put/delete/ 常用的方式get/post
参数2：接口地址–后端的后者第三方提供的域名，域名里面包含我们需要的数据
参数3：是否异步，true异步(最常用的是异步)，false同步，同步下浏览器谁出现警告
ajax.open(“get”, “http://localhost/NZ-1903/0303/13conn.php”, true);

3.ajax对象下面send()方法,不涉及数据的传输,里面没有参数的。
发送解析
解析有五步:就绪状态码(数字)决定—ajax.readystate: 获取就绪状态码

第一步:请求初始化(open都有调用)。就绪状态码为 0
第二步:请求已建立，但是还没有发送。就绪状态码为 1
第三不:请求以发送, 准备处理。就绪状态码为 2
第四步:请求处理,获取内容的基本信息。就绪状态码为 3
第五步：亲求响应全部完成,响应服务器的一切内容。就绪状态码为 4
ajax.send();

4监听事件：监听就绪码是否完成，一旦完成，立刻获取数据–onreadystatechange
ajax.responeText：//获取接口放回数据。类型是字符串。

    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {//请求响应全部完成,响应服务器的一切内容
            if(ajax.status === 200){//ajax.status:http状态码  200 ok

            console.log(ajax.responseText);//字符串
            console.log(JSON.parse(ajax.responseText));//将json格式的字符串转化为对象
            }
        }
    }

ajax获取数据共四步：

let ajax = new XMLHttpRequest();
    ajax.open("get", "http://localhost/NZ-1903/0303/13conn.php", true);
    ajax.send();
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {
            console.log(ajax.responseText);//字符串
            console.log(JSON.parse(ajax.responseText));//将json格式的字符串转化为对象
        }
    }

3. ajax获取接口渲染页面

const goodslist = document.querySelector(".goodslist");
    let ajax = new XMLHttpRequest();
    ajax.open("get", "http://localhost/NZ-1903/0303/13conn.php", true);
    ajax.send();
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {
            if(ajax.status === 200){//ajax.status:http状态码

                let renderarr = JSON.parse(ajax.responseText);
                let strhtml = "<ul>";
                for (let value of renderarr) {//遍历数组每一项值
                    strhtml += `
                    <li>
                    <img src="${value.url}"/>
                    <p>${value.title}</p>
                    <span>价格:${value.price}</span>
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    <span>销量:${value.sailnumber}</span>
                    </li>
                    `
                }
                strhtml += "</ul>"
                goodslist.innerHTML = strhtml;
            }else{
                //抛错
                throw new Error('接口地址有误' + ajax.status);
            }
        }
    }

4. ajax获取其他类型数据

-ajax获取任意类型的文件
(php文件/json格式的数据),xml文件,html文件，js文件

1.获取json文件数据

let ajax = new XMLHttpRequest();
    ajax.open("get","http://localhost/NZ-1903/0305/date.json",true);
    ajax.send();
    ajax.onreadystatechange=function(){
        if(ajax.readyState===4){
            if(ajax.status===200){
                console.log(ajax.responseText);
                console.log(JSON.parse(ajax.responseText));//json字符串转为对象
            } else{
                 throw new Error("接口地址有误"+ajax.status);
            }      
        }
    }

2.获取XML文件数据：弊端里面不仅数数据还有结构，没有json方便，各有各的优势(xml比json早出现)。

let ajax = new XMLHttpRequest();
    ajax.open("get","http://localhost/NZ-1903/0305/date.xml",true);
    ajax.send();
    ajax.onreadystatechange=function(){
        if(ajax.readyState===4){
            if(ajax.status===200){

                console.log(ajax.responseXML);
                let xmldoc=ajax.responseXML;
               console.log(xmldoc.querySelector("xingming").innerHTML);
               console.log(xmldoc.querySelector("person").innerHTML);
            } else{
               throw new Error("接口地址有误"+ajax.status);
            }      
        }
    }

3.获取 html文件数据

let ajax = new XMLHttpRequest();
    ajax.open("get","http://localhost/NZ-1903/0305/date.html",true);
    ajax.send();
    ajax.onreadystatechange=function(){
        if(ajax.readyState===4){
            if(ajax.status===200){
                console.log(ajax.responseText);
            } else{
                 throw new Error("接口地址有误"+ajax.status);
            }      
        }
    }

4.获取js文件数据（一般采用script进行引入）

 let ajax = new XMLHttpRequest();
    ajax.open("get","http://localhost/NZ-1903/0305/date.js",true);
    ajax.send();
    ajax.onreadystatechange=function(){
        if(ajax.readyState===4){
            if(ajax.status===200){
                console.log(ajax.responseText);
            } else{
                throw new Error("接口地址有误"+ajax.status);
            }      
        }
    }

5. ajax传输数据-get

    //传输数据--get，post
    //获取接口数据：接口的放回值，可以直接拼接(php,jsp,asp)。还有无需编译的普通页面，直接获取里面的数据(html,json);
    //1.get方式传输数据--地址栏后面通过?进行拼接,数据与数据之间通过&符号拼接。

    //传入的值都是键值对的形式(key=value),后端通过键值对(key)获取，key自定义的的名称。

    //传入格式:接口地址?key=value&key1=value1&key2=value2......
    let ajax = new XMLHttpRequest();

    //第一种 传入普通字符串
    //ajax.open("get","http://localhost/NZ-1903/0305/getdate.php?name=zhangsan&age=100",true);


    //第二种 传入数组变量,普通的字符串变量...
    // let a = 1;
    // let b = 2;
    // let c= [1,2,3,4,5,6]
    // ajax.open("get", "http://localhost/NZ-1903/0305/getdate.php?num1=" + a + "&num2=" + b+"&num3=" + c, true);


    //第三种 传入对象。
    let obj = {
        a: 6,
        b: 7,
        c: 8
    };
    // ajax.open("get", "http://localhost/NZ-1903/0305/getdate.php?date="+obj, true);
    // 传入的是date:[object Object]  有问题
    // 要转换成a=1&b=2&c=3 ,才可以传给后端

    //采用遍历拼接的方式来实现 
    function objtostring(obj) {
        if (Object.prototype.toString.call(obj).slice(8, -1) === "Object") {
            let arr = []
            for (var atter in obj) {
                arr.push(atter + "=" + obj[atter]);
            }
            return arr.join("&");
        } else {
            throw new Error("你输入的不是一个纯碎的对象");
        }
    }
    
    ajax.open("get", "http://localhost/NZ-1903/0305/getdate.php?" + objtostring(obj), true);


    ajax.send();
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {
            if (ajax.status === 200) {
                console.log(ajax.responseText);
            }
        }
    }

5. ajax传输数据-post

   //传输数据--get，post
    //获取接口数据：接口的放回值，可以直接拼接(php,jsp,asp)。还有无需编译的普通页面，直接获取里面的数据(html,json);
    //1.post方式传输数据--ajax下面的send方法进行传输 + 请求头
    //传入的值都是键值对的形式(key=value),后端通过键值对(key)获取，key自定义的的名称。


    //传入格式:接口地址?key=value&key1=value1&key2=value2......
    let ajax = new XMLHttpRequest();

    let obj = {
        a: 600,
        b: 700,
        c: 800
    };
    function objtostring(obj) {
        if (Object.prototype.toString.call(obj).slice(8, -1) === "Object") {
            let arr = []
            for (var atter in obj) {
                arr.push(atter + "=" + obj[atter]);
            }
            return arr.join("&");
        } else {
            throw new Error("你输入的不是一个纯碎的对象");
        }
    }
    
    ajax.open("post", "http://localhost/NZ-1903/0305/getdate.php", true);

    ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//设置请求头。post传输必须要设置
    //ajax.send("a=100&b=200&c=300");
    
    //传输对象
    ajax.send(objtostring(obj));

    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {
            if (ajax.status === 200) {
                console.log(ajax.responseText);
            }
        }
    }

哈哈小猿

发布了11 篇原创文章 · 获赞 8 · 访问量 248

私信关注