Ajax - jsonp

ajax：用来获取后台数据

• 异步请求数据：不会影响js主线程代码的执行（即不会阻塞js脚本的运行）
• 可以实现一个局部刷新页面的效果

readyState：状态值，用来监听请求是否发送成功，有5个值。
    0 --- 还没初始化请求，也就是在open请求的状态值为0；
    1 --- open()后；
    2 --- 表示发出请求，即send后；
    3 --- 表示后台已经开始接收到请求，但没有全部接受；
    4 --- 数据接受完成。

status：状态码，用来监听后台是否愿意给你回复信息
    404 --- 请求的资源未找到；
    500 --- 服务器错误；
    200 --- 数据返回成功；
    304 --- 请求的数据未更新。

---

ajax请求步骤：

• eval()：js的内置函数，可解析一个字符串为可读的js代码，并且可以执行解析后的js代码。
• 注意：json文件不可以加注释

//请求的基础路径
let baseUrl = "http://120.76.31.111/app";
//1、通过new关键词实例化一个XMLHttpRequest请求。
let xhr = new XMLHttpRequest();
//2、通过实例化对象调用open方法，设置请求的方式和地址。
xhr.open("GET",baseUrl+"/XhlGetSubjectTypeList")//GET也可以小写get
//3、通过实例化对象调用send方法发送请求。
xhr.send();
//4、监听实例化对象是否接受请求。
xhr.addEventListener("readystatechange",()=>{
    if(xhr.readyState == 4 &&　xhr.status == 200){   
        //将字符串转对象：
        //方法1：--- eval()
//                  let res = eval("("+xhr.responseText+")");//语法是这样的！
//                  console.log(res);
        //方法2：--- json
        let res = JSON.parse(xhr.responseText);
        console.log(res);
            //json将对象转换为字符串
            let str = JSON.stringify(res);
            console.log(str);
        //渲染到页面
        //renderData(res);//请求到数据的时候才能调用渲染函数！---自己另外定义函数
    }
})

---

ajax (Asynchronous(异步) JavaScript and XML)

• 异步：（不会阻塞JS脚本的运行）能够同时干多件事（比如：发信息，不用等别人回复就可以继续干别的事情）。
• 同步：（会阻塞JS脚本的运行）同一时间只能干一件事（比如：通过打电话聊天）。

• ajax也可以设置为同步请求，在open的第三个参数是否为异步，默认值为true（异步），而false为同步。
• ajax优点：实现网页的局部刷新

ajax 不能跨域请求：

• 1、协议不同
• 2、端口不同
• 3、域名不同

• 这三个条件满足一个以上即为跨域请求
• 浏览器出于安全考虑，推出一个叫[同源策略]的安全限制
• 同源策略 --- 同端口同协议同域名。

---

怎么解决跨域问题？

1、jsonp方法

• a、动态创建script标签；
• b、给script标签添加src属性，值为请求的地址；
• c、给script标签添加到HTML结构里面；
• d、定义请求地址的回调函数，回调函数第一个参数就是后台返回给我们的数据；

//动态添加script
//jsonp 是异步请求
var _script = document.createElement("script");
_script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&cb=callback";//动态添加
document.body.appendChild(_script);
//callback 必须为全局函数，因为放在script标签中    
function callback(res){
    console.log(res)
}

2、解决跨域的一个通用方法（让后台开放）：

• 需要后台在响应头设置Access-Control-Allow-Origin值为* 或者 是localhost:80
• 后台进行ajax请求是不存在跨域问题，因为不用通过浏览器来执行代码。