AJAX

为什么会发生Ajax跨域？

浏览器限制
跨域（不是本地）同源策略
XHR请求

所以解决思路：利用jsonp，利用jsonp解决跨域，后台需要改动代码

Ajax的作用是什么：可以实现网页异步更新，这就意味着我们无需加载整个页面的情况下，实行对网页的某一个部分进行更新。也就是实现了页面与web服务器之间数据的异步传输。好了以上都是废话，言简意赅的就是：可以实现页面的局部刷新。

源生的ajax请求纯文本

html

<!-- 源生ajax -->
  <script>
    let xhr = new XMLHttpRequest();
    xhr.open('GET','./simple.txt',true);
    // xhr.onload = function(){
    //   console.log(this.status);
    //   console.log(this.readyState);
    // }
    xhr.onreadystatechange = function(){
      // console.log(this.status);
      // console.log(this.readyState);
      document.body.innerHTML = this.responseText;
    }
      xhr.send();
  </script>

大约整个ajax可以分为四个部分。

创建 XMLHttpRequest对象
使用open（’方式’，url，true/false）方法，第一个参数是我们以什么方式请求数据post还是get？url是我们需要请求文件的路径，第三个参数是否是按照异步请求方式（大多数都是true）；
发送请求
onreadystatechange中我们可以获取到返回值，来更新我们的页面。


status	readyState
0—请求未初始化
1—服务器已经建立连接	200—-‘ok’
2—请求以建立	404—-‘未找到页面’
3—请求已连接	500—-服务器错误
4—请求已完成，且响应就绪

一般我们使用的状态码是，status=4 并且readyState = 200.

ajax请求json文件

这里说明一下，我在这里也遇到一个坑啊，我一开是使用的是onreadystatechange，但是没有判断状态码，这就导致了可能响应还没就绪，我就获取利用json.parse方法解析json文件。从而导致报错，如果这里不使用onreadystatechange可以使用onload，它是响应就绪才执行的。

json.parse —–可以返回给定 JSON 字符串转换后的对象。
json.stringify—–将对象或者数组转换为字符串。

html

<body>
  <button id='btn'>获取单个用户</button>
  <div id="user"></div>
  <!-- 源生ajax请求json文件 -->
  <script>
    document.getElementById('btn').addEventListener('click',loadUser);
    function loadUser(){
      let xhr = new XMLHttpRequest();
      xhr.open('GET','json1.json',true);
      xhr.onreadystatechange = function(){
        if(this.status == 200 && this.readyState == 4){
          var data = JSON.parse(this.responseText);
          let str = '';
          str += `
            <ul>
              <li>${data[0].name}</li>
              <li>${data[0].id}</li>
              <li>${data[0].sex}</li>
            </ul>
          `;
          document.getElementById('user').innerHTML = str;
        }
      }
      xhr.send();
    }
  </script>

ajax请求github接口

html

<body>
  <button id='btn'>请求多个用户</button>
  <div id="users"></div>
  <script>
    document.getElementById("btn").addEventListener('click',loadUsers);
    function loadUsers(){
      let xhr = new XMLHttpRequest();
      xhr.open('GET','https://api.github.com/users',true);
      xhr.onreadystatechange = function(){
        if(this.status == 200 && this.readyState == 4 ){
          let users = JSON.parse(this.responseText);
          // console.log(users);
          // 遍历整个数组
          let str = '';
          for( let i in users){
            str += `
              <p>${users[i].login}</p>
            `
          }
          document.getElementById('users').innerHTML = '用户名：'+str;
        }
      }
      xhr.send();
    }
  </script>

ajax请求php

html

<form action="">
    <input type="text" id='text'>
  </form>
  <button id = 'btn'>获取php数据</button>
  <script>
    document.getElementById('btn').addEventListener('click',getMessage);
    function getMessage(){
      let name = document.getElementById('text').value;
      let xhr =  new XMLHttpRequest();
      xhr.open('GET','demo3.php?name='+name,true);
      xhr.onload = function(){
        console.log(this.responseText);
      }
      xhr.send();
    }
  </script>

php代码：

php

<?php
 if(isset($_GET['name'])){
   echo 'GET:你的名字是'.$_GET['name'];
 }
?>

jquery中ajax的应用

在jquery中ajax用着就特别方便，比起源生的较容易的多。

dateType—指定的请求数据的方式
url—路径
success—-响应就绪会执行一个回调函数，data是返回的值。恩。。相当于this.responseText

html

<body>
  <button id = 'btn'>获取数据</button>
  <script>
    document.getElementById('btn').onclick = function(){
        $.ajax({
        dateType: 'GET',
        url: './demo3.php?name=herry',
        success: function(data){
          console.log(data);
        }
      });
    }
  </script>
</body>

以上有没有发现都是GET请求呢？

POST请求数据

html

<body>
  <script>
    let xhr = new XMLHttpRequest();
    xhr.open('POST','./demo2.php');
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xhr.send('name=zs&age=14');
    xhr.onreadystatechange = ()=>{
      if(xhr.readyState != 4) return;
      console.log(xhr.responseText); 
    }
  </script>
</body>

这里需要注意的是，我们如果携带参数的话，不是在url中写了，而是以密文的方式，用send发送。同样注意的是，我们必须要设置请求头，不然的话是post不到数据的

fetch

会了ajax为何还要学习fetch

语法简洁，更加语义化
基于promise实现，支持asyn/awit
脱离了xhr

fetch中的get操作

javascript

fetch(url,{
    method: 'GET/POST'
}).then((res)=>{
    //json方法中包含一个promise对象，但是这个我们无需写resolve和reject，因为计算机会帮助我们判断时候成功还是失败
    res.json(()=>{
        
    }).then((res)=>{
        console.log(res)//res是后台返回的数据
    }).catch(()=>{
        console.log("服务器错误")
    })
})

fetch+nodejs操作

前端

html

<body>
    用户名：<input type="text" id="user"><br>
    密码：<input type="password" id="pass"><br>
    <button id="btn">提交</button>
    <script>
        window.onload = function (){
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                // console.log(`http://localhost:3000/login?user=${user.value}&pass=${pass.value}`);
                fetch(`http://localhost:3000/login?user=${user.value}&pass=${pass.value}`,{
                    method: 'GET'
                }).then((res)=>{
                    res.json(()=>{

                    }).then((res)=>{
                        console.log(res)
                        if(res.ok){
                            document.body.style.background = "red";
                        }else{
                            document.body.style.background = "green";
                        }
                    },()=>{
                        console.log("服务器错误");
                    })
                })
            }
        }
    </script>
</body>

后端

javascript

const express = require("express")
const app = express()
app.use("",express.static("./"))
let users = {
    leo: "1111"
}
app.use("/login",(req,res)=>{
    if(users[req.query.user] == req.query.pass){
        res.send({ok:1,msg:"登录成功"})
    }else{
        res.send({ok:0,msg:"登录失败"})
    }
})
const port = process.env.PORT || 3000
app.listen(port,()=>{
    console.log(`server is running ${port}`)
})