Ajax

• 在网页上获取请求的方式

  
  获取

//      1.创建对象
        var xhr = new XMLHttpRequest();
//      2.发送请求 open方法
        xhr.open("GET","https://img.alicdn.com/simba/img/TB1hV2dw7ZmBKNjSZPiSutFNVXa.jpg");//注册用什么方式，去哪里请求
//      3.将请求发送出去 send方法
        xhr.send();
//      4.处理数据
        xhr.addEventListener("readystatechange",function(e){
                if(e.target.readyState==4 && e.target.status==200 ){
                    console.log(e.target.response);
                    renderData(e.target.response);
                    console.log(JSON.parse(e.target.response));
                    
                }
            })

状态值readystate

        状态值 含义
          0     已创建XMLHttpRequest对象单位，但未调用open
          1     已调用open,但是还未发送(send)出去
          2     已经调send,可以访问头部和状态
          3     下载中
          4     下载完毕,前端可以处理数据

传送门：状态值

状态码status

        状态码
        1xx     接收到请求并继续处理
        2xx     处理成功响应类
        3xx     重定向响应类
        4xx     客户端错误,语法错误或者有些语句不能正确执行
        5xx     服务端问题
        在网络世界里面,优先使用string传输

Access-Control-Allow-Credentials响应头第一个数据,是否允许带凭证访问
Access-Control-Allow-Origin(跨域问题元凶之一),响应头第二个数据，允许域名向服务器获取资源
这两个数据都是面试常问的

传送门：状态码

处理数据

添加一个事件侦听(readystatechange)以监察状态值的改变，当状态值readystate为4而且状态码status为200时，前端才可以进行数据的操作。

e.target等同于xhr

前文在外部创建了一个renderData()函数，这个函数主要用来处理所获得的数据，也就是e.target.response。在Ajax的传输中，是使用字符串进行传输的，因此使用JSON进行数据的传输，后端将信息打包成为JSON串，前端使用AJax将JSON串获取到手并转换成对象。

JSON

json的中文全名是 JS 对象简谱，json是一门非常严谨的语言，不允许注释的存在，json和js对象很像，可以说是js对象的字符串表达形式，但是，json的键值对都必须用""包含起来

JSON 和 JS 对象互转

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

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

要实现从 JSON 转换为对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

Ajax获取数据后转换JSON串的示例

function renderData(responce){
                var baba=document.querySelector(".baba");
                var dataObj=JSON.parse(responce);
                var template=function(pic,title,content,zanTotal){
//                  ES6语法,模板
                    return `
                <div class="img-wrap">
                    <img src=${pic} /> 
                </div>
                <div class="content">
                    <h4>${title}</h4>
                    <p>${content}</p>
                    <p>${zanTotal}人说好</p>
                </div>`
            
            
                }
                dataObj.result.forEach(function(el,index){
                    var item=document.createElement("div");
                    item.classList.add("item");
                    item.innerHTML=template(el.pic,el.title,el.content,el.zanTotal);
                    
                    baba.appendChild(item);
                })
            }

ES6模板

ES6模板语法
``

使用一个函数进行传参，返回一个``模板，传进的参数使用${}进行替换

在js文件中如果使用ES6模板的话，打代码时不会出现提示