一、原生Ajax

菜鸟教程

一、什么是Ajax

Asynchronous JavaScript and XML
(异步的JavaScript 和XML)

• Ajax不是某种编程语言，而是一种在无需重新加载整个网页的情况下，能够局部更新网页的技术
• 从服务器上获取数据的一种技术，是异步的

二、完整的原生Ajax实现步骤

2-1 创建Ajax核心对象

var xhr = new XMLHttpRequest();

2-2 与服务器建立连接

var url = “https://easy-mock.com/mock/5d67436624fd60626abfe91e/ajax/base“;

2-3 发送请求

xhr.open (“get”,url,true); //true表示异步处理
xhr.send ( );

2-3-1 open(method,url,async)

规定请求的类型、URL以及是否异步处理请求。

• method：请求的类型；GET或者POST
• url：文件在服务器上的位置

• async：true（异步）或 false（同步）

  2-3-4 send(string)

  将请求发送到服务器。

• string：仅用于POST请求

  2-4 响应

  xhr.onreadystatechange = function () {
         响应函数
  }

<p id="name"></p>
<p id="age"></p>
<script>
    var xhr=new XMLHttpRequest();
    var url="https://www.easy-mock.com/mock/5d67436224fd60626abfe906/ajax/base";
    xhr.open('get',url,true)  //true  异步
    xhr.send()
    xhr.onreadystatechange=function(){
        /* console.log(xhr.readyState)
        console.log(xhr.status) */
        if(xhr.readyState==4 && xhr.status==200){    //请求已完成  200：请求成功
            var res=JSON.parse(xhr.responseText);
            console.log(res.data.name)
            var name=document.getElementById("name")
            name.innerHTML=res.data.name;
        }
    }
</script>

三、同步异步

 ↑ 详情请点击

3-1 同步

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', 'http://localhost:3000/getTime', false)
// 同步方式 执行需要 先注册事件再调用 send，否则 readystatechange 无法触发
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
        // 这里的代码最后执行
        console.log('request done')
    }
}
xhr.send(null)
console.log('after ajax')

3-2 异步

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

var xhr = new XMLHttpRequest()
// 默认第三个参数为 true 意味着采用异步方式执行
xhr.open('GET', 'http://localhost:3000/getTime', true)
xhr.send(null)
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
        // 这里的代码最后执行
        console.log('request done')
    }
}
console.log('after ajax');

四、同源策略

不同的域名不能相互访问对方数据
域名：协议、子域名、主域名、端口号四部分组成，有一个不同就不是相同域

• 协议相同
• 域名相同
• 端口相同