本文共 8561 字，大约阅读时间需要 28 分钟。

主要内容：

1. ajax的概述
2. ajax获取数据
3. ajax获取接口渲染页面
4. ajax获取其他类型数据
5. 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 = "
   
    ";                for (let value of renderarr) {
   //遍历数组每一项值                    strhtml += `                    
    
                                        
${
     value.title}
                    价格:${
     value.price}                                                 销量:${
     value.sailnumber}                    
                    `                }                strhtml += "
   
"                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);            }        }    }

转载地址：http://zgkgn.baihongyu.com/